/*
 * Akım 360 — project stylesheet.
 *
 * Loads after the parent's compiled CSS and after tokens.css. Everything here
 * is either (a) structure the parent has no opinion about, or (b) a project
 * component. Brand values come from tokens.css only — no hex codes below.
 *
 * Unlayered on purpose: WordPress core injects unlayered inline CSS, and the
 * parent's components live in @layer components, so plain rules here win
 * where they need to without specificity games.
 */

/* ------------------------------------------------------------------ */
/* Typeface                                                            */
/* ------------------------------------------------------------------ */

/*
 * Red Hat Display — one self-hosted variable file, Latin-Extended (covers
 * ı İ ğ Ğ ş Ş ç Ç ö Ö ü Ü). 14 KB, preloaded once by functions.php.
 * DECISIONS.md K-03 and K-15.
 */

@font-face {
	font-family: "Red Hat Display";
	src: url("../fonts/RedHatDisplay.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

/* Base type: the reference sets body copy a touch larger and airier. */
body {
	font-size: 1.0625rem;
	line-height: 1.68;
}

/* ------------------------------------------------------------------ */
/* Display type                                                        */
/* ------------------------------------------------------------------ */

/*
 * The editorial voice: heavy weight, tight tracking, fluid size.
 *
 * line-height never drops below --akim-lh-display on multi-line headings.
 * In Turkish the descender of ğ/ş/ç lands where the dots of İ/Ö/Ü sit on the
 * line above; at 0.92 they collide. Caught in the Faz 1 prototype.
 */

.baslik-dev,
.baslik-bolum {
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: var(--akim-lh-display);
	text-wrap: balance;
	color: var(--color-primary);
}

.baslik-dev {
	font-size: clamp(2.75rem, 7.4vw, 6.75rem);
}

.baslik-dev.tek-satir {
	line-height: var(--akim-lh-display-single);
}

.baslik-bolum {
	font-size: clamp(1.875rem, 3.6vw, 3.25rem);
	letter-spacing: -0.035em;
}

.baslik-dev .ikincil {
	display: block;
	color: var(--color-muted);
	font-style: normal;
}

/* Technical metadata: figure numbers, spec labels, section numbering. */
.teknik-etiket {
	font-family: var(--akim-mono);
	font-size: 0.71875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.bolum-no {
	display: block;
	margin-bottom: 0.75rem;
}

/* The rule that opens a section eyebrow. */
.ustbaslik {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
	font-family: var(--akim-mono);
	font-size: 0.71875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.ustbaslik::before {
	content: "";
	width: 2.5rem;
	height: 2px;
	background-color: var(--akim-signal-koyu);
}

/* ------------------------------------------------------------------ */
/* Spec plate — the technical-document device                          */
/* ------------------------------------------------------------------ */

.pafta {
	border: 1px solid var(--color-line);
	background-color: var(--color-surface);
}

.pafta-baslik {
	padding: 0.875rem 1.375rem;
	border-bottom: 1px solid var(--color-line);
	background-color: var(--color-surface-alt);
}

.pafta dl {
	margin: 0;
	padding: 0.375rem 1.375rem 0.875rem;
}

.pafta-satir {
	display: flex;
	justify-content: space-between;
	gap: 1.125rem;
	padding: 0.8125rem 0;
	border-bottom: 1px dashed var(--color-line);
	font-size: 0.90625rem;
}

.pafta-satir:last-child {
	border-bottom: 0;
}

.pafta-satir dt {
	font-family: var(--akim-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
	padding-top: 0.1875rem;
}

.pafta-satir dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* ------------------------------------------------------------------ */
/* Fact strip                                                          */
/* ------------------------------------------------------------------ */

.olcu-serit {
	border-top: 1px solid var(--color-line);
}

.olcu-serit-ic {
	display: grid;
	grid-template-columns: 1fr;
}

.olcu {
	padding: 1.375rem 1.625rem 1.375rem 0;
	font-size: 0.84375rem;
	color: var(--color-muted);
	border-bottom: 1px solid var(--color-line);
}

.olcu:last-child {
	border-bottom: 0;
}

.olcu b {
	display: block;
	margin-bottom: 0.1875rem;
	color: var(--color-ink);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

@media (min-width: 900px) {
	.olcu-serit-ic {
		grid-template-columns: repeat(4, 1fr);
	}

	.olcu {
		border-bottom: 0;
		border-right: 1px solid var(--color-line);
		padding-right: 1.625rem;
	}

	.olcu:last-child {
		border-right: 0;
	}
}

/* ------------------------------------------------------------------ */
/* Dark surface                                                        */
/* ------------------------------------------------------------------ */

/*
 * Sections alternate light → light-alt → dark so the page has rhythm
 * (EXPERIENCE.md). The signal accent only ever appears in here.
 */

.yuzey-koyu {
	background-color: var(--color-primary);
	color: #fff;
	border-radius: var(--akim-radius-genis);
}

/* The navy bands sit as rounded cards on the page, not edge-to-edge slabs. */
.section-kapanis,
.section-olcek {
	margin-inline: clamp(0.75rem, 3vw, 2.5rem);
	border-radius: var(--akim-radius-genis);
}

.yuzey-koyu .teknik-etiket,
.yuzey-koyu .metin-soluk {
	color: var(--akim-dim);
}

.yuzey-koyu .ustbaslik,
.yuzey-koyu .baslik-bolum {
	color: var(--akim-signal);
}

.yuzey-koyu .baslik-bolum {
	color: #fff;
}

.yuzey-koyu .metin-soluk {
	color: rgb(255 255 255 / 0.74);
}

.yuzey-koyu .ustbaslik::before {
	background-color: var(--akim-signal);
}

.yuzey-koyu a {
	color: var(--akim-on-deep);
}

.yuzey-koyu .btn-primary {
	background-color: var(--akim-signal);
	color: var(--color-ink);
}

.yuzey-koyu .btn-primary:hover {
	background-color: var(--akim-signal-koyu);
}

/*
 * WhatsApp keeps its own green everywhere, including on navy: it is a
 * conversion affordance and the colour is the recognition. The standard
 * green only separates from the navy band at 2.3:1, under the 3:1 guidance
 * for UI components, so the band uses the brighter value with dark text.
 */
.yuzey-koyu .btn-wa {
	background-color: var(--akim-wa-parlak);
	color: var(--akim-wa-parlak-ink);
}

.yuzey-koyu .btn-wa:hover {
	background-color: var(--akim-signal);
	color: var(--color-ink);
}

.yuzey-koyu .btn-outline,
.yuzey-koyu .btn-cizgili {
	border-color: rgb(255 255 255 / 0.32);
	background-color: transparent;
	color: #fff;
}

.yuzey-koyu .btn-outline:hover,
.yuzey-koyu .btn-cizgili:hover {
	background-color: rgb(255 255 255 / 0.1);
}

/* Placeholder marker for data that is not confirmed yet. */
.bekliyor {
	display: inline-block;
	margin-top: 0.625rem;
	padding: 0.125rem 0.375rem;
	border: 1px dashed var(--color-line);
	font-family: var(--akim-mono);
	font-size: 0.65625rem;
	letter-spacing: 0.08em;
	color: var(--color-muted);
}

.yuzey-koyu .bekliyor {
	border-color: #4a4326;
	color: var(--akim-signal);
}

/* ------------------------------------------------------------------ */
/* Fixed mobile contact bar                                            */
/* ------------------------------------------------------------------ */

/*
 * The only permanently visible conversion affordance (CONVERSION.md).
 * Mobile only; the desktop header carries the number instead.
 */

.mobil-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	background-color: var(--color-surface);
	border-top: 1px solid var(--color-line);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobil-cta-inner {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
}

.mobil-cta-inner > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 150ms ease;
}

/* WhatsApp carries the weight: it is how this audience actually gets in touch. */
.mobil-cta-whatsapp {
	color: #fff;
	background-color: var(--akim-wa);
}

.mobil-cta-whatsapp:hover,
.mobil-cta-whatsapp:focus-visible,
.mobil-cta-whatsapp:active {
	background-color: var(--akim-wa-hover);
}

/*
 * This bar only renders on mobile, where hover never fires. Without :active
 * a tap gives no feedback at all until WhatsApp opens.
 */
.mobil-cta-inner > a:active {
	transform: scale(0.985);
}

.mobil-cta-ara {
	color: var(--color-ink);
	background-color: var(--color-surface);
}

.mobil-cta-ara:hover,
.mobil-cta-ara:focus-visible {
	background-color: var(--color-surface-alt);
}

/* A single action fills the bar. */
.mobil-cta-inner > a:only-child {
	grid-column: 1 / -1;
}

/* Keep the bar off the content it would otherwise cover. */
@media (max-width: 767px) {
	body {
		padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (min-width: 768px) {
	.mobil-cta {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Header phone number                                                 */
/* ------------------------------------------------------------------ */

.header-tel {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
	white-space: nowrap;
}

.header-tel:hover,
.header-tel:focus-visible {
	color: var(--color-primary);
}

@media (min-width: 1024px) {
	.header-tel {
		display: inline-flex;
	}
}

/* ------------------------------------------------------------------ */
/* Section rhythm                                                      */
/* ------------------------------------------------------------------ */

.section-yetkinlik,
.section-surec,
.section-olcek,
.section-isler {
	padding-block: clamp(4rem, 8vw, 6rem);
	border-bottom: 1px solid var(--color-line);
}

.yuzey-koyu {
	border-bottom-color: var(--akim-line-deep);
}

.bolum-basi {
	display: grid;
	gap: 1.25rem;
	margin-bottom: 3rem;
}

.bolum-not {
	max-width: 52ch;
}

@media (min-width: 1024px) {
	.bolum-basi {
		grid-template-columns: 6fr 6fr;
		align-items: end;
	}
}

.metin-soluk {
	color: var(--color-muted);
}

/* --- Hero --------------------------------------------------------- */

.section-hero-akim {
	border-bottom: 0;
}

.hero-akim-grid {
	display: grid;
	gap: 2rem;
	padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4vw, 4rem);
	align-items: center;
	min-height: min(78vh, 46rem);
}

@media (min-width: 1024px) {
	.hero-akim-grid {
		grid-template-columns: 6.4fr 5.6fr;
		gap: 3rem;
	}
}



.hero-kaydir {
	display: none;
	margin-top: 2.5rem;
	padding-left: 2rem;
	position: relative;
	font-size: 0.65625rem;
}

.hero-kaydir::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1.375rem;
	height: 1px;
	background-color: currentColor;
}

@media (min-width: 1024px) {
	.hero-kaydir {
		display: block;
	}
}

.hero-akim-lede {
	max-width: 44ch;
	margin-top: 2rem;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	color: var(--color-muted);
}

.hero-akim-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.25rem;
}

/* --- Capability: image plates -------------------------------------- */

.section-yetkinlik {
	background-color: var(--color-surface);
	border-bottom-color: var(--color-line);
}

.yetkinlik-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 700px) {
	.yetkinlik-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	/*
	 * Twelve columns so six domains land as 2 + 4 with no orphan. A six-column
	 * grid gives 2 + 3 + 1 and the lone last tile reads as a mistake.
	 */
	.yetkinlik-grid {
		grid-template-columns: repeat(12, 1fr);
	}

	/* Weighted: the two commercial domains lead. */
	.yetkinlik:nth-child(1),
	.yetkinlik:nth-child(2) {
		grid-column: span 6;
		min-height: 22rem;
	}

	.yetkinlik:nth-child(n+3) {
		grid-column: span 3;
	}
}

.yetkinlik {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--akim-radius-yumusak);
	min-height: 15.5rem;
	background-color: var(--color-surface-alt);
	text-decoration: none;
	isolation: isolate;
}

/* The photograph, cooled and dimmed so type stays readable over it. */
.yetkinlik-gorsel {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.yetkinlik-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * In colour. The grey was a house style, not a legibility device — the
	 * gradient below is what protects the type, and it does that against a
	 * colour frame exactly as well as against a grey one.
	 *
	 * Several source frames are already dark; darkening them further made three
	 * tiles read as empty boxes, so they are lifted rather than dimmed and the
	 * saturation is pulled back a touch so the photographs sit under the type
	 * instead of competing with it.
	 */
	filter: saturate(0.92) contrast(1.02) brightness(1.06);
	transform: scale(1.02);
	/* One gesture, one scale: the largest movement gets the longest time. */
	transition:
		transform var(--akim-hiz-panel) var(--akim-egri),
		filter var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

/* Graphite wash: heavier at the bottom where the text sits. */
.yetkinlik::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		180deg,
		rgb(31 33 42 / 0.05) 0%,
		rgb(31 33 42 / 0.34) 40%,
		rgb(31 33 42 / 0.88) 100%
	);
	transition: background var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

.yetkinlik-ic {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	min-height: inherit;
	padding: 1.5rem 1.5rem 1.625rem;
	color: var(--akim-on-deep);
}

.yetkinlik-ust {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.yetkinlik-ust .teknik-etiket {
	color: var(--akim-signal);
}

.yetkinlik-sayi {
	color: var(--akim-dim) !important;
}

.yetkinlik-alt {
	display: block;
	margin-top: 3rem;
}

.yetkinlik-ad {
	display: block;
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.12;
}

.yetkinlik:nth-child(1) .yetkinlik-ad,
.yetkinlik:nth-child(2) .yetkinlik-ad {
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
}

.yetkinlik-not {
	display: block;
	margin-top: 0.5rem;
	max-width: 34ch;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #c3cad0;
}

.yetkinlik-ok {
	display: block;
	margin-top: 1.125rem;
	color: var(--akim-signal);
	transform: translateX(-0.375rem);
	opacity: 0.85;
	transition:
		transform var(--akim-hiz-orta) var(--akim-egri),
		opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

/*
 * Focus feedback sits outside the pointer query. That query exists to keep
 * hover off touch devices; putting focus inside it left a keyboard user on a
 * tablet with no indication at all on the front page's main navigation.
 */
.yetkinlik:focus-visible .yetkinlik-gorsel img {
	transform: scale(1.07);
	filter: saturate(1.06) contrast(1.02) brightness(1.12);
}

.yetkinlik:focus-visible::before {
	background: linear-gradient(
		180deg,
		rgb(31 33 42 / 0.02) 0%,
		rgb(31 33 42 / 0.26) 40%,
		rgb(31 33 42 / 0.85) 100%
	);
}

.yetkinlik:focus-visible .yetkinlik-ok {
	transform: none;
	opacity: 1;
}

@media (pointer: fine) {
	.yetkinlik:hover .yetkinlik-gorsel img {
		transform: scale(1.07);
		filter: saturate(1.06) contrast(1.02) brightness(1.12);
	}

	.yetkinlik:hover::before {
		background: linear-gradient(
			180deg,
			rgb(31 33 42 / 0.02) 0%,
			rgb(31 33 42 / 0.26) 40%,
			rgb(31 33 42 / 0.85) 100%
		);
	}

	.yetkinlik:hover .yetkinlik-ok {
		transform: none;
		opacity: 1;
	}
}

/* --- Process ------------------------------------------------------ */

.surec-akis {
	list-style: none;
	margin: 0;
	padding: 0;
}

.surec-adim {
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	gap: 1.25rem;
	padding-block: 1.75rem;
	border-top: 1px solid var(--color-line);
	align-items: baseline;
}

.surec-adim:last-child {
	border-bottom: 1px solid var(--color-line);
}

.surec-no {
	padding-top: 0.25rem;
}

.surec-ad {
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

/*
 * A step has three children (number, name, note) in a two-column grid, so
 * without this the note wraps into column 1 — the 3.5rem number column — and
 * sets one or two words per line. Only visible on mobile.
 */
.surec-not {
	grid-column: 2;
}

@media (min-width: 900px) {
	.surec-adim {
		grid-template-columns: 6rem 15rem 1fr;
		gap: 2.5rem;
	}

	.surec-not {
		grid-column: auto;
	}
}

/* --- Scale (dark) ------------------------------------------------- */

.olcek-grid {
	display: grid;
	gap: 1px;
	background-color: var(--akim-line-deep);
	border: 1px solid var(--akim-line-deep);
}

@media (min-width: 700px) {
	.olcek-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.olcek-oge {
	padding: 1.875rem 1.625rem;
	background-color: var(--akim-deep);
}

.olcek-oge b {
	display: block;
	font-size: clamp(2.125rem, 4vw, 3.375rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

.olcek-oge span {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.84375rem;
	color: var(--akim-dim);
}

.olcek-oge .bekliyor {
	display: inline-block;
	width: auto;
}

/* --- Selected work ------------------------------------------------ */

.isler-grid {
	display: grid;
	gap: 1.75rem;
}

@media (min-width: 900px) {
	.isler-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.is-plaka {
	display: block;
	text-decoration: none;
	border: 1px solid var(--color-line);
	padding: 0.75rem;
	transition: border-color 180ms ease;
}

.is-plaka:hover,
.is-plaka:focus-visible {
	border-color: var(--color-ink);
}

.is-gorsel {
	display: block;
	overflow: hidden;
	background-color: var(--color-surface-alt);
}

.is-gorsel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	filter: saturate(0.96) contrast(1.03);
	transition: filter 400ms ease;
}

/* Hover adds depth now, rather than revealing a colour that is already there. */
.is-plaka:hover .is-gorsel img,
.is-plaka:focus-visible .is-gorsel img {
	filter: saturate(1.08) contrast(1.06);
}

.is-altyazi {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.75rem;
}

.is-ad {
	display: block;
	margin-top: 0.375rem;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* --- Closing ------------------------------------------------------ */

.section-kapanis {
	padding-block: clamp(4.5rem, 9vw, 7rem);
}

.kapanis-baslik {
	max-width: 17ch;
	margin-top: 1rem;
}

.kapanis-not {
	max-width: 46ch;
	margin: 1rem 0 2rem;
}

.kapanis-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cta-number {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Service page                                                        */
/* ------------------------------------------------------------------ */

.hizmet-basi {
	border-bottom: 1px solid var(--color-line);
	padding-block: 2rem clamp(2.5rem, 5vw, 4rem);
}

.hizmet-basi .breadcrumbs {
	margin-bottom: 2.5rem;
}

.hizmet-basi-grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.hizmet-basi-grid {
		grid-template-columns: 7fr 5fr;
		gap: 4rem;
		align-items: start;
	}
}

.hizmet-h1 {
	font-size: clamp(2.25rem, 5vw, 4rem);
	max-width: 16ch;
}

.hizmet-ozet {
	max-width: 46ch;
	margin-top: 1.5rem;
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	color: var(--color-muted);
}

/* Same as every other action row: laid out, not left to collapsing whitespace. */
.hizmet-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.hizmet-govde {
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.hizmet-icerik {
	max-width: 68ch;
}

.hizmet-icerik h2 {
	margin-top: 2.75rem;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.hizmet-icerik h2:first-child {
	margin-top: 0;
}

/* --- FAQ ---------------------------------------------------------- */

.hizmet-sss {
	padding-block: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid var(--color-line);
	background-color: var(--color-surface-alt);
}

/*
 * The card is wider than the article column by exactly its own padding, so the
 * text inside it lands on the same measure as the prose above. Reading from
 * the article into the questions, the column does not move.
 *
 * The earlier 68ch applied to the card rather than its contents, which pulled
 * the text in and left the toggle crowding it; the version before that spanned
 * the full container and tripled the column width at the section boundary.
 */
.sss-liste {
	max-width: calc(68ch + 2 * clamp(0.75rem, 2vw, 1.25rem));
	margin-top: 2rem;
}

/*
 * One definition.
 *
 * This component was written twice: a divider list here, and a card treatment
 * three hundred lines further down, added when the rounded surface language
 * came in. Neither knew about the other, so each declared only part of the
 * picture and the browser resolved them into something nobody designed — a
 * bordered card with a redundant divider drawn through it, the summary with no
 * horizontal padding so the question sat against the border, and a small grey
 * plus adrift at the far edge.
 *
 * Two blocks styling one component is the bug. The distance between them is
 * why it survived: line 978 and line 2716 are never on screen together, and
 * each reads as correct on its own.
 *
 * The card is the language the rest of the site speaks, so the card stayed and
 * the divider list is gone. Radius is declared here rather than in the shared
 * rounded-surfaces list for the same reason — one place to look.
 */
.sss-oge {
	padding: 0;
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-surface);
	overflow: hidden;
	transition:
		border-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		box-shadow var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

.sss-oge + .sss-oge {
	margin-top: 0.625rem;
}

/* The open row carries the accent so you can see where you are in the list. */
.sss-oge[open] {
	border-color: var(--color-primary);
}

.sss-oge:hover {
	border-color: var(--akim-signal-koyu);
}

.sss-oge summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: 1.375rem clamp(0.75rem, 2vw, 1.25rem);
	font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-ink);
	cursor: pointer;
	list-style: none;
	transition:
		color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		padding-left var(--akim-hiz-orta) var(--akim-egri);
}

.sss-oge summary::-webkit-details-marker {
	display: none;
}

/*
 * One glyph that rotates rather than two that swap: `content` cannot tween,
 * so a plus turning 45° is the only way to animate between + and ×.
 */
.sss-oge summary::after {
	content: "+";
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	background-color: var(--color-surface);
	font-family: var(--akim-mono);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	color: var(--color-primary);
	transition:
		transform var(--akim-hiz-orta) var(--akim-egri),
		background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		border-color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.sss-oge[open] summary::after {
	transform: rotate(45deg);
}

.sss-oge summary:hover,
.sss-oge summary:focus-visible {
	color: var(--color-primary);
	padding-left: clamp(1rem, 2.4vw, 1.75rem);
}

.sss-oge summary:hover::after,
.sss-oge summary:focus-visible::after {
	border-color: var(--color-primary);
	background-color: var(--akim-signal);
}

.sss-cevap {
	padding: 0 clamp(0.75rem, 2vw, 1.25rem) 1.5rem;
	max-width: 72ch;
	color: var(--color-muted);
}

.sss-cevap p {
	margin: 0;
}

/*
 * Progressive enhancement: browsers that can interpolate to `auto` animate the
 * answer open. Everywhere else it appears instantly, which is the behaviour
 * that shipped before, so nothing is lost by the fallback.
 */
@supports (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	.sss-oge::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			block-size var(--akim-hiz-panel) var(--akim-egri),
			content-visibility var(--akim-hiz-panel) allow-discrete,
			opacity var(--akim-hiz-orta) var(--akim-egri-yumusak);
	}

	.sss-oge[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* --- Related ------------------------------------------------------ */

.hizmet-ilgili {
	padding-block: clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid var(--color-line);
}

/* --- Card strip ---------------------------------------------------- */

/*
 * A horizontal strip rather than a three-cell grid.
 *
 * The grid was built out of a 1px background showing through a 1px gap, which
 * is a clean way to draw hairlines — until something else rounds the cells.
 * `.ilgili-oge` was defined twice, once as a flat cell in that grid and once,
 * three hundred lines further down, as a rounded card with a lifting hover.
 * The result was rounded cards floating in a hairline table, with the table's
 * grey showing through around every corner. Same failure as the FAQ, same
 * cause: one component, two definitions, far apart.
 *
 * Scroll-snap carries the interaction on its own. The buttons and the progress
 * rail are progressive enhancement — JS unhides them, so a page with no JS
 * still scrolls.
 */
.seri {
	position: relative;
	margin-top: 1.75rem;
}

.seri-ray {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(82vw, 22rem);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	overscroll-behavior-x: contain;
	/*
	 * `overflow-x: auto` makes the block axis a scroll container too, so the
	 * card's hover lift and its bottom border were being clipped against the
	 * track. The padding is the room they lift into.
	 */
	padding-block: 4px 0.75rem;
	scrollbar-width: none;
}

.seri-ray::-webkit-scrollbar {
	display: none;
}

.seri-kart {
	display: flex;
	flex-direction: column;
	scroll-snap-align: start;
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-surface);
	overflow: hidden;
	text-decoration: none;
	transition:
		border-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		transform var(--akim-hiz-orta) var(--akim-egri);
}

.seri-kart:hover,
.seri-kart:focus-visible {
	border-color: var(--color-primary);
	transform: translateY(-3px);
}

.seri-gorsel {
	display: block;
	/* Card radius less its border, as on the hub cards. */
	border-radius: calc(var(--akim-radius-yumusak) - 1px) calc(var(--akim-radius-yumusak) - 1px) 0 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--akim-radius-genis);
	background-color: var(--color-surface-alt);
	overflow: hidden;
}

.seri-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	/* Cooled to sit with the capability plates rather than shout over them. */
	filter: saturate(0.96) contrast(1.03);
	transition:
		transform var(--akim-hiz-panel) var(--akim-egri),
		filter var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

.seri-kart:hover .seri-gorsel img,
.seri-kart:focus-visible .seri-gorsel img {
	transform: scale(1.04);
	filter: saturate(1.08) contrast(1.05);
}

.seri-govde {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1.25rem 1.5rem;
}

.seri-ad {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-primary);
}

.seri-not {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--color-muted);
}

.seri-ok {
	margin-top: auto;
	padding-top: 0.75rem;
	color: var(--color-primary);
	opacity: 0.45;
	transition:
		opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		transform var(--akim-hiz-orta) var(--akim-egri);
}

.seri-kart:hover .seri-ok,
.seri-kart:focus-visible .seri-ok {
	opacity: 1;
	transform: translateX(0.375rem);
}

/* --- Strip controls ------------------------------------------------ */

.seri-kumanda {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

.seri-dugme {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	background-color: var(--color-surface);
	color: var(--color-primary);
	cursor: pointer;
	transition:
		border-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.seri-dugme:hover:not(:disabled),
.seri-dugme:focus-visible:not(:disabled) {
	border-color: var(--color-primary);
	background-color: var(--akim-signal);
}

.seri-dugme:disabled {
	opacity: 0.3;
	cursor: default;
}

.seri-ilerleme {
	position: relative;
	flex: 1;
	height: 2px;
	background-color: var(--color-line);
	overflow: hidden;
}

.seri-ilerleme > span {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 0;
	background-color: var(--color-primary);
	transform-origin: left center;
}


.ilgili-hub {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
}

/* --- Breadcrumbs (project styling on the parent component) --------- */

.breadcrumbs ol {
	font-family: var(--akim-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Category hub and service directory                                  */
/* ------------------------------------------------------------------ */

.hub-basi {
	border-bottom: 1px solid var(--color-line);
	padding-block: 2rem clamp(2.5rem, 5vw, 4rem);
}

.hub-basi .breadcrumbs {
	margin-bottom: 2.5rem;
}

.hub-basi-grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 1024px) {
	.hub-basi-grid {
		grid-template-columns: 6fr 6fr;
		gap: 4rem;
		align-items: end;
	}
}

.hub-h1 {
	font-size: clamp(2.25rem, 5.4vw, 4.5rem);
	max-width: 14ch;
}

.hub-giris {
	max-width: 52ch;
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	color: var(--color-muted);
}

/*
 * The two pills were positioned by nothing but the whitespace between the tags,
 * which inline-flex collapses to a single space — and at these radii a single
 * space reads as the buttons touching. Laid out properly, and wrapping rather
 * than overflowing when the labels are long.
 */
.hub-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.hub-hizmetler {
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.hub-liste {
	display: grid;
	margin-top: 1.5rem;
	border-top: 1px solid var(--color-line);
	border-left: 1px solid var(--color-line);
}

@media (min-width: 800px) {
	.hub-liste {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.hub-liste {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
 * One definition. This was two — a border rule up here and the layout three
 * hundred lines down — which is the third time that pattern has produced a
 * visible defect on this site. Borders sit on the item rather than showing a
 * container background through the gaps, so a partial last row leaves empty
 * space instead of a grey block.
 */
.hub-oge {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0 0 1.875rem;
	border-right: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	background-color: var(--color-surface);
	text-decoration: none;
	overflow: hidden;
}

/*
 * The corner has to be the card's minus its border.
 *
 * A rounded card with `overflow: hidden` clips its children at the padding
 * box, which is one border-width inside the curve the border draws. Leave the
 * picture square and that difference shows as a sliver of card colour inside
 * each top corner — the border and the photograph curving on two slightly
 * different arcs.
 */
.hub-oge-gorsel {
	display: block;
	border-radius: calc(var(--akim-radius-yumusak) - 1px) calc(var(--akim-radius-yumusak) - 1px) 0 0;
	aspect-ratio: 16 / 9;
	margin-bottom: 1.25rem;
	background-color: var(--color-surface-alt);
	overflow: hidden;
}

.hub-oge-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	filter: saturate(0.96) contrast(1.03);
	transition:
		transform var(--akim-hiz-panel) var(--akim-egri),
		filter var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

.hub-oge:hover .hub-oge-gorsel img,
.hub-oge:focus-visible .hub-oge-gorsel img {
	transform: scale(1.04);
	filter: saturate(1.08) contrast(1.05);
}

/* The text block keeps its own inset now that the picture is full-bleed. */
.hub-oge > :not(.hub-oge-gorsel) {
	margin-inline: 1.625rem;
}

.hub-oge > .hub-no {
	margin-top: 0.25rem;
}

/* Cards with no picture still need the top inset the image used to provide. */
.hub-oge > .hub-no:first-child {
	margin-top: 1.75rem;
}

.hub-ad {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.hub-not {
	font-size: 0.875rem;
	color: var(--color-muted);
}

.hub-sure {
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: 0.65625rem;
}

/* --- Directory ---------------------------------------------------- */

.dizin-bolum {
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid var(--color-line);
}

.dizin-basi {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.dizin-basi .bolum-no {
	margin-bottom: 0;
}

.dizin-h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
}

.dizin-h2 a {
	text-decoration: none;
}

.dizin-h2 a:hover,
.dizin-h2 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.dizin-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem 2rem;
}

@media (min-width: 700px) {
	.dizin-liste {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.dizin-liste {
		grid-template-columns: repeat(3, 1fr);
	}
}

.dizin-liste a {
	display: inline-block;
	padding-block: 0.25rem;
	color: var(--color-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.dizin-liste a:hover,
.dizin-liste a:focus-visible {
	color: var(--color-ink);
	border-bottom-color: var(--color-ink);
}

/* Editor-only marker for unconfirmed facts left in published copy. */
.bekliyor-isaret {
	background-color: #fff3c4;
	color: var(--color-ink);
	padding: 0.0625rem 0.25rem;
	font-family: var(--akim-mono);
	font-size: 0.8125em;
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

/*
 * The starting state exists only when motion.js has marked the root, so a
 * visitor without JavaScript — or with reduced motion — never meets a hidden
 * element. Transform and opacity only; 12px of settle, nothing more
 * (MOTION.md).
 */

.akim-motion [data-akim-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.akim-motion [data-akim-reveal].akim-gorunur {
	opacity: 1;
	transform: none;
}

/*
 * Service lead image — a technical plate, not a hero.
 *
 * The top margin is not spacing for its own sake: the page header above ends
 * in a full-width rule, and with no gap that rule landed on the same pixel as
 * the plate's top edge. A 28px corner radius then let the line pass behind the
 * rounded corners, which reads as two elements colliding rather than as a
 * divider — because that is what it was.
 *
 * One definition. The radius used to live three hundred lines further down, in
 * the rounded-surfaces block, which is the fourth component on this sheet to
 * have been written in two places.
 */
.hizmet-gorsel {
	max-width: 1040px;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: 0 1.5rem;
}

.hizmet-gorsel img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	filter: saturate(0.96) contrast(1.03);
	border: 1px solid var(--color-line);
}

@media (min-width: 768px) {
	.hizmet-gorsel {
		padding: 0 2rem;
	}
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.section-hero-akim {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--akim-sahne);
}

/* Ghosted wordmark, oversized, sitting behind everything. */
.hero-wordmark {
	position: absolute;
	top: clamp(1rem, 4vw, 3.5rem);
	left: -0.06em;
	z-index: -2;
	font-size: clamp(6rem, 17.5vw, 17rem);
	font-weight: 800;
	letter-spacing: -0.055em;
	line-height: 0.9;
	color: #0b0d0f;
	opacity: 0.045;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
}

.hero-wordmark i {
	font-style: normal;
}

/* Photograph bleeding off the right edge. */
.hero-gorsel {
	position: absolute;
	inset: 0 0 0 auto;
	z-index: -1;
	width: 52%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}

.hero-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}

/*
 * A light scrim over the left half of the photograph. Without it the
 * headline sits on top of a busy cabinet shot and neither reads.
 */
.hero-gorsel::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		#f7f9fa 0%,
		rgb(247 249 250 / 0.86) 26%,
		rgb(247 249 250 / 0.34) 56%,
		rgb(247 249 250 / 0) 82%
	);
}

/* Vertical scroll cue in the left gutter. */
.hero-kaydir {
	position: absolute;
	left: clamp(0.5rem, 1.4vw, 1rem);
	bottom: 2rem;
	writing-mode: vertical-rl;
	font-family: var(--akim-mono);
	font-size: 0.625rem;
	letter-spacing: 0.22em;
	color: var(--color-muted);
	user-select: none;
}

.hero-kaydir::after {
	content: "";
	display: block;
	width: 1px;
	height: 3.5rem;
	margin: 0.875rem auto 0;
	background: linear-gradient(180deg, var(--color-muted), transparent);
}

.hero-akim-ic {
	position: relative;
	padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3.5rem, 7vw, 6rem);
	max-width: 1360px;
}

/* Lime pill eyebrow. */
.hero-rozet {
	display: inline-block;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	padding: 0.6875rem 1.375rem;
	border-radius: var(--akim-radius-hap);
	background-color: var(--akim-signal);
	color: #10151f;
	font-family: var(--akim-mono);
	font-size: 0.71875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Mixed-weight headline: light body, heavy on the words that sell. */
.hero-baslik {
	max-width: 15ch;
	font-size: clamp(2.5rem, 6.2vw, 5.25rem);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: var(--akim-lh-display);
	color: var(--color-primary);
	text-wrap: balance;
}

.hero-baslik strong {
	font-weight: 800;
	box-shadow: none;
}

.hero-akim-lede {
	max-width: 42ch;
	margin-top: clamp(1.5rem, 2.5vw, 2rem);
	font-size: clamp(1rem, 1.25vw, 1.125rem);
	line-height: 1.62;
	color: var(--color-muted);
}

.hero-akim-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Bottom rail: underlined quick links, the way the reference does it. */
.hero-alt {
	position: relative;
	border-top: 1px solid var(--color-line);
	background-color: rgb(255 255 255 / 0.72);
	backdrop-filter: blur(6px);
}

.hero-alt-ic {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	padding-block: 1.375rem;
}

.hero-alt-oge {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.hero-alt-oge b {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-primary);
	border-bottom: 2px solid var(--akim-signal);
	padding-bottom: 0.25rem;
	align-self: flex-start;
}

.hero-alt-oge span {
	font-size: 0.8125rem;
	color: var(--color-muted);
}

@media (max-width: 1399px) {
	.hero-kaydir {
		display: none;
	}
}

@media (max-width: 1099px) {
	.hero-gorsel {
		width: 100%;
		opacity: 0.16;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.hero-kaydir {
		display: none;
	}
}

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

.btn-hap {
	border-radius: var(--akim-radius-hap);
	padding-inline: 1.75rem;
	height: 3.25rem;
	font-size: 0.9375rem;
}

.btn-cizgili {
	border: 1px solid #c9cfd6;
	background-color: rgb(255 255 255 / 0.8);
	color: var(--color-primary);
}

.btn-cizgili:hover,
.btn-cizgili:focus-visible {
	border-color: var(--color-primary);
	background-color: #fff;
}

/* WhatsApp gets the primary weight on this site (CONVERSION.md). */
.btn-wa {
	background-color: var(--akim-wa);
	color: #fff;
	border-radius: var(--akim-radius-hap);
}

.btn-wa:hover,
.btn-wa:focus-visible {
	background-color: var(--akim-wa-hover);
}

/* ------------------------------------------------------------------ */
/* Editorial body copy                                                 */
/* ------------------------------------------------------------------ */

/*
 * Long technical copy needs rhythm, not just legibility. The lead paragraph
 * carries weight, headings are announced by a rule and a counter, and lists
 * are set as a specification rather than as default bullets.
 */

.hizmet-icerik {
	counter-reset: akim-bolum;
	font-size: 1.0625rem;
	line-height: 1.72;
}

/* Lead: the opening paragraph is set larger and darker. */
.hizmet-icerik > p:first-of-type {
	font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
	line-height: 1.55;
	letter-spacing: -0.011em;
	color: var(--color-ink);
}

.hizmet-icerik > p:first-of-type::first-letter {
	font-weight: 700;
}

.hizmet-icerik p + p {
	margin-top: 1.125rem;
}

/* Headings: hairline, counter, then the title. */
.hizmet-icerik h2 {
	counter-increment: akim-bolum;
	position: relative;
	margin-top: 3.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--color-line);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.hizmet-icerik h2::before {
	content: counter( akim-bolum, decimal-leading-zero );
	display: block;
	margin-bottom: 0.625rem;
	font-family: var(--akim-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: var(--color-muted);
}

.hizmet-icerik h2 + p,
.hizmet-icerik h2 + ul,
.hizmet-icerik h2 + ol {
	margin-top: 1.125rem;
}

/* Lists read as a specification: hairline rows, technical markers. */
.hizmet-icerik ul {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	border-top: 1px solid var(--color-line);
}

.hizmet-icerik ul > li {
	position: relative;
	padding: 0.75rem 0 0.75rem 1.75rem;
	border-bottom: 1px solid var(--color-line);
}

.hizmet-icerik ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.3em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--akim-signal-koyu);
}

/* Ordered steps: large mono numerals in the margin. */
.hizmet-icerik ol {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	counter-reset: akim-adim;
}

.hizmet-icerik ol > li {
	counter-increment: akim-adim;
	position: relative;
	padding: 0 0 1.125rem 3rem;
}

.hizmet-icerik ol > li::before {
	content: counter( akim-adim, decimal-leading-zero );
	position: absolute;
	left: 0;
	top: 0.15em;
	font-family: var(--akim-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-ink);
}

.hizmet-icerik ol > li::after {
	content: "";
	position: absolute;
	left: 0.55rem;
	top: 1.9em;
	bottom: 0.25rem;
	width: 1px;
	background-color: var(--color-line);
}

.hizmet-icerik ol > li:last-child::after {
	display: none;
}

.hizmet-icerik strong {
	font-weight: 700;
	color: var(--color-ink);
	box-shadow: inset 0 -0.42em 0 rgb(208 254 145 / 0.55);
}

/* ------------------------------------------------------------------ */
/* Section depth                                                       */
/* ------------------------------------------------------------------ */

/*
 * Alternating surfaces plus a hairline give the page a spine. Without this
 * every section floats on the same white and the page reads as one long
 * document.
 */

.section-surec {
	background-color: var(--color-surface-alt);
}

.surec-adim {
	border-top-color: var(--color-line);
}

.surec-ad {
	color: var(--color-primary);
}

.surec-no {
	color: var(--color-primary);
	opacity: 0.55;
}

.section-isler {
	background-color: var(--color-surface);
}

/* A measurement tick where sections meet. */
.section-surec,
.section-isler,
.section-yetkinlik {
	position: relative;
}

.section-isler::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	width: 1px;
	height: 1.75rem;
	background-color: var(--color-line);
}


/* ------------------------------------------------------------------ */
/* Service side rail                                                   */
/* ------------------------------------------------------------------ */

.hizmet-govde {
	display: grid;
	gap: 3rem;
}

@media (min-width: 1100px) {
	.hizmet-govde {
		grid-template-columns: minmax(0, 1fr) 17rem;
		gap: 4.5rem;
		align-items: start;
	}
}

.hizmet-icerik {
	max-width: 66ch;
}

.hizmet-raf {
	display: none;
}

@media (min-width: 1100px) {
	.hizmet-raf {
		display: block;
	}
}

.raf-ic {
	position: sticky;
	top: 2.5rem;
	display: grid;
	gap: 1.75rem;
}

.raf-gezinme .teknik-etiket {
	display: block;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-line);
}

.raf-gezinme ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: raf;
}

.raf-gezinme li {
	counter-increment: raf;
	border-bottom: 1px solid var(--color-line);
}

.raf-gezinme a {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: 0.25rem;
	padding: 0.6875rem 0;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--color-muted);
	text-decoration: none;
	transition: color 150ms ease;
}

.raf-gezinme a::before {
	content: counter( raf, decimal-leading-zero );
	font-family: var(--akim-mono);
	font-size: 0.625rem;
	letter-spacing: 0.08em;
	padding-top: 0.2em;
}

.raf-gezinme a:hover,
.raf-gezinme a:focus-visible {
	color: var(--color-ink);
}

.raf-kart {
	padding: 1.5rem 1.5rem 1.625rem;
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-primary);
	color: #fff;
}

.raf-kart-baslik {
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.raf-kart-not {
	margin: 0.375rem 0 1.125rem;
	font-size: 0.84375rem;
	color: rgb(255 255 255 / 0.76);
	line-height: 1.5;
}

.raf-btn {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 0.5rem;
}

.raf-kart .btn-outline {
	border-color: rgb(255 255 255 / 0.32);
	color: #fff;
	font-size: 0.875rem;
}

.raf-kart .btn-outline .cta-number {
	font-size: 0.8125rem;
}

/* Anchor targets clear the sticky header. */
.hizmet-icerik h2[id] {
	scroll-margin-top: 2rem;
}

/* ------------------------------------------------------------------ */
/* From the field                                                      */
/* ------------------------------------------------------------------ */

.section-sahadan {
	padding-block: clamp(4rem, 8vw, 6rem);
	border-bottom: 1px solid var(--color-line);
	background-color: var(--color-surface);
}

.sahadan-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 760px) {
	.sahadan-grid {
		grid-template-columns: repeat(6, 1fr);
	}

	/* Deliberately uneven: two wide plates, two narrow. */
	.saha-plaka:nth-child(1) {
		grid-column: span 4;
	}

	.saha-plaka:nth-child(2) {
		grid-column: span 2;
	}

	.saha-plaka:nth-child(3) {
		grid-column: span 2;
	}

	.saha-plaka:nth-child(4) {
		grid-column: span 4;
	}
}

.saha-plaka {
	position: relative;
	margin: 0;
	overflow: hidden;
	background-color: var(--akim-deep);
	isolation: isolate;
}

.saha-gorsel {
	display: block;
}

.saha-gorsel img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	filter: saturate(0.94) contrast(1.02) brightness(1.03);
	transform: scale(1.02);
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease;
}

.saha-plaka figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3.5rem 1.375rem 1.375rem;
	color: var(--akim-on-deep);
	background: linear-gradient(180deg, rgb(14 17 19 / 0) 0%, rgb(14 17 19 / 0.88) 62%);
}

.saha-no {
	display: block;
	color: var(--akim-signal);
	margin-bottom: 0.375rem;
}

.saha-baslik {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.saha-not {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: #b9c1c8;
}

@media (pointer: fine) {
	.saha-plaka:hover .saha-gorsel img {
		transform: scale(1.06);
		filter: saturate(1.05) contrast(1.05) brightness(0.9);
	}
}

/* ------------------------------------------------------------------ */
/* Dark chrome                                                         */
/* ------------------------------------------------------------------ */

/*
 * The header runs dark site-wide so it belongs to the hero instead of
 * sitting on top of it as a white band, and so every page opens with the
 * same frame.
 */

/*
 * The header is a frame, not a strip of links: a lime rule across the very
 * top, the logo on the left, and the actions grouped inside one white card on
 * the right. The menu is a panel at every width — there is no inline desktop
 * nav — which is what keeps the top of the page quiet enough for the logo to
 * carry it.
 *
 * Nothing here changes state instantly. Every hover, every open, every close
 * runs on the shared motion scale in tokens.css.
 */

/*
 * The lime rule is drawn by the header, not placed above it.
 *
 * It used to be a sibling element, which was fine while the header sat still
 * and impossible once it sticks: a sticky element carries its own pseudo
 * elements and leaves its siblings behind. Same mark, one less node.
 */
.header-serit {
	display: none;
}

/*
 * A floating bar, not a band across the top.
 *
 * The old header was a tinted strip the full width of the window with the
 * controls parcelled into a grey pane on the right. It read as chrome — a
 * browser toolbar the site happened to draw — and the pane put a box around
 * the one thing on the page a visitor is meant to press.
 *
 * This is the counterpart of the footer: the lime rule runs edge to edge at the
 * very top of the document and again at the very top of the footer, so the page
 * is bracketed by the same mark. Between them the bar itself floats inside the
 * container on the page surface, with the same radius the cards use.
 *
 * Sticky from 768px. Below that the fixed bottom bar already keeps WhatsApp and
 * the phone within a thumb, and two permanent strips on a phone is one too
 * many; above it there is no bar, and the pages people read here are two
 * thousand words about a burning smell.
 */

.site-header {
	position: relative;
	z-index: 50;
	background-color: transparent;
	border-bottom: 0;
	transition: background-color var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

/* The accent. Full bleed, and the footer answers it. */
.site-header::before {
	content: "";
	display: block;
	height: 4px;
	background-color: var(--akim-signal);
}

.site-header > .container-site {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-top: clamp(0.625rem, 1.4vw, 1rem);
	padding-block: clamp(0.625rem, 1.2vw, 0.875rem);
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-surface);
	box-shadow: 0 1px 2px rgb(31 33 42 / 0.04), 0 8px 24px -12px rgb(31 33 42 / 0.16);
	transition:
		margin-top var(--akim-hiz-orta) var(--akim-egri),
		padding-block var(--akim-hiz-orta) var(--akim-egri),
		box-shadow var(--akim-hiz-orta) var(--akim-egri-yumusak),
		background-color var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

@media (min-width: 768px) {
	.site-header {
		position: sticky;
		top: 0;
	}

	/*
	 * Stuck, the header still owns no colour: the bar floats and the page runs
	 * behind it. An earlier version tinted the strip so nothing showed through
	 * the gaps, which put a grey band back across the top — the exact thing
	 * this design removed. The bar goes fully opaque instead and carries a
	 * deeper shadow, so it reads as lifted off the page rather than set into a
	 * band.
	 */
	.site-header.is-yapisik > .container-site {
		margin-top: 0.5rem;
		padding-block: 0.5rem;
		background-color: var(--color-surface);
		box-shadow: 0 1px 2px rgb(31 33 42 / 0.06), 0 14px 32px -14px rgb(31 33 42 / 0.3);
	}
}

/* --- Logo ---------------------------------------------------------- */

.site-header .site-branding {
	display: flex;
	align-items: center;
}

.site-header .custom-logo-link {
	display: block;
	line-height: 0;
	transition: opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.site-header .custom-logo-link:hover {
	opacity: 0.78;
}

/*
 * Sized by width, not height: the mark is a horizontal lockup, so a height
 * rule would leave it either tiny or overflowing at the extremes. The explicit
 * ratio keeps the header from reflowing before the file decodes.
 *
 * The ratio is the asset's own 706:282, not the 728:288 that used to be here —
 * a 1% mismatch that stretched the mark by a hair on every page.
 *
 * These widths are also written in inc/logo.php, which turns them into the
 * srcset `sizes` attribute. Change one and change the other: they are one
 * decision, and when they disagree the browser downloads the wrong file.
 */
.site-header .custom-logo {
	width: clamp(8.75rem, 12vw, 11.25rem);
	height: auto;
	aspect-ratio: 706 / 282;
}

/* Text fallback when no logo is set. */
.site-header .site-title {
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.04em;
	line-height: 1.02;
}

.site-header .site-title a {
	display: block;
	max-width: 6ch;
	color: var(--color-primary);
	text-decoration: none;
}

/* --- Actions: one card, not three loose controls ------------------- */

/*
 * No card.
 *
 * The actions used to sit inside a translucent grey pane, copied from a
 * reference that had three controls to group. On a phone that pane wrapped a
 * single menu button, which is a container around nothing; on a desktop it put
 * a box around the one thing on the page a visitor is meant to press. The
 * controls sit on the surface now and the hierarchy does the grouping: one
 * filled button, one quiet link, one outlined control.
 */
.site-header .header-actions {
	margin-left: auto;
	gap: clamp(0.5rem, 1.2vw, 1rem);
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

.header-eylem {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.header-wa {
	display: none;
	height: 2.75rem;
	align-items: center;
	padding: 0 1.125rem;
	border-radius: var(--akim-radius-kontrol);
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

/*
 * 768px, not 700: the fixed bottom bar hides at 768, and between 700 and 768
 * the old rule put a second WhatsApp button on screen while the first was
 * still there.
 */
@media (min-width: 768px) {
	.header-wa {
		display: inline-flex;
	}
}

.header-tel {
	display: none;
	align-items: center;
	gap: 0.5rem;
	height: 2.75rem;
	padding: 0 0.875rem;
	border-radius: var(--akim-radius-kontrol);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.header-tel:hover,
.header-tel:focus-visible {
	background-color: var(--color-surface-alt);
}

/*
 * From the same breakpoint. Hiding the phone number until 1100px meant a
 * tablet visitor on an electrician's site could not see it at all — and this
 * is the one number the whole site exists to hand over.
 */
@media (min-width: 768px) {
	.header-tel {
		display: inline-flex;
	}
}

/* --- Toggle: one control, not a word beside a box ------------------ */

/*
 * The old toggle was the label "MENÜ" sitting next to a separately boxed icon:
 * two elements saying the same thing, and on the new bar the box lost its
 * ground and read as a stray hamburger. It is one outlined pill now, which
 * gives the right-hand side three shapes a reader can tell apart at a glance —
 * filled for the action, plain for the number, outlined for navigation.
 *
 * The label comes from custom properties written by inc/header-chrome.php so
 * it stays translatable; a hard-coded `content` string would not be.
 */
.site-header .nav-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.5rem 0.875rem 0.5rem 1rem;
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-hap);
	background-color: transparent;
	color: var(--color-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition:
		border-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.site-header .nav-toggle::after {
	content: var(--akim-menu-ac, "MENÜ");
	order: -1;
}

.site-header .nav-toggle[aria-expanded="true"]::after {
	content: var(--akim-menu-kapat, "KAPAT");
}

.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus-visible {
	border-color: var(--color-primary);
	background-color: var(--akim-signal);
}

.site-header .nav-toggle[aria-expanded="true"] {
	border-color: var(--color-primary);
	background-color: var(--akim-signal);
}

/*
 * The icon is drawn, not boxed. A mask on the button itself cannot work —
 * masking clips the border and background with it — so the bars and the cross
 * are two layers that cross-fade.
 */
.site-header .nav-toggle .nav-toggle-icon {
	box-sizing: content-box;
	width: 1rem;
	height: 1rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: currentColor;
	overflow: visible;
	transition: transform var(--akim-hiz-panel) var(--akim-egri);
}

.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon {
	transform: rotate(90deg);
}

.site-header .nav-toggle .nav-toggle-icon path {
	transition: opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

/* --- Menu panel ---------------------------------------------------- */

/*
 * A card that hangs below the toggle at every width.
 *
 * The parent toggles display:none <-> block, which cannot be tweened — the
 * panel appeared instantly. These rules keep it displayed at all times and
 * animate opacity and transform instead; visibility is what actually removes
 * it from the tab order, delayed until the close animation has finished.
 */
.site-header .site-nav {
	display: block;
	position: absolute;
	top: calc(100% + 0.625rem);
	right: clamp(0.75rem, 3vw, 2.5rem);
	left: auto;
	width: min(29rem, calc(100vw - 1.5rem));
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	border-radius: 1.25rem;
	background-color: var(--color-surface);
	box-shadow: 0 30px 70px -26px rgb(31 33 42 / 0.34);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-0.75rem) scale(0.97);
	transform-origin: 88% 0;
	transition:
		opacity var(--akim-hiz-orta) var(--akim-egri-yumusak),
		transform var(--akim-hiz-panel) var(--akim-egri),
		visibility 0s linear var(--akim-hiz-panel);
}

.site-header .site-nav.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
	transition:
		opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		transform var(--akim-hiz-panel) var(--akim-egri),
		visibility 0s;
}

.site-header .site-nav .menu {
	display: block;
	padding: 0.75rem;
	margin: 0;
	list-style: none;
}

.site-header .site-nav .menu a {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: var(--akim-radius-yumusak);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--color-primary);
	text-decoration: none;
	/*
	 * transform, not padding: the panel scrolls, so animating padding made
	 * every hover re-lay-out the whole list.
	 */
	transition:
		background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		transform var(--akim-hiz-orta) var(--akim-egri);
}

.site-header .site-nav .menu a:hover,
.site-header .site-nav .menu a:focus-visible,
.site-header .site-nav .current-menu-item > a,
.site-header .site-nav .current_page_item > a {
	background-color: var(--color-surface-alt);
}

.site-header .site-nav .menu a:hover,
.site-header .site-nav .menu a:focus-visible {
	transform: translateX(0.375rem);
}

/* The parent reserves 2rem for a disclosure button this panel hides. */
.site-header .site-nav .menu-item-has-children > a {
	padding-right: 1rem;
}

/*
 * Items arrive one after another rather than all at once. The delay is small
 * enough that the whole list is in place well inside the panel animation.
 */
.site-header .site-nav .menu > li {
	opacity: 0;
	transform: translateY(0.375rem);
	transition:
		opacity var(--akim-hiz-orta) var(--akim-egri-yumusak),
		transform var(--akim-hiz-orta) var(--akim-egri);
}

.site-header .site-nav.is-open .menu > li {
	opacity: 1;
	transform: none;
}

.site-header .site-nav.is-open .menu > li:nth-child(1) { transition-delay: 60ms; }
.site-header .site-nav.is-open .menu > li:nth-child(2) { transition-delay: 100ms; }
.site-header .site-nav.is-open .menu > li:nth-child(3) { transition-delay: 140ms; }
.site-header .site-nav.is-open .menu > li:nth-child(4) { transition-delay: 180ms; }
.site-header .site-nav.is-open .menu > li:nth-child(n+5) { transition-delay: 220ms; }

/*
 * Sub-menus stay open in the panel. The disclosure exists for a cramped
 * mobile dropdown; this panel has the room, and the six category hubs are
 * the only site-wide path into the service silo (IA.md) — hiding them behind
 * a tap costs both navigation and internal linking.
 */
.site-header .site-nav .sub-menu,
.site-header .site-nav .menu-item-has-children > .sub-menu {
	display: block;
	position: static;
	width: auto;
	border: 0;
	box-shadow: none;
	padding: 0 0 0.25rem 0.75rem;
	margin: 0;
	list-style: none;
}

.site-header .site-nav .sub-menu a {
	padding-block: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-muted);
}

.site-header .site-nav .sub-menu a:hover,
.site-header .site-nav .sub-menu a:focus-visible {
	color: var(--color-primary);
}

.site-header .site-nav .submenu-toggle {
	display: none;
}

@media (min-width: 768px) {
	.site-header .site-nav,
	.site-header .site-nav.is-open {
		position: absolute;
		display: block;
		background-color: var(--color-surface);
		border: 0;
		box-shadow: 0 30px 70px -26px rgb(31 33 42 / 0.34);
	}
}

/* Without JS the panel cannot open, so it renders inline instead. */
html.no-js .site-header .site-nav,
html.no-js .site-header .site-nav.is-open {
	position: static;
	display: block;
	width: auto;
	max-height: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
}

html.no-js .site-header .site-nav .menu > li {
	opacity: 1;
	transform: none;
}

html.no-js .site-header .nav-toggle {
	display: none;
}

.skip-link:focus {
	background-color: var(--akim-signal);
	color: var(--color-ink);
}


/* ------------------------------------------------------------------ */
/* Rounded surfaces                                                    */
/* ------------------------------------------------------------------ */

.yetkinlik,
.saha-plaka,
.hub-oge,
.pafta,
.raf-kart,
.is-plaka {
	border-radius: var(--akim-radius-yumusak);
}

.hub-liste,
.yetkinlik-grid {
	border: 0;
}

.hub-oge {
	border: 1px solid var(--color-line);
}

.hub-liste {
	gap: 1rem;
}

.btn {
	border-radius: var(--akim-radius-hap);
}

.mobil-cta-inner > a:first-child {
	border-top-left-radius: 0;
}

/* --- Footer --------------------------------------------------------
 *
 * A tinted closing surface with the same ghosted wordmark as the hero, so
 * the page opens and closes on the same mark. Columns collapse to one on
 * mobile in source order: brand, categories, services, contact.
 */

/*
 * The navy close.
 *
 * The footer used to be pale grey on a pale grey page: five columns of links
 * that read as the page continuing rather than ending. A document needs a
 * bottom edge, and on a site whose whole language is a light stage with deep
 * navy in it, the bottom edge is the navy.
 *
 * It answers the header exactly: the same lime rule runs across the top of
 * both, so the page is bracketed by one mark. Contrast on this ground was
 * measured, not assumed — white 11.6:1, lime 10.1:1, the muted link colour
 * 5.4:1, all past AA. The bright WhatsApp green is 3.8:1 against navy and
 * therefore takes dark ink rather than white, which the token file already
 * records at 5.5:1.
 */
.site-footer {
	position: relative;
	/* The parent pads the top; the accent has to be the first thing in the block. */
	padding-top: 0;
	margin-top: clamp(3rem, 7vw, 5rem);
	background-color: var(--color-primary);
	color: #fff;
}

.site-footer::before {
	content: "";
	display: block;
	height: 4px;
	background-color: var(--akim-signal);
}

.footer-ust {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}

@media (min-width: 720px) {
	.footer-ust {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

@media (min-width: 1080px) {
	.footer-ust {
		grid-template-columns: 1.5fr repeat(4, 1fr);
	}
}

/* The mark sizes like the header's, one step smaller. */
.footer-logo {
	display: inline-block;
	line-height: 0;
	transition: opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.footer-logo:hover,
.footer-logo:focus-visible {
	opacity: 0.8;
}

.footer-logo img {
	width: clamp(9.5rem, 14vw, 11.875rem);
	height: auto;
	aspect-ratio: 706 / 282;
}

.footer-wordmark {
	display: block;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.04em;
	line-height: 1;
	color: #fff;
}

.footer-wordmark i {
	font-style: normal;
	font-weight: 500;
	color: var(--akim-signal);
}

.footer-slogan {
	margin: 1rem 0 0;
	max-width: 34ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #c3cad8;
}

.footer-eylem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.75rem;
}

/* White on the dark green is 5.0:1; on navy the button needs its own ground. */
.site-footer .btn-wa {
	background-color: var(--akim-wa-parlak);
	color: var(--akim-wa-parlak-ink);
}

.site-footer .btn-wa:hover,
.site-footer .btn-wa:focus-visible {
	background-color: #33bd6f;
	color: var(--akim-wa-parlak-ink);
}

.site-footer .btn-cizgili,
.site-footer .btn-outline {
	border-color: rgb(255 255 255 / 0.35);
	color: #fff;
	background-color: transparent;
}

.site-footer .btn-cizgili:hover,
.site-footer .btn-outline:hover,
.site-footer .btn-cizgili:focus-visible,
.site-footer .btn-outline:focus-visible {
	border-color: var(--akim-signal);
	color: var(--akim-signal);
	background-color: rgb(255 255 255 / 0.06);
}

.footer-baslik {
	margin: 0 0 1rem;
	font-family: var(--akim-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--akim-signal);
}

.footer-liste {
	display: grid;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-liste a {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: #a8b2c4;
	text-decoration: none;
	transition: color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.footer-liste a:hover,
.footer-liste a:focus-visible {
	color: #fff;
}

.footer-iletisim a {
	color: #fff;
	font-weight: 600;
}

.footer-iletisim a:hover,
.footer-iletisim a:focus-visible {
	color: var(--akim-signal);
}

.footer-alan {
	font-size: 0.9375rem;
	color: #a8b2c4;
}

/*
 * The bottom line. On navy the divider cannot be --color-line, which was drawn
 * for a white page and disappears here; it is white at low alpha instead.
 */
.site-footer .site-info,
.site-footer .footer-copyright {
	padding-block: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	font-size: 0.8125rem;
	color: #9EA9BE;
}

/*
 * The parent renders talim/footer/content above a centred bottom row
 * (.footer-alt) that holds the nav and copyright. Only the bottom row needs
 * re-aligning here; the columns above own their own layout. Requires Talim
 * ≥ 2.4.0 — before that the hook output was trapped in the centred container.
 */

.site-footer > .container-site {
	padding-block: 0;
}

.site-footer .footer-alt {
	align-items: stretch;
	gap: 0.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	text-align: left;
}

.site-footer .footer-menu {
	justify-content: flex-start;
}

.site-footer .footer-menu a {
	font-size: 0.875rem;
	color: #a8b2c4;
	text-decoration: none;
	transition: color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.site-footer .footer-menu a:hover,
.site-footer .footer-menu a:focus-visible {
	color: var(--akim-signal);
}

.site-footer .site-info {
	padding-bottom: 1.75rem;
	border-top: 0;
}

/* ------------------------------------------------------------------ */
/* Rounded surfaces                                                    */
/* ------------------------------------------------------------------ */

/*
 * The reference language rounds every surface: plates, photographs, cards
 * and accordions all share --akim-radius-yumusak, actions are pills. Kept in
 * one block so the shape stays consistent as components are added.
 */

.pafta,
.hizmet-gorsel,
.hizmet-gorsel img,
.olcek-oge,
.ilce-kart,
.dizin-oge {
	border-radius: var(--akim-radius-yumusak);
	overflow: hidden;
}

.pafta-baslik {
	border-radius: var(--akim-radius-yumusak) var(--akim-radius-yumusak) 0 0;
}

/* The category photograph under the hub header. */
.hub-gorsel {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	border-radius: var(--akim-radius-genis);
	overflow: hidden;
	aspect-ratio: 21 / 8;
	background-color: var(--color-surface-alt);
}

.hub-gorsel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Cooled to match the capability plates it continues from. */
	filter: saturate(0.96) contrast(1.03);
}

@media (max-width: 699px) {
	.hub-gorsel {
		aspect-ratio: 3 / 2;
	}
}

/* Hub service cards adopt the rounded surface language. */
.hub-oge {
	border-radius: var(--akim-radius-yumusak);
	transition:
		background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		border-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		transform var(--akim-hiz-orta) var(--akim-egri);
}

.hub-oge:hover,
.hub-oge:focus-visible {
	border-color: var(--color-primary);
	background-color: var(--color-surface-alt);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------ */
/* Service-area pages                                                  */
/* ------------------------------------------------------------------ */

.bolge-tipik {
	margin: 0;
	padding: 0.75rem 1.375rem 1.125rem;
	list-style: none;
}

.bolge-tipik li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.125rem;
	border-bottom: 1px dashed var(--color-line);
	font-size: 0.90625rem;
	line-height: 1.5;
}

.bolge-tipik li:last-child {
	border-bottom: 0;
}

.bolge-tipik li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1em;
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 50%;
	background-color: var(--akim-signal-koyu);
}

.bolge-hizmetler,
.bolge-mahalleler {
	padding-block: clamp(3rem, 6vw, 5rem);
	border-top: 1px solid var(--color-line);
}

.bolge-mahalleler {
	background-color: var(--color-surface-alt);
}

/*
 * Neighbourhoods are a reference list, not navigation: no links, small type,
 * dense columns. Linking each one would create dozens of near-empty pages —
 * exactly the doorway pattern the district pages exist to avoid.
 */
.mahalle-listesi {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 2rem;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.mahalle-listesi li {
	break-inside: avoid;
	padding-block: 0.3125rem;
}

@media (min-width: 700px) {
	.mahalle-listesi {
		columns: 4;
	}
}

/* ------------------------------------------------------------------ */
/* Corporate pages                                                     */
/* ------------------------------------------------------------------ */

/*
 * The parent renders a static page as title + content in a narrow column,
 * which is right for a generic theme and reads as unfinished next to the
 * service and hub pages here. These rules give a page the same opening as
 * the rest of the site without overriding page.php.
 */

.page .entry-header {
	padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 3vw, 2.75rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid var(--color-line);
}

.page .entry-title {
	font-size: clamp(2.25rem, 5.4vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: var(--akim-lh-display);
	color: var(--color-primary);
	text-wrap: balance;
}

.page .entry-content > h2 {
	margin-top: clamp(2.5rem, 5vw, 3.75rem);
	margin-bottom: 0.875rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.18;
	color: var(--color-primary);
}

.page .entry-content > h3 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--color-ink);
}

.page .entry-content > p {
	margin-bottom: 1.125rem;
}

.page .entry-content > ul {
	margin: 1.25rem 0;
	padding: 0;
	list-style: none;
}

.page .entry-content > ul > li {
	position: relative;
	padding: 0.4375rem 0 0.4375rem 1.375rem;
	line-height: 1.6;
}

.page .entry-content > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--akim-signal-koyu);
}

/* Editors see pending markers highlighted; visitors never reach this rule. */
.bekliyor-isaret {
	background-color: var(--akim-signal);
	color: var(--color-ink);
	padding: 0.125rem 0.375rem;
	border-radius: 0.25rem;
	font-size: 0.875rem;
}

/* ------------------------------------------------------------------ */
/* Motion off — one place                                              */
/* ------------------------------------------------------------------ */

/*
 * The parent's @layer base already clamps every duration to 0.01ms, and for
 * !important the layer order is reversed, so an unlayered rule here cannot
 * override it. The `transition: none` declarations that used to sit in three
 * scattered blocks were dead code that only looked like an off switch.
 *
 * This block targets the two things the parent does not touch:
 *
 *   1. Delays. A clamped duration still leaves an element in its START state
 *      for the length of its delay — up to 240ms of invisibility.
 *   2. Destination states. Kill the transition but leave the hover transform
 *      and the movement does not soften, it jumps in a single frame, which is
 *      worse than the animation. MOTION.md: colour stays, transform goes.
 */
@media (prefers-reduced-motion: reduce) {

	/* --- Menu panel ------------------------------------------------ */

	.site-header .site-nav,
	.site-header .site-nav.is-open {
		transform: none;
		transition-delay: 0s;
	}

	/*
	 * The :nth-child(n) is deliberate: the stagger rules are (0,5,1), so a
	 * plain `.menu > li` at (0,4,1) cannot beat them and the items would sit
	 * invisible for their full delay.
	 */
	.site-header .site-nav .menu > li,
	.site-header .site-nav.is-open .menu > li:nth-child(n) {
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.site-header .site-nav .menu a:hover,
	.site-header .site-nav .menu a:focus-visible {
		transform: none;
	}

	.site-header .nav-toggle[aria-expanded="true"] .nav-toggle-icon {
		transform: none;
	}

	/* --- Scroll reveal: present from the start, in its final place --- */

	.akim-motion [data-akim-reveal] {
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	/* --- Hover depth: colour stays, movement goes ------------------- */

	/* The base scale(1.02) is overflow headroom, so it pins there, not none. */
	.yetkinlik:hover .yetkinlik-gorsel img,
	.yetkinlik:focus-visible .yetkinlik-gorsel img {
		transform: scale(1.02);
	}

	/* Opacity is not a vestibular trigger, so the arrow still brightens. */
	.yetkinlik:hover .yetkinlik-ok,
	.yetkinlik:focus-visible .yetkinlik-ok {
		transform: translateX(-0.375rem);
	}

	.hub-oge:hover,
	.hub-oge:focus-visible,
	.seri-kart:hover,
	.seri-kart:focus-visible {
		transform: none;
	}

	.seri-kart:hover .seri-gorsel img,
	.seri-kart:focus-visible .seri-gorsel img {
		transform: none;
	}

	.seri-kart:hover .seri-ok,
	.seri-kart:focus-visible .seri-ok {
		transform: none;
	}

	.seri-ray {
		scroll-behavior: auto;
	}

	/*
	 * The rotation stays. It is the only visual difference between an open row
	 * and a closed one, so removing it leaves a reader with no state at all —
	 * which is a worse outcome than the movement it was meant to avoid. What
	 * goes is the tween: the glyph arrives rotated instead of turning.
	 */
	.sss-oge summary::after {
		transition: none;
	}

	.sss-oge summary,
	.sss-oge summary:hover,
	.sss-oge summary:focus-visible {
		padding-left: clamp(0.75rem, 2vw, 1.25rem);
		transition: none;
	}

	.sss-oge::details-content,
	.sss-oge[open]::details-content {
		transition: none;
	}

	/* --- Press feedback: colour stays, scale goes ------------------- */

	.mobil-cta-inner > a:active {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* 404                                                                 */
/* ------------------------------------------------------------------ */

.error-404 .page-title {
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: var(--akim-lh-display);
	color: var(--color-primary);
	text-wrap: balance;
}

.bulunamadi-yollar {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
	border-top: 1px solid var(--color-line);
}

.bulunamadi-not {
	margin-top: 1.75rem;
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.bulunamadi-not a {
	color: var(--color-primary);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ */
/* Contact page actions                                                */
/* ------------------------------------------------------------------ */

.iletisim-blok {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
	border-top: 1px solid var(--color-line);
	background-color: var(--color-surface-alt);
}

.iletisim-grid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {
	.iletisim-grid {
		grid-template-columns: 1.35fr 1fr;
		align-items: start;
	}
}

.iletisim-eylem-kart {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: var(--akim-radius-genis);
	background-color: var(--color-surface);
}

.iletisim-not {
	max-width: 46ch;
	margin: 1rem 0 0;
	color: var(--color-muted);
}

.iletisim-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.75rem;
}

.iletisim-satir + .iletisim-satir {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-line);
}

.iletisim-deger {
	display: grid;
	gap: 0.375rem;
	margin-top: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-muted);
}

.iletisim-deger b {
	display: block;
	color: var(--color-ink);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.iletisim-deger a {
	color: var(--color-primary);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ */
/* Emergency page                                                      */
/* ------------------------------------------------------------------ */

/*
 * The action comes before the reading here, not after it. Someone on this
 * page is not browsing — the call button is the page.
 */
.acil-blok {
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border-radius: var(--akim-radius-genis);
	background-color: var(--color-primary);
	color: #fff;
}

.acil-ustbaslik {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--akim-signal);
}

.acil-butonlar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* The call is the primary action and is sized to be unmissable. */
.acil-ara {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 1.75rem;
	border-radius: var(--akim-radius-hap);
	background-color: var(--akim-signal);
	color: var(--color-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak);
}

.acil-ara:hover,
.acil-ara:focus-visible {
	background-color: var(--akim-signal-koyu);
}

.acil-ara .cta-number {
	font-variant-numeric: tabular-nums;
}

/* The block sits inside the_content, where links are underlined by default. */
.acil-blok .btn,
.acil-blok .btn:hover {
	text-decoration: none;
}

.acil-wa {
	background-color: var(--akim-wa-parlak);
	color: var(--akim-wa-parlak-ink);
	font-weight: 700;
}

.acil-not {
	margin: 1.25rem 0 0;
	font-size: 0.875rem;
	color: rgb(255 255 255 / 0.74);
}

/* ------------------------------------------------------------------ */
/* Blog                                                                */
/* ------------------------------------------------------------------ */

.yazi-basi {
	padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.75rem, 3vw, 2.75rem);
	border-bottom: 1px solid var(--color-line);
}

.yazi-h1 {
	max-width: 20ch;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
}

.yazi-ozet {
	max-width: 60ch;
	margin-top: 1.25rem;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.yazi-kunye {
	margin-top: 1.5rem;
	font-family: var(--akim-mono);
	font-size: 0.71875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
}

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

/* Narrower than a service page: this is reading, not reference. */
.yazi-icerik {
	max-width: 68ch;
}

.yazi-icerik > h2 {
	margin-top: clamp(2.25rem, 4vw, 3rem);
	margin-bottom: 0.75rem;
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--color-primary);
}

.yazi-icerik > p {
	margin-bottom: 1.125rem;
}

.yazi-icerik > ul,
.yazi-icerik > ol {
	margin: 1.25rem 0;
	padding-left: 0;
	list-style: none;
}

.yazi-icerik > ul > li,
.yazi-icerik > ol > li {
	position: relative;
	padding: 0.4375rem 0 0.4375rem 1.5rem;
	line-height: 1.6;
}

.yazi-icerik > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.05em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--akim-signal-koyu);
}

.yazi-icerik > ol {
	counter-reset: yazi-adim;
}

.yazi-icerik > ol > li::before {
	counter-increment: yazi-adim;
	content: counter( yazi-adim, decimal-leading-zero );
	position: absolute;
	left: 0;
	top: 0.5em;
	font-family: var(--akim-mono);
	font-size: 0.6875rem;
	color: var(--color-muted);
}

/* The service the post exists to support. */
.yazi-hizmet {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--color-line);
	background-color: var(--color-surface-alt);
}

.yazi-hizmet-kart {
	display: block;
	max-width: 44rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-surface);
	text-decoration: none;
	transition:
		border-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		transform var(--akim-hiz-orta) var(--akim-egri);
}

.yazi-hizmet-kart:hover,
.yazi-hizmet-kart:focus-visible {
	border-color: var(--color-primary);
	transform: translateY(-2px);
}

.yazi-hizmet-ad {
	display: block;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-primary);
}

.yazi-hizmet-not {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-muted);
}

.yazi-hizmet-ok {
	display: block;
	margin-top: 1.125rem;
	color: var(--akim-signal-koyu);
}

/* Category hub body: prose plus the plate of typical situations. */
.hub-anlatim {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--color-line);
}

.hub-anlatim-grid {
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.75rem);
}

@media (min-width: 1000px) {
	.hub-anlatim-grid {
		grid-template-columns: 1.5fr 1fr;
		align-items: start;
	}
}

.hub-metin {
	max-width: 66ch;
}

.hub-metin > p {
	margin-bottom: 1.125rem;
}

/* ------------------------------------------------------------------ */
/* Content widgets                                                     */
/* ------------------------------------------------------------------ */

/*
 * Four blocks an article can drop into its prose: a step slider, a comparison,
 * a strip of measured values, and the card strip defined further up.
 *
 * All four are readable with no JS and with no GSAP. The animation layer only
 * moves things that are already on the page — nothing here starts at opacity 0
 * in CSS, because a reveal that depends on a script is a blank space for
 * everyone the script fails on, including every crawler.
 *
 * They break out of the article measure on purpose: prose sits at 68ch, these
 * take the full container, and the shift is what marks them as a different kind
 * of thing rather than a paragraph with a border.
 */

.akim-widget {
	margin-block: clamp(2.5rem, 5vw, 3.75rem);
}

/*
 * Out of the reading column, but not out of the container.
 *
 * The first version took the container's full width and overflowed it by 24px,
 * because the article column does not start at the container's left edge — it
 * sits a little inside, and how far varies by template. Rather than hard-code
 * that inset, the width leaves a 4rem allowance: wide enough that a comparison
 * gets two real columns, narrow enough that it stays inside the container on
 * every page and every viewport this site renders at, measured.
 */
.entry-content > .akim-widget {
	width: min(58rem, calc(100vw - 2 * clamp(1rem, 5vw, 3rem) - 4rem));
	max-width: none;
}

.widget-basi {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
}

.widget-baslik {
	margin: 0;
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--color-primary);
}

.widget-not {
	flex-shrink: 0;
	font-family: var(--akim-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

/* --- Step slider --------------------------------------------------- */

.adimlar-ray {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(80vw, 20rem);
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/* Same clipping as the card strip: the active step's shadow needs room. */
	padding-block: 4px 0.75rem;
	scrollbar-width: none;
}

.adimlar-ray::-webkit-scrollbar {
	display: none;
}

.adim {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	scroll-snap-align: start;
	padding: 1.5rem 1.5rem 1.75rem;
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-surface);
	transition:
		border-color var(--akim-hiz-orta) var(--akim-egri-yumusak),
		box-shadow var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

/* The step nearest the middle of the track is the one you are reading. */
.adim.is-aktif {
	border-color: var(--color-primary);
	box-shadow: 0 1px 0 var(--color-primary);
}

.adim-no {
	font-family: var(--akim-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--akim-signal-koyu);
}

.adim.is-aktif .adim-no {
	color: var(--color-primary);
}

.adim-ad {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-primary);
}

.adim-metin {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.adimlar-noktalar {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.adim-nokta {
	width: 2rem;
	height: 0.25rem;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background-color: var(--color-line);
	cursor: pointer;
	transition:
		background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		width var(--akim-hiz-orta) var(--akim-egri);
}

.adim-nokta.is-aktif {
	width: 3.25rem;
	background-color: var(--color-primary);
}

/* --- Comparison ---------------------------------------------------- */

.kiyas {
	display: grid;
	gap: 1rem;
}

@media (min-width: 760px) {
	.kiyas {
		grid-template-columns: 1fr 1fr;
	}
}

.kiyas-sutun {
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-surface);
	overflow: hidden;
}

/*
 * The right-hand column carries the accent. Which side is "right" is the
 * article's call, not the component's — it is set by a modifier so the
 * component never decides what a reader should conclude.
 */
.kiyas-sutun.is-tercih {
	border-color: var(--color-primary);
}

.kiyas-basi {
	margin: 0;
	padding: 1.125rem 1.375rem;
	border-bottom: 1px solid var(--color-line);
	background-color: var(--color-surface-alt);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--color-primary);
}

.kiyas-sutun.is-tercih .kiyas-basi {
	background-color: var(--akim-signal);
	border-bottom-color: var(--color-primary);
}

.kiyas-satir {
	display: flex;
	gap: 0.75rem;
	padding: 0.875rem 1.375rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-muted);
}

.kiyas-satir + .kiyas-satir {
	border-top: 1px solid var(--color-line);
}

.kiyas-satir::before {
	content: "—";
	flex-shrink: 0;
	color: var(--color-line);
}

.kiyas-sutun.is-tercih .kiyas-satir::before {
	content: "+";
	color: var(--akim-wa);
}

/* --- Measured values ----------------------------------------------- */

.olcum {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.olcum-oge {
	padding: 1.5rem 1.5rem 1.625rem;
	border: 1px solid var(--color-line);
	border-radius: var(--akim-radius-yumusak);
	background-color: var(--color-surface);
}

.olcum-deger {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--color-primary);
	/* Reserves the width the number will occupy so the count does not reflow. */
	font-variant-numeric: tabular-nums;
}

.olcum-birim {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--akim-signal-koyu);
}

.olcum-ad {
	margin-top: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-muted);
}

/* --- Hero video ---------------------------------------------------- */

/*
 * Sits over the photograph rather than replacing it: the picture is the poster
 * and stays in the document, so the largest paint never waits on video and a
 * refused autoplay leaves the section exactly as it was designed.
 */
.hero-video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.96) contrast(1.03);
}

/* ------------------------------------------------------------------ */
/* Desktop navigation                                                  */
/* ------------------------------------------------------------------ */

/*
 * A real menu above 1024px, not a hamburger.
 *
 * The panel was used at every width, which is defensible on a five-page site
 * and indefensible on one with thirty-four services in six categories: it hid
 * the entire structure behind a click and gave a first-time visitor no way to
 * see what this business does without asking. A hamburger on a desktop is a
 * decision to show nothing.
 *
 * Below 1024 the panel stays exactly as it was — it is the right control on a
 * phone, and the site's own service list is far too long for a row.
 */

@media (min-width: 1024px) {

	/* The toggle is a mobile control again. */
	.site-header .nav-toggle {
		display: none;
	}

	/* The panel unwinds into a row. */
	.site-header .site-nav,
	.site-header .site-nav.is-open {
		position: static;
		width: auto;
		max-width: none;
		max-height: none;
		margin-left: auto;
		overflow: visible;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		transition: none;
	}

	.site-header .site-nav .menu {
		display: flex;
		align-items: center;
		gap: 0.125rem;
		padding: 0;
	}

	.site-header .site-nav .menu > li {
		position: relative;
		opacity: 1;
		transform: none;
		transition: none;
	}

	.site-header .site-nav .menu > li > a {
		padding: 0.5rem 0.75rem;
		border-radius: var(--akim-radius-kontrol);
		font-size: 0.9375rem;
		font-weight: 600;
		letter-spacing: -0.01em;
		white-space: nowrap;
	}

	/*
	 * The current page is marked with the accent under it rather than a filled
	 * background: at this size a row of pills reads as six buttons, and only
	 * one of them is where you are.
	 */
	.site-header .site-nav .current-menu-item > a,
	.site-header .site-nav .current_page_item > a,
	.site-header .site-nav .current-menu-ancestor > a {
		background-color: transparent;
		box-shadow: inset 0 -2px 0 var(--akim-signal-koyu);
	}

	.site-header .site-nav .menu > li > a:hover,
	.site-header .site-nav .menu > li > a:focus-visible {
		background-color: var(--color-surface-alt);
		transform: none;
	}

	/* --- Dropdown --------------------------------------------------- */

	.site-header .site-nav .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		width: 0.375rem;
		height: 0.375rem;
		margin-left: 0.4375rem;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		opacity: 0.5;
		transition: transform var(--akim-hiz-orta) var(--akim-egri);
	}

	.site-header .site-nav .menu > li:hover > a::after,
	.site-header .site-nav .menu > li:focus-within > a::after {
		transform: translateY(0) rotate(225deg);
		opacity: 1;
	}

	.site-header .site-nav .sub-menu,
	.site-header .site-nav .menu-item-has-children > .sub-menu {
		display: block;
		position: absolute;
		top: calc(100% + 0.625rem);
		left: 0;
		z-index: 60;
		min-width: 16rem;
		padding: 0.5rem;
		margin: 0;
		border: 1px solid var(--color-line);
		border-radius: var(--akim-radius-yumusak);
		background-color: var(--color-surface);
		box-shadow: 0 20px 44px -20px rgb(31 33 42 / 0.28);
		list-style: none;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.375rem);
		transition:
			opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak),
			transform var(--akim-hiz-orta) var(--akim-egri),
			visibility 0s linear var(--akim-hiz-orta);
	}

	/*
	 * A gap between the trigger and the panel would drop the hover on the way
	 * down, so the li bridges it with a pseudo-element rather than the panel
	 * being pulled up against the row.
	 */
	.site-header .site-nav .menu-item-has-children::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		height: 0.75rem;
	}

	.site-header .site-nav .menu > li:hover > .sub-menu,
	.site-header .site-nav .menu > li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition:
			opacity var(--akim-hiz-hizli) var(--akim-egri-yumusak),
			transform var(--akim-hiz-orta) var(--akim-egri),
			visibility 0s;
	}

	.site-header .site-nav .sub-menu a {
		display: block;
		padding: 0.5625rem 0.75rem;
		border-radius: var(--akim-radius-kontrol);
		font-size: 0.9375rem;
		font-weight: 500;
		letter-spacing: 0;
		color: var(--color-ink);
		white-space: nowrap;
	}

	.site-header .site-nav .sub-menu a:hover,
	.site-header .site-nav .sub-menu a:focus-visible {
		background-color: var(--akim-signal);
		color: var(--color-primary);
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Floating WhatsApp                                                   */
/* ------------------------------------------------------------------ */

/*
 * One control, every page, every width.
 *
 * It replaces the header button and, above 768px, the fixed bottom strip. The
 * label is there on a desktop, where there is room for it and where an icon on
 * its own is a guess; on a phone it collapses to the mark, because the bar it
 * replaced already taught that corner.
 */
.wa-yuzen {
	position: fixed;
	right: clamp(0.875rem, 2.5vw, 1.75rem);
	bottom: clamp(0.875rem, 2.5vw, 1.75rem);
	z-index: 70;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	height: 3.5rem;
	padding: 0 1.125rem;
	border-radius: var(--akim-radius-hap);
	background-color: var(--akim-wa);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 16px -6px rgb(14 128 67 / 0.5), 0 18px 40px -18px rgb(31 33 42 / 0.4);
	transition:
		background-color var(--akim-hiz-hizli) var(--akim-egri-yumusak),
		transform var(--akim-hiz-orta) var(--akim-egri),
		box-shadow var(--akim-hiz-orta) var(--akim-egri-yumusak);
}

.wa-yuzen:hover,
.wa-yuzen:focus-visible {
	background-color: var(--akim-wa-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px rgb(14 128 67 / 0.55), 0 22px 48px -18px rgb(31 33 42 / 0.45);
}

.wa-yuzen svg {
	flex-shrink: 0;
}

/* Below 768 the fixed bottom bar owns the corner, so the label folds away. */
@media (max-width: 767px) {
	.wa-yuzen {
		width: 3.5rem;
		padding: 0;
		justify-content: center;
		/* Clear of the bottom action bar. */
		bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
	}

	.wa-yuzen-etiket {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wa-yuzen:hover,
	.wa-yuzen:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Front page: the hero runs under the header                          */
/* ------------------------------------------------------------------ */

/*
 * The floating bar is supposed to float on something.
 *
 * On inner pages it does — a hub header or an article header sits under it and
 * gives it a ground. On the front page the hero began below the header, so the
 * bar sat in a white strip of its own: a white bar on white, readable only by
 * its outline, which is what it looked like.
 *
 * The hero is pulled up by the header's measured height and padded back down by
 * the same amount, so the picture reaches the top of the window and the bar
 * floats over it. The value comes from widget.js; the fallback is 0, which is
 * simply the old layout — nothing breaks if the script never runs.
 */
.home .section-hero-akim {
	margin-top: calc(-1 * var(--akim-header-h, 0px));
	padding-top: var(--akim-header-h, 0px);
}

/*
 * The wordmark watermark sits at the top of the hero and would now be behind
 * the bar. It moves down by the same amount so it stays where it was drawn.
 */
.home .hero-wordmark {
	top: calc(var(--akim-hero-wordmark-top, 0px) + var(--akim-header-h, 0px));
}