/**
 * Page compositions (Faz 2): home, inner page head, product listing,
 * product detail, cart, quote, contact, about, search.
 * Uses tokens + components only.
 */

/* ════════════════════════════════════════════════════════════════════
   SECTION HEAD
   ════════════════════════════════════════════════════════════════════ */
.tr-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--tr-space-2) var(--tr-space-5);
	margin-bottom: clamp(var(--tr-space-5), 3vw, var(--tr-space-7));
}

.tr-section__head p {
	flex-basis: 100%;
	max-width: 56ch;
	color: var(--tr-color-text-muted);
}

.tr-section__title {
	max-width: 22ch;
}

/* ════════════════════════════════════════════════════════════════════
   HOME — HERO: the proof sheet on a light press table, with the brand's
   signature behind it: two translucent process plates OVERPRINT
   (mix-blend-mode: multiply), so cyan × magenta prints real process blue,
   the way ink does on paper. The overprint appears only here.
   ════════════════════════════════════════════════════════════════════ */
.tr-hero {
	isolation: isolate;
	padding-block: clamp(var(--tr-space-6), 5vw, var(--tr-space-8));
	background:
		radial-gradient(rgb(27 28 31 / 0.07) 1.2px, transparent 1.5px) 0 0 / 12px 12px,
		var(--tr-color-surface-soft);
	color: var(--tr-color-text);
	overflow: hidden;
}

.tr-hero .tr-proof::before,
.tr-hero .tr-proof::after {
	content: "";
	position: absolute;
	z-index: -1;
	mix-blend-mode: var(--tr-overprint-blend, multiply);
	pointer-events: none;
}

.tr-hero .tr-proof::before {
	top: -28px;
	right: -40px;
	width: 58%;
	height: 64%;
	background: var(--tr-color-cyan);
}

.tr-hero .tr-proof::after {
	bottom: -40px;
	right: -72px;
	width: 42%;
	height: 66%;
	background: var(--tr-color-magenta);
}

@media (max-width: 1023px) {
	.tr-hero .tr-proof::before { top: -18px; right: -24px; }
	.tr-hero .tr-proof::after { bottom: -22px; right: -30px; }
}

@media (forced-colors: active) {
	.tr-hero .tr-proof::before,
	.tr-hero .tr-proof::after { display: none; }
}

.tr-hero__grid {
	display: grid;
	gap: clamp(var(--tr-space-5), 4vw, var(--tr-space-8));
	align-items: center;
}

@media (min-width: 1024px) {
	.tr-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.tr-hero__title { min-height: 2lh; } /* stable box while the font swaps */
}

.tr-sheet {
	padding: clamp(var(--tr-space-7), 5vw, var(--tr-space-8)) clamp(var(--tr-space-5), 4vw, var(--tr-space-8)) clamp(var(--tr-space-5), 3.5vw, var(--tr-space-7));
	background: var(--tr-color-paper);
	color: var(--tr-color-ink);
	box-shadow: var(--tr-shadow-sheet);
}

.tr-hero__title {
	margin: 0;
}

.tr-hero__services {
	margin-top: var(--tr-space-5);
	font-size: var(--tr-text-lead);
	font-weight: var(--tr-weight-medium);
	font-stretch: var(--tr-font-width-wide);
	color: var(--tr-color-text-muted);
}

/* The separators become the logo's process squares (the "•" stays in the
   DOM, hidden from assistive tech by aria-hidden in the markup). */
.tr-hero__services span {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-inline: 0.5em;
	overflow: hidden;
	vertical-align: 0.08em;
	background: var(--tr-color-cyan);
	color: transparent;
	text-indent: 1em;
}

.tr-hero__services span:nth-of-type(2) { background: var(--tr-color-magenta); }

@media (max-width: 599px) {
	.tr-hero__services { font-stretch: var(--tr-font-width-normal); }
	.tr-hero__services span { margin-inline: 0.35em; }
}

@media (forced-colors: active) {
	.tr-hero__services span { color: CanvasText; text-indent: 0; overflow: visible; width: auto; height: auto; }
}

.tr-sheet .tr-colorbar { margin-top: clamp(var(--tr-space-6), 4vw, var(--tr-space-7)); }

.tr-hero__aside {
	display: grid;
	gap: var(--tr-space-5);
}

.tr-hero__promise {
	font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
	font-weight: var(--tr-weight-heavy);
	font-stretch: var(--tr-font-width-condensed);
	letter-spacing: var(--tr-tracking-heading);
	word-spacing: 0.06em;
	line-height: 1.05;
	color: var(--tr-color-ink);
	max-width: 18ch;
}

.tr-hero__lead {
	color: var(--tr-color-text-muted);
	max-width: 44ch;
}

.tr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tr-space-3);
}

.tr-quickpicks {
	padding-top: var(--tr-space-5);
	border-top: 1px solid var(--tr-color-border);
}

.tr-quickpicks__title {
	margin-bottom: var(--tr-space-3);
	font-size: var(--tr-text-small);
	font-weight: var(--tr-weight-medium);
	font-stretch: var(--tr-font-width-wide);
	color: var(--tr-color-text-muted);
}

.tr-quickpicks ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	gap: var(--tr-space-2);
	padding: 0;
	list-style: none;
}

/* Exactly four picks: 2 × 2 instead of 3 + 1 (at most two columns; one
   column on very narrow screens, as above). Other counts keep auto-fill. */
.tr-quickpicks ul:has(> li:nth-child(4):last-child) {
	grid-template-columns: repeat(auto-fill, minmax(max(min(100%, 150px), calc(50% - var(--tr-space-2))), 1fr));
}

.tr-quickpick {
	display: grid;
	align-content: start;
	gap: 2px;
	height: 100%;
	min-height: var(--tr-tap-target);
	padding: var(--tr-space-2) var(--tr-space-3);
	border: 1px solid var(--tr-color-border);
	border-radius: var(--tr-radius-sm);
	background: var(--tr-color-paper);
	color: var(--tr-color-ink);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--tr-transition-fast), box-shadow var(--tr-transition-fast);
}

.tr-quickpick:hover {
	border-color: var(--tr-color-ink);
	box-shadow: 3px 3px 0 var(--tr-color-ink);
}

.tr-quickpick strong { font-size: var(--tr-text-small); }

.tr-quickpick span {
	font-size: var(--tr-text-caption);
	color: var(--tr-color-text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   HOME — USP STRIP
   ════════════════════════════════════════════════════════════════════ */
.tr-usp {
	background: var(--tr-color-paper);
	border-bottom: 1px solid var(--tr-color-border);
}

.tr-usp__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 0;
	list-style: none;
}

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

.tr-usp__item {
	display: flex;
	align-items: center;
	gap: var(--tr-space-3);
	padding: var(--tr-space-5) var(--tr-space-3) var(--tr-space-5) 0;
	font-size: 1rem;
	font-weight: var(--tr-weight-semibold);
	line-height: 1.3;
}

.tr-usp__item .tr-icon { flex: none; color: var(--tr-color-ink); }

/* ════════════════════════════════════════════════════════════════════
   HOME — PROCESS 01–04 (a real sequence; one process colour per step)
   ════════════════════════════════════════════════════════════════════ */
.tr-process {
	background: var(--tr-color-ink-deep);
}

.tr-process__list {
	display: grid;
	gap: var(--tr-space-6) var(--tr-space-5);
	padding: 0;
	list-style: none;
	counter-reset: tr-step;
}

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

@media (min-width: 1100px) {
	.tr-process__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.tr-process__step {
	--_c: var(--tr-color-cyan);
	padding-top: var(--tr-space-4);
	border-top: 4px solid var(--_c);
}

.tr-process__step:nth-child(2) { --_c: var(--tr-color-magenta); }
.tr-process__step:nth-child(3) { --_c: var(--tr-color-yellow); }
.tr-process__step:nth-child(4) { --_c: #fff; }

.tr-process__num {
	display: block;
	font-size: clamp(3.5rem, 2.4rem + 4vw, 6rem);
	font-weight: var(--tr-weight-black);
	font-stretch: var(--tr-font-width-display);
	letter-spacing: var(--tr-tracking-display);
	line-height: 0.9;
	color: var(--_c);
	font-variant-numeric: tabular-nums;
}

.tr-process__title {
	margin-top: var(--tr-space-3);
	color: #fff;
	font-size: var(--tr-text-h3);
}

.tr-process__text {
	margin-top: var(--tr-space-2);
	color: var(--tr-color-text-muted-on-dark);
	max-width: 30ch;
}

/* ════════════════════════════════════════════════════════════════════
   HOME — SERVICES
   ════════════════════════════════════════════════════════════════════ */
.tr-services {
	display: grid;
	gap: var(--tr-space-6);
}

@media (min-width: 900px) {
	.tr-services {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(var(--tr-space-5), 4vw, var(--tr-space-8));
	}
}

.tr-services__title {
	max-width: 18ch;
}

/* ════════════════════════════════════════════════════════════════════
   HOME — CTA BAND
   ════════════════════════════════════════════════════════════════════ */
.tr-cta-band {
	--tr-color-focus: #fff;
	display: grid;
	gap: var(--tr-space-5);
	align-items: end;
	padding: clamp(var(--tr-space-6), 5vw, var(--tr-space-8));
	border-radius: var(--tr-radius-md);
	background: var(--tr-color-magenta);
	color: #fff;
}

/* White on magenta is 4.54:1: never use muted or translucent white here. */
.tr-cta-band .tr-btn--primary { --_bg: #fff; --_fg: var(--tr-color-ink); }
.tr-cta-band .tr-btn--primary:hover { --_bg: var(--tr-color-ink); --_fg: #fff; }
.tr-cta-band .tr-btn--on-dark { --_bd: #fff; }
.tr-cta-band .tr-btn--on-dark:hover { --_bg: var(--tr-color-ink); --_bd: var(--tr-color-ink); }

@media (min-width: 900px) {
	.tr-cta-band { grid-template-columns: minmax(0, 1fr) auto; }
}

.tr-cta-band__title {
	color: #fff;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	font-weight: var(--tr-weight-black);
	font-stretch: var(--tr-font-width-display);
	letter-spacing: var(--tr-tracking-display);
	word-spacing: 0.12em;
	line-height: 0.95;
}

.tr-cta-band__title span { display: block; }

.tr-cta-band__text {
	margin-top: var(--tr-space-4);
	max-width: 52ch;
	color: #fff;
}

.tr-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tr-space-3);
}

/* ════════════════════════════════════════════════════════════════════
   INNER PAGE HEAD
   ════════════════════════════════════════════════════════════════════ */
/* Every inner page opens on a proof: crop marks frame the head's content,
   a slug (registration target + control patches) sits in the top margin, a
   halftone screen fades in from the right edge, and the head is trimmed by
   the process-colour rule the footer also uses. All decoration lives in
   pseudo-elements (no markup, nothing announced); the motion that brings it
   in is in motion-site.css. */
.tr-page-head {
	--_mark: var(--tr-color-ink);
	--_dot: var(--tr-halftone-dot, color-mix(in srgb, var(--tr-color-ink) 10%, transparent));
	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: var(--tr-space-6) clamp(var(--tr-space-6), 4vw, var(--tr-space-8));
}

/* Halftone screen, set at the cyan screen angle, fading out to the left. */
.tr-page-head::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -20%;
	right: -6%;
	width: min(52%, 720px);
	height: 140%;
	background: radial-gradient(circle, var(--_dot) 1.35px, transparent 1.7px) 0 0 / 11px 11px;
	-webkit-mask-image: linear-gradient(100deg, transparent 8%, black 78%);
	mask-image: linear-gradient(100deg, transparent 8%, black 78%);
	transform: rotate(15deg);
	pointer-events: none;
}

/* Trim: the process-colour rule (C · M · Y · K in the logo grey). */
.tr-page-head::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--tr-color-cyan) 0 25%, var(--tr-color-magenta) 0 50%, var(--tr-color-yellow) 0 75%, var(--tr-rule-k, var(--tr-color-logo-grey)) 0);
	transform-origin: left;
	pointer-events: none;
}

.tr-page-head > .tr-container { position: relative; }

/* Crop marks at the four corners of the content box, in the gutter. */
.tr-page-head > .tr-container::before {
	--_g: 3px;
	--_l: 5px;
	--_o: calc(var(--_g) + var(--_l)); /* phones: marks end 8px from the screen edge */
	content: "";
	position: absolute;
	inset: calc(-1 * var(--_o)) calc(var(--tr-gutter) - var(--_o));
	background:
		linear-gradient(var(--_mark), var(--_mark)) 0 var(--_o) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) var(--_o) 0 / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 100% var(--_o) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) calc(100% - var(--_o)) 0 / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 0 calc(100% - var(--_o)) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) var(--_o) 100% / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 100% calc(100% - var(--_o)) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) calc(100% - var(--_o)) 100% / 1px var(--_l);
	background-repeat: no-repeat;
	pointer-events: none;
}

@media (min-width: 768px) {
	.tr-page-head > .tr-container::before { --_g: 7px; --_l: 13px; }
}

/* Slug in the top margin: registration target + control patches. */
@media (min-width: 900px) {
	.tr-page-head > .tr-container::after {
		content: "";
		position: absolute;
		top: 1px;
		right: var(--tr-gutter);
		width: 140px;
		height: 18px;
		background:
			radial-gradient(circle at 9px 9px, transparent 4px, var(--_mark) 4px 5px, transparent 5.5px) 0 0 / 18px 18px no-repeat,
			linear-gradient(var(--_mark), var(--_mark)) 8.5px 0 / 1px 18px no-repeat,
			linear-gradient(var(--_mark), var(--_mark)) 0 8.5px / 18px 1px no-repeat,
			linear-gradient(90deg,
				var(--tr-color-cyan) 0 12.5%,
				var(--tr-color-magenta) 0 25%,
				var(--tr-color-yellow) 0 37.5%,
				var(--tr-fixed-ink, var(--tr-color-ink)) 0 50%,
				color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 70%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 62.5%,
				color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 45%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 75%,
				color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 22%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 87.5%,
				color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 8%, var(--tr-fixed-paper, var(--tr-color-paper))) 0) 28px 4px / 112px 10px no-repeat,
			linear-gradient(var(--tr-fixed-paper, var(--tr-color-paper)), var(--tr-fixed-paper, var(--tr-color-paper))) 27px 3px / 114px 12px no-repeat;
		pointer-events: none;
	}
}

/* Forced colours: the print decoration steps aside (the content stays). */
@media (forced-colors: active) {
	.tr-page-head::before,
	.tr-page-head::after,
	.tr-page-head > .tr-container::before,
	.tr-page-head > .tr-container::after { display: none; }
}

/* Keep the head copy clear of the slug and the halftone's densest part. */
.tr-page-head h1 { max-width: min(22ch, 100%); }

.tr-page-head .tr-breadcrumb { margin-bottom: var(--tr-space-4); }

.tr-page-head__intro {
	margin-top: var(--tr-space-3);
	max-width: 60ch;
	color: var(--tr-color-text-muted);
	font-size: var(--tr-text-lead);
}

.tr-page-head--dark {
	border-bottom: 0;
	background:
		linear-gradient(90deg, var(--tr-color-cyan) 0 25%, var(--tr-color-magenta) 0 50%, var(--tr-color-yellow) 0 75%, var(--tr-rule-k, var(--tr-color-logo-grey)) 0) bottom / 100% 6px no-repeat,
		var(--tr-color-antrasit);
	color: #fff;
}

.tr-page-head--dark .tr-breadcrumb ol,
.tr-page-head--dark .tr-page-head__intro { color: var(--tr-color-text-muted-on-dark); }
.tr-page-head--dark .tr-breadcrumb [aria-current="page"] { color: #fff; }

/* Dark head: marks and dots print in the on-dark ink; its 6 px colour band
   is part of the background, so its own ::after is a cover of the head
   colour that motion-site.css rolls away (at rest it is scaled to 0). */
.tr-page-head--dark {
	--_mark: var(--tr-color-text-on-dark);
	--_dot: color-mix(in srgb, var(--tr-color-text-on-dark) 9%, transparent);
}

.tr-page-head--dark::after {
	height: 6px;
	background: var(--tr-color-antrasit);
	transform: scaleX(0);
	transform-origin: right;
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT LISTING — desktop: FILTERS | PRODUCTS · mobile: [Filtrele][Sırala]
   ════════════════════════════════════════════════════════════════════ */
.tr-listing {
	display: grid;
	gap: var(--tr-space-6);
	padding-block: var(--tr-space-5) var(--tr-section-y);
}

@media (min-width: 1024px) {
	.tr-listing { grid-template-columns: 260px minmax(0, 1fr); gap: var(--tr-space-7); }
}

/* Filters: ONE <dialog> — a drawer on mobile, an in-flow sidebar on
   desktop (closed dialogs are forced visible and de-modalised ≥ 1024). */
.tr-filters__foot { position: sticky; bottom: 0; background: var(--tr-color-paper); }

@media (min-width: 1024px) {
	dialog.tr-filters,
	dialog.tr-filters:not([open]) {
		position: sticky;
		top: calc(var(--tr-header-height) + var(--tr-space-4));
		inset: auto;
		display: block;
		align-self: start;
		width: auto;
		height: auto;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		animation: none;
		z-index: auto;
	}

	.tr-filters .tr-dialog__head {
		padding: 0 0 var(--tr-space-3);
		border-bottom: 1px solid var(--tr-color-ink);
	}

	.tr-filters .tr-dialog__head .tr-icon-btn,
	.tr-filters .tr-filters__foot { display: none; }

	.tr-filters .tr-dialog__body { padding: 0; overflow: visible; }
}

.tr-filter-group {
	padding-block: var(--tr-space-4);
	border-bottom: 1px solid var(--tr-color-border);
}

.tr-filter-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--tr-tap-target);
	font-weight: var(--tr-weight-bold);
	font-size: var(--tr-text-small);
	list-style: none;
	cursor: pointer;
}

.tr-filter-group > summary::-webkit-details-marker { display: none; }

.tr-filter-group > summary::after {
	content: "";
	width: 10px;
	height: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.tr-filter-group[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

.tr-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tr-space-3);
	margin-bottom: var(--tr-space-4);
}

.tr-toolbar__count {
	font-size: var(--tr-text-small);
	color: var(--tr-color-text-muted);
}

.tr-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tr-space-2);
	margin-bottom: var(--tr-space-5);
}

.tr-active-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--tr-space-2);
	min-height: var(--tr-tap-target);
	padding: 0 var(--tr-space-2) 0 var(--tr-space-3);
	border: 1px solid var(--tr-color-ink);
	border-radius: var(--tr-radius-sm);
	background: var(--tr-color-paper);
	font-size: var(--tr-text-small);
	cursor: pointer;
}

.tr-active-filter:hover { background: var(--tr-color-surface-soft); }

/* In flow (not sticky): the mobile header already stacks two rows. */
.tr-listing__mobilebar {
	display: grid;
	grid-template-columns: 1fr; /* no sorting: filters only (ADR-004) */
	gap: var(--tr-space-2);
	margin-inline: calc(-1 * var(--tr-gutter));
	padding: var(--tr-space-2) var(--tr-gutter);
	background: var(--tr-color-paper);
	border-bottom: 1px solid var(--tr-color-border);
}

@media (min-width: 1024px) {
	.tr-listing__mobilebar { display: none; }
}

.tr-listing__seo {
	margin-top: var(--tr-space-8);
	padding-top: var(--tr-space-6);
	border-top: 1px solid var(--tr-color-border);
}

/* Category overview (/urunler/) */
.tr-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--tr-space-2);
	margin-top: var(--tr-space-5);
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT DETAIL — desktop 7/5: gallery + details | info + quote form
   ════════════════════════════════════════════════════════════════════ */
.tr-pdp {
	display: grid;
	gap: var(--tr-space-6);
	padding-block: var(--tr-space-5) var(--tr-section-y);
}

/* Grid items may shrink below their content (the tab row scrolls instead). */
.tr-pdp > * { min-width: 0; }

@media (min-width: 1024px) {
	.tr-pdp {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-rows: auto 1fr; /* details sit right under the gallery */
		gap: clamp(var(--tr-space-6), 4vw, var(--tr-space-8));
		align-items: start;
	}

}

/* The stage takes the main photo's proportions (--tr-stage-ratio, set
   inline by content-single-product.php from the image size), so a 4:3 or
   3:2 photo fills it without a letterbox band; no photo = 4:3. */
.tr-pdp__stage {
	aspect-ratio: var(--tr-stage-ratio, 4 / 3);
	background: var(--tr-color-surface-sunken);
}

.tr-pdp__stage svg { width: 100%; height: 100%; }

/* Real product image (WooCommerce image or placeholder) on the paper stage. */
.tr-pdp__stage img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tr-pdp__thumb { overflow: hidden; cursor: pointer; }

.tr-pdp__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tr-pdp__thumbs {
	display: flex;
	gap: var(--tr-space-2);
	margin-top: var(--tr-space-3);
	padding: 0;
	list-style: none;
}

.tr-pdp__thumb {
	width: 72px;
	height: 56px;
	padding: 0;
	border: 1px solid var(--tr-color-border);
	border-radius: var(--tr-radius-sm);
	background: var(--tr-color-surface-sunken);
}

/* One image: no strip of one thumbnail. */
.tr-pdp__thumbs:has(> li:only-child) { display: none; }

/* Phones and tablets: the product's name and spec come first, then the
   proof (tighter margins, compact thumbnails), then the ticket, so
   the title is on the first screen and the form starts right after the
   picture. The buy column dissolves into the grid (display: contents on a
   plain wrapper; its header and section keep their own semantics). */
@media (max-width: 1023px) {
	.tr-pdp { gap: var(--tr-space-5); padding-top: var(--tr-space-3); }
	.tr-pdp__buy { display: contents; }
	.tr-pdp__header { order: -1; }
	.tr-pdp__buy > .tr-quote { margin-top: 0; }
	.tr-pdp__media .tr-proof { --tr-crop-gap: 4px; --tr-crop-length: 9px; }
	.tr-pdp__thumbs { margin-top: var(--tr-space-2); }
	.tr-pdp__thumb { width: 52px; height: 40px; }
	.tr-pdp__details { margin-top: 0; }
}

.tr-pdp__thumb[aria-current="true"] { border-color: var(--tr-color-ink); box-shadow: inset 0 0 0 1px var(--tr-color-ink), inset 0 -4px 0 var(--tr-color-magenta); }

/* The gallery is a press proof: registration target in the top margin and
   a colour control strip in the bottom margin (the crop marks are markup). */
.tr-pdp__media .tr-proof::before,
.tr-pdp__media .tr-proof::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.tr-pdp__media .tr-proof::before {
	top: calc(-1 * (var(--tr-crop-gap) + var(--tr-crop-length)) + 2px);
	left: calc(50% - 9px);
	width: 18px;
	height: 18px;
	background:
		radial-gradient(circle, transparent 4px, var(--tr-color-ink) 4px 5px, transparent 5.5px),
		linear-gradient(var(--tr-color-ink), var(--tr-color-ink)) 8.5px 0 / 1px 100% no-repeat,
		linear-gradient(var(--tr-color-ink), var(--tr-color-ink)) 0 8.5px / 100% 1px no-repeat;
}

.tr-pdp__media .tr-proof::after {
	right: var(--tr-crop-length);
	bottom: calc(-1 * (var(--tr-crop-gap) + var(--tr-crop-length)) + 7px);
	width: 112px;
	height: 8px;
	box-shadow: 0 0 0 1px var(--tr-fixed-paper, var(--tr-color-paper)); /* paper backing: K reads on any theme */
	background: linear-gradient(90deg,
		var(--tr-color-cyan) 0 12.5%,
		var(--tr-color-magenta) 0 25%,
		var(--tr-color-yellow) 0 37.5%,
		var(--tr-fixed-ink, var(--tr-color-ink)) 0 50%,
		color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 70%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 62.5%,
		color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 45%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 75%,
		color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 22%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 87.5%,
		color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 8%, var(--tr-fixed-paper, var(--tr-color-paper))) 0);
}

.tr-pdp__header {
	display: grid;
	gap: var(--tr-space-3);
}

.tr-related .tr-section__title { margin-bottom: clamp(var(--tr-space-5), 3vw, var(--tr-space-7)); }

.tr-pdp__spec {
	color: var(--tr-color-text-muted);
}

.tr-trust {
	display: grid;
	gap: var(--tr-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--tr-text-small);
}

.tr-trust li {
	display: flex;
	align-items: center;
	gap: var(--tr-space-2);
}

.tr-trust .tr-icon { color: var(--tr-color-success); }

/* Product quote form (ADR-004): one free-text request per product. */
.tr-quote {
	display: grid;
	gap: var(--tr-space-5);
	margin-top: var(--tr-space-5);
	padding: clamp(var(--tr-space-5), 3vw, var(--tr-space-6));
	border-radius: 0 0 var(--tr-radius-md) var(--tr-radius-md);
	background: var(--tr-color-surface-soft);
	box-shadow: inset 0 4px 0 var(--tr-color-magenta);
}

#teklif-formu,
.tr-quote__title,
.tr-quote-form .tr-field { scroll-margin-top: calc(var(--tr-header-sticky, var(--tr-header-height)) + var(--tr-space-4)); }

.tr-quote__head { display: grid; gap: var(--tr-space-2); }

/* ── Job ticket (iş emri): the quote and contact forms are print-shop job
   tickets. A slug in the top margin, a perforated stub under the head
   (dashed tear line with two punched notches in the page colour), and
   numbered sections where the form really is a sequence. Decoration only:
   pseudo-elements, no markup; forms.js hooks are untouched. */
.tr-quote,
.tr-form[data-tr-validate] {
	--_pad: clamp(var(--tr-space-5), 3vw, var(--tr-space-6));
	--_notch: 11px;
	--_tear: color-mix(in srgb, var(--tr-color-border-strong) 60%, transparent);
	position: relative;
}

.tr-quote { padding: var(--_pad); }

.tr-form[data-tr-validate] {
	max-width: 720px;
	padding: var(--_pad);
	border-radius: 0 0 var(--tr-radius-md) var(--tr-radius-md);
	background: var(--tr-color-surface-soft);
	box-shadow: inset 0 4px 0 var(--tr-color-magenta);
	counter-reset: tr-ticket;
}

/* Slug: registration target + the four process patches. */
.tr-quote::after,
.tr-form[data-tr-validate]::after {
	content: "";
	position: absolute;
	top: 11px;
	right: var(--_pad);
	width: 70px;
	height: 12px;
	background:
		radial-gradient(circle, transparent 2.6px, var(--tr-color-ink) 2.6px 3.5px, transparent 4px) 0 0 / 12px 12px no-repeat,
		linear-gradient(var(--tr-color-ink), var(--tr-color-ink)) 5.5px 0 / 1px 12px no-repeat,
		linear-gradient(var(--tr-color-ink), var(--tr-color-ink)) 0 5.5px / 12px 1px no-repeat,
		linear-gradient(90deg, var(--tr-color-cyan) 0 25%, var(--tr-color-magenta) 0 50%, var(--tr-color-yellow) 0 75%, var(--tr-fixed-ink, var(--tr-color-ink)) 0) 22px 2px / 48px 8px no-repeat,
		linear-gradient(var(--tr-fixed-paper, var(--tr-color-paper)), var(--tr-fixed-paper, var(--tr-color-paper))) 21px 1px / 50px 10px no-repeat;
	pointer-events: none;
}

/* Perforated stub: under the product ticket's head, under the contact
   ticket's title, and between the general ticket's sections. */
.tr-quote__head,
.tr-form[data-tr-validate] > h2:first-child {
	position: relative;
	padding-bottom: var(--tr-space-5);
	border-bottom: 2px dashed var(--_tear);
}

/* The legend sits in the tear line (fieldset rendering), so the rule reads
   "2 Detaylar - - - -" like a section of a paper ticket. */
.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section {
	position: relative;
	padding-top: var(--tr-space-2);
	border-top: 2px dashed var(--_tear);
}

.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section > legend:not(.screen-reader-text) { padding-right: var(--tr-space-3); }

.tr-quote__head::before,
.tr-quote__head::after,
.tr-form[data-tr-validate] > h2:first-child::before,
.tr-form[data-tr-validate] > h2:first-child::after,
.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section::before,
.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section::after {
	content: "";
	position: absolute;
	bottom: calc(-1 * var(--_notch) - 1px);
	left: calc(-1 * var(--_pad) - var(--_notch));
	width: calc(2 * var(--_notch));
	height: calc(2 * var(--_notch));
	border-radius: 50%;
	background: var(--tr-perforation, var(--tr-color-paper));
	pointer-events: none;
}

.tr-quote__head::after,
.tr-form[data-tr-validate] > h2:first-child::after,
.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section::after {
	right: calc(-1 * var(--_pad) - var(--_notch));
	left: auto;
}

.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section::before,
.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section::after {
	top: calc(-1 * var(--_notch) - 1px);
	bottom: auto;
}

/* Numbered sections (1, 2, 3 is the order the form is filled in): a
   plate chip per step, hidden from assistive tech (the legend says it). */
.tr-form[data-tr-validate] .tr-form__section > legend:not(.screen-reader-text)::before {
	counter-increment: tr-ticket;
	content: counter(tr-ticket);
	content: counter(tr-ticket) / "";
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin-right: var(--tr-space-3);
	background: var(--_chip, var(--tr-color-cyan));
	color: var(--_chip-fg, var(--tr-fixed-ink, var(--tr-color-ink)));
	font-size: 1rem;
	font-weight: var(--tr-weight-black);
	font-stretch: var(--tr-font-width-condensed);
	line-height: 1;
	vertical-align: 0.05em;
}

.tr-form[data-tr-validate] .tr-form__section:nth-of-type(2) { --_chip: var(--tr-color-magenta); --_chip-fg: var(--tr-fixed-paper, var(--tr-color-paper)); }
.tr-form[data-tr-validate] .tr-form__section:nth-of-type(3) { --_chip: var(--tr-color-yellow); }
.tr-form[data-tr-validate] .tr-form__section:nth-of-type(4) { --_chip: var(--tr-color-ink); --_chip-fg: var(--tr-color-paper); }

@media (max-width: 639px) {
	.tr-quote,
	.tr-form[data-tr-validate] { --_notch: 9px; }
}

@media (forced-colors: active) {
	.tr-quote::after,
	.tr-form[data-tr-validate]::after,
	.tr-quote__head::before,
	.tr-quote__head::after,
	.tr-form[data-tr-validate] > h2:first-child::before,
	.tr-form[data-tr-validate] > h2:first-child::after,
	.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section::before,
	.tr-form[data-tr-validate] > .tr-form__section ~ .tr-form__section::after { display: none; }
}

.tr-quote__title {
	font-size: var(--tr-text-h3);
}

.tr-quote__intro { color: var(--tr-color-text-muted); }

.tr-quote-form { gap: var(--tr-space-5); }

.tr-quote-form .tr-field__help { margin-top: 0; }

/* The product hint is the main defence against incomplete requests: 15px, not caption size. */
.tr-quote-form .tr-field__help,
.tr-quote-form .tr-field__error { font-size: var(--tr-text-small); }

.tr-input[type="file"] { padding: 5px; line-height: 36px; }

.tr-input[type="file"]::file-selector-button {
	margin-right: var(--tr-space-3);
	padding: var(--tr-space-2) var(--tr-space-4);
	border: 1px solid var(--tr-color-ink);
	border-radius: var(--tr-radius-sm);
	background: var(--tr-color-paper);
	color: var(--tr-color-ink);
	font: inherit;
	font-weight: var(--tr-weight-semibold);
	cursor: pointer;
}

/* Honeypot: off-screen, unreachable by Tab, hidden from assistive tech. */
.tr-quote-form__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


.tr-quote-form__file-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tr-space-1) var(--tr-space-3);
	font-size: var(--tr-text-small);
}

.tr-quote-form__file-remove {
	min-width: var(--tr-tap-target);
	min-height: var(--tr-tap-target);
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: var(--tr-weight-semibold);
	cursor: pointer;
}

.tr-quote-form__file-remove:disabled { cursor: not-allowed; opacity: 0.6; }

/* Faz 4: multi-file list (JS keeps the list; see assets/js/forms.js). */
.tr-quote-form__files {
	display: grid;
	gap: var(--tr-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tr-quote-form__file {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--tr-space-1) var(--tr-space-3);
	padding: var(--tr-space-1) var(--tr-space-1) var(--tr-space-1) var(--tr-space-3);
	border: 1px solid var(--tr-color-border);
	border-radius: var(--tr-radius-sm);
	background: var(--tr-color-paper);
}

.tr-quote-form__file[aria-invalid="true"] { border-left: 3px solid var(--tr-color-danger); }
.tr-quote-form__file .tr-field__error { grid-column: 1 / -1; margin: 0; }

.tr-quote-form__file-meta {
	display: grid;
	min-width: 0;
	line-height: 1.35;
}

.tr-quote-form__file-name {
	overflow: hidden;
	font-weight: var(--tr-weight-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tr-quote-form__file-size { font-size: var(--tr-text-caption); }

.tr-field__error ul { margin: 0; padding-left: var(--tr-space-4); }
.tr-field__error li + li { margin-top: var(--tr-space-1); }

/* Busy submit keeps the brand fill (aria-disabled would grey it out). */
.tr-btn--primary[aria-busy="true"] {
	--_bg: var(--tr-color-magenta-hover);
	--_fg: #fff;
	opacity: 1;
}

.tr-quote__success {
	display: grid;
	gap: var(--tr-space-4);
	padding: var(--tr-space-5);
	border: 1px solid var(--tr-color-success);
	background: var(--tr-color-success-tint);
}

/* WhatsApp hand-off in the success panel (inc/whatsapp.php, forms.js):
   the reminder line and the primary "WhatsApp'ta gönder" button. */
.tr-quote__whatsapp {
	display: grid;
	gap: var(--tr-space-3);
	padding-block: var(--tr-space-2);
}

.tr-quote__whatsapp-lead { font-weight: var(--tr-weight-semibold); }

.tr-btn--whatsapp { min-height: calc(var(--tr-control-height) + var(--tr-space-1)); font-size: 1rem; }

/* "Form yerine WhatsApp'tan yaz" under the product form intro. */
.tr-quote__wa { margin-top: calc(-1 * var(--tr-space-1)); }

[data-tr-quote-number] {
	font-size: var(--tr-text-h4);
	font-weight: var(--tr-weight-heavy);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.tr-pdp__details {
	margin-top: var(--tr-space-7);
}

@media (min-width: 1024px) {
	.tr-pdp__details { grid-column: 1; margin-top: 0; }

	/* The quote ticket is long: the product details stay beside it while
	   it is filled in (plain CSS sticky, nothing holds the scroll). */
	.tr-pdp__details {
		position: sticky;
		top: calc(var(--tr-header-sticky, var(--tr-header-height)) + var(--tr-space-6));
		align-self: start;
	}
}

/* Spec sheet: a heavy rule on top, dashed rows, and a process-colour tick
   per row (C, M, Y, K in turn) like the patches of a control strip. */
.tr-spec-table {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--tr-color-ink);
	font-size: var(--tr-text-small);
}

.tr-spec-table th,
.tr-spec-table td {
	padding: 14px 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--tr-color-border-strong) 55%, transparent);
	text-align: left;
	vertical-align: top;
}

.tr-spec-table th {
	position: relative;
	width: 40%;
	padding-inline: 24px var(--tr-space-4);
	font-weight: var(--tr-weight-semibold);
	font-stretch: var(--tr-font-width-semi);
	color: var(--tr-color-text-muted);
}

.tr-spec-table th::before {
	content: "";
	position: absolute;
	top: calc(14px + 0.32em);
	left: 0;
	width: 10px;
	height: 10px;
	background: var(--_plate, var(--tr-color-cyan));
	transform-origin: bottom;
}

.tr-spec-table tr:nth-child(4n+2) { --_plate: var(--tr-color-magenta); }
.tr-spec-table tr:nth-child(4n+3) { --_plate: var(--tr-color-yellow); }
.tr-spec-table tr:nth-child(4n) { --_plate: var(--tr-color-ink); }

.tr-spec-table td { font-weight: var(--tr-weight-medium); }

/* ════════════════════════════════════════════════════════════════════
   QUOTE / CONTACT forms
   ════════════════════════════════════════════════════════════════════ */
.tr-form-layout {
	display: grid;
	gap: var(--tr-space-7);
	padding-block: var(--tr-space-6) var(--tr-section-y);
}

@media (min-width: 1024px) {
	.tr-form-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
	.tr-form-layout__aside { position: sticky; top: calc(var(--tr-header-height) + var(--tr-space-5)); }
}

.tr-form {
	display: grid;
	gap: var(--tr-space-6);
	max-width: 680px;
}

.tr-form__section {
	display: grid;
	gap: var(--tr-space-4);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.tr-form__section > legend {
	margin-bottom: var(--tr-space-2);
	padding: 0;
	font-size: var(--tr-text-h4);
	font-weight: var(--tr-weight-bold);
}

.tr-form__row {
	display: grid;
	gap: var(--tr-space-4);
}

@media (min-width: 640px) {
	.tr-form__row { grid-template-columns: 1fr 1fr; }
}

.tr-error-summary {
	padding: var(--tr-space-4) var(--tr-space-5);
	border-left: 3px solid var(--tr-color-danger);
	background: var(--tr-color-danger-tint);
}

.tr-error-summary :is(h2, h3) { font-size: var(--tr-text-h4); font-stretch: var(--tr-font-width-normal); }
.tr-error-summary ul { margin-top: var(--tr-space-2); padding-left: var(--tr-space-5); }
.tr-error-summary a { color: var(--tr-color-danger); font-weight: var(--tr-weight-semibold); }

.tr-timeline {
	display: grid;
	gap: var(--tr-space-4);
	padding: 0;
	list-style: none;
	counter-reset: tr-tl;
}

.tr-timeline li {
	--_c: var(--tr-color-cyan);
	position: relative;
	padding-left: calc(var(--tr-space-7) - 3px);
	border-left: 3px solid var(--_c);
	counter-increment: tr-tl;
}

.tr-timeline li:nth-child(4n+2) { --_c: var(--tr-color-magenta); }
.tr-timeline li:nth-child(4n+3) { --_c: var(--tr-color-yellow); }
.tr-timeline li:nth-child(4n) { --_c: var(--tr-color-ink); }

.tr-timeline li::before {
	content: counter(tr-tl, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-weight: var(--tr-weight-heavy);
	font-stretch: var(--tr-font-width-condensed);
	font-size: 1.5rem;
	line-height: 1;
}

.tr-timeline strong { display: block; }
.tr-timeline span { font-size: var(--tr-text-small); color: var(--tr-color-text-muted); }

.tr-aside-card {
	display: grid;
	gap: var(--tr-space-4);
	padding: var(--tr-space-5);
	border-radius: var(--tr-radius-md);
	background: var(--tr-color-surface-soft);
}

.tr-aside-card h2 { font-size: var(--tr-text-h4); font-stretch: var(--tr-font-width-normal); }

/* ════════════════════════════════════════════════════════════════════
   ABOUT / CONTACT
   ════════════════════════════════════════════════════════════════════ */
.tr-split {
	display: grid;
	gap: var(--tr-space-7);
}

@media (min-width: 1024px) {
	.tr-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

.tr-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	padding: 0;
	list-style: none;
	border: 1px solid var(--tr-color-border);
	border-radius: var(--tr-radius-md);
	background: var(--tr-color-border);
}

.tr-facts li {
	display: grid;
	gap: var(--tr-space-1);
	padding: var(--tr-space-5);
	background: var(--tr-color-paper);
}

.tr-facts strong { font-size: var(--tr-text-h4); }

/* Each service carries a plate tab, like a swatch book. */
.tr-facts li { position: relative; }

.tr-facts li::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--tr-space-5);
	width: 32px;
	height: 4px;
	background: var(--_plate, var(--tr-color-cyan));
}

.tr-facts li:nth-child(4n+2) { --_plate: var(--tr-color-magenta); }
.tr-facts li:nth-child(4n+3) { --_plate: var(--tr-color-yellow); }
.tr-facts li:nth-child(4n) { --_plate: var(--tr-color-ink); }
.tr-facts span { font-size: var(--tr-text-small); color: var(--tr-color-text-muted); }

.tr-contact-list {
	display: grid;
	gap: var(--tr-space-4);
	padding: 0;
	list-style: none;
}

.tr-contact-list li {
	display: flex;
	gap: var(--tr-space-3);
	align-items: flex-start;
}

.tr-map-slot {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border: 1px dashed var(--tr-color-border-strong);
	background: var(--tr-color-surface-soft);
	color: var(--tr-color-text-muted);
	font-size: var(--tr-text-small);
	text-align: center;
	padding: var(--tr-space-5);
}

/* Filled map slot (inc/business.php, ADR-011): the address and a Google
   Maps link on a solid card (the dashed frame above is kept for the
   "not set yet" placeholder only). No embed: nothing third-party loads
   until the visitor follows the link (KVKK). */
.tr-map-slot--card {
	gap: var(--tr-space-3);
	align-content: center;
	border: 1px solid var(--tr-color-border);
	border-radius: var(--tr-radius-md);
}

.tr-map-slot__icon { width: 28px; height: 28px; color: var(--tr-color-magenta-text); }

.tr-map-slot__address {
	max-width: 36ch;
	color: var(--tr-color-text);
	font-size: var(--tr-text-body);
	font-weight: var(--tr-weight-semibold);
}

.tr-map-slot__note { max-width: 42ch; font-size: var(--tr-text-caption); }

/* ════════════════════════════════════════════════════════════════════
   SEARCH
   ════════════════════════════════════════════════════════════════════ */
.tr-search-page__form {
	max-width: 640px;
	margin-top: var(--tr-space-5);
}

.tr-search-page mark {
	background: var(--tr-color-magenta-tint);
	color: inherit;
	padding: 0 2px;
}

.tr-empty {
	display: grid;
	gap: var(--tr-space-4);
	justify-items: start;
	padding-block: var(--tr-space-7); /* never reset inline padding: .tr-container owns it */
}

/* Empty result: a blank sheet off the press. Crop marks on the table, a
   paper sheet with its live area dashed in, and a control strip that
   printed although nothing else did. Decoration only (aria-hidden). */
.tr-empty__art {
	--_mark: var(--tr-color-ink);
	--_g: 5px;
	--_l: 12px;
	--_o: calc(var(--_g) + var(--_l));
	position: relative;
	width: min(100%, 168px);
	aspect-ratio: 5 / 6;
	background:
		linear-gradient(var(--_mark), var(--_mark)) 0 var(--_o) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) var(--_o) 0 / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 100% var(--_o) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) calc(100% - var(--_o)) 0 / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 0 calc(100% - var(--_o)) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) var(--_o) 100% / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 100% calc(100% - var(--_o)) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) calc(100% - var(--_o)) 100% / 1px var(--_l);
	background-repeat: no-repeat;
}

.tr-empty__art::before,
.tr-empty__art::after {
	content: "";
	position: absolute;
	inset: var(--_o);
}

.tr-empty__art::before {
	background: var(--tr-fixed-paper, var(--tr-color-paper));
	box-shadow: var(--tr-shadow-sheet);
	outline: 1px dashed color-mix(in srgb, var(--tr-color-border-strong) 70%, transparent);
	outline-offset: -14px;
}

/* The only ink on the sheet: registration target on top, strip below. */
.tr-empty__art::after {
	background:
		radial-gradient(circle, transparent 2.6px, var(--tr-fixed-ink, var(--tr-color-ink)) 2.6px 3.5px, transparent 4px) 50% 1px / 12px 12px no-repeat,
		linear-gradient(90deg, var(--tr-color-cyan) 0 25%, var(--tr-color-magenta) 0 50%, var(--tr-color-yellow) 0 75%, var(--tr-fixed-ink, var(--tr-color-ink)) 0) 14px calc(100% - 3px) / 48% 6px no-repeat;
}

@media (min-width: 768px) {
	.tr-empty:has(> .tr-empty__art) {
		grid-template-columns: 200px minmax(0, 56ch);
		column-gap: var(--tr-space-7);
		align-items: start;
	}

	.tr-empty:has(> .tr-empty__art) > :not(.tr-empty__art) { grid-column: 2; }
	.tr-empty > .tr-empty__art { grid-row: 1 / span 4; width: 200px; }
}

/* Phones: the recovery links matter more than the picture; the sheet
   steps aside so the categories and "Teklif al" are on the first screen. */
@media (max-width: 767px) {
	.tr-empty__art { display: none; }
	.tr-empty:has(> .tr-empty__art) { padding-top: var(--tr-space-3); }
}

/* Home: the category section ends a step, not a section, before the next. */
.tr-section:has(> .tr-container > .tr-cat-grid) { padding-bottom: var(--tr-space-8); }

/* Content starts a step (not a whole section) below a page head. */
.tr-page-head + .tr-section { padding-top: var(--tr-space-6); }

@media (min-width: 768px) {
	.tr-page-head + .tr-section { padding-top: var(--tr-space-7); }
}

@media (min-width: 1024px) {
	.tr-page-head + .tr-section { padding-top: var(--tr-space-8); }
}

/* 404: a misprint. The four plates of the numerals, each off register
   (C up-left, M down-right, Y low), overprinting; the key plate is on top.
   Decoration only (aria-hidden): the heading below says what happened. */
.tr-404 {
	--_mark: var(--tr-color-ink);
	--_g: 6px;
	--_l: 14px;
	--_o: calc(var(--_g) + var(--_l));
	position: relative;
	display: grid;
	isolation: isolate;
	margin-bottom: var(--tr-space-3);
	padding: calc(var(--_o) + 0.08em) calc(var(--_o) + 0.12em) calc(var(--_o) + 0.02em);
	background:
		linear-gradient(var(--_mark), var(--_mark)) 0 var(--_o) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) var(--_o) 0 / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 100% var(--_o) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) calc(100% - var(--_o)) 0 / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 0 calc(100% - var(--_o)) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) var(--_o) 100% / 1px var(--_l),
		linear-gradient(var(--_mark), var(--_mark)) 100% calc(100% - var(--_o)) / var(--_l) 1px,
		linear-gradient(var(--_mark), var(--_mark)) calc(100% - var(--_o)) 100% / 1px var(--_l);
	background-repeat: no-repeat;
	font-size: clamp(7rem, 3.2rem + 16vw, 12.8rem);
	font-weight: var(--tr-weight-black);
	font-stretch: var(--tr-font-width-display);
	letter-spacing: -0.03em;
	line-height: 0.8;
	user-select: none;
	-webkit-user-select: none;
}

.tr-404__plate {
	grid-area: 1 / 1;
	mix-blend-mode: var(--tr-overprint-blend, multiply);
}

.tr-404__plate--y { color: var(--tr-color-yellow); transform: translate(-0.006em, 0.025em); }
.tr-404__plate--m { color: var(--tr-color-magenta); transform: translate(0.022em, 0.014em) rotate(0.3deg); }
.tr-404__plate--c { color: var(--tr-color-cyan); transform: translate(-0.02em, -0.012em) rotate(-0.25deg); }

/* The key plate prints last and opaque: the numerals always read, the
   colour plates only show as fringes (no muddy overprint blobs). */
.tr-404__plate--k { color: var(--tr-color-ink); mix-blend-mode: normal; }

/* The 404 view opens close under the header so both actions sit above the
   fold on a 900px-high screen. */
.tr-section:has(> .tr-empty--404) { padding-top: var(--tr-space-6); }
.tr-empty--404 { padding-top: 0; }

@media (forced-colors: active) {
	.tr-404__plate:not(.tr-404__plate--k) { display: none; }
}

.tr-breadcrumb--page { padding-top: var(--tr-space-5); }

@media (min-width: 1024px) {
	.tr-pdp__media { grid-column: 1; grid-row: 1; }
	.tr-pdp__buy { grid-column: 2; grid-row: 1 / span 2; }
	.tr-pdp__details { grid-column: 1; grid-row: 2; }
}

.tr-listing__results .tr-pagination { margin-top: var(--tr-space-7); }

/* Catalog overview groups (/urunler/) */
.tr-catalog {
	display: grid;
	gap: var(--tr-space-6) var(--tr-space-7);
	padding-top: var(--tr-section-y);
}

@media (min-width: 900px) {
	.tr-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tr-catalog__group {
	display: grid;
	gap: var(--tr-space-3);
	align-content: start;
	padding-top: var(--tr-space-4);
	border-top: 2px solid var(--tr-color-ink);
}

.tr-catalog__group > .tr-link { justify-self: start; }

/* Groups carry the same plate as their swatch card above (C, M, Y, K). */
.tr-catalog__group { border-top-width: 4px; }
.tr-catalog__group:nth-child(4n+1) { border-top-color: var(--tr-color-cyan); }
.tr-catalog__group:nth-child(4n+2) { border-top-color: var(--tr-color-magenta); }
.tr-catalog__group:nth-child(4n+3) { border-top-color: var(--tr-color-yellow); }

/* Cart extras */
.tr-cart__note { margin-top: var(--tr-space-5); }
.tr-coupon { padding-bottom: var(--tr-space-4); }
.tr-coupon__row { display: flex; gap: var(--tr-space-2); }
.tr-coupon__row .tr-input { flex: 1; min-width: 0; }

.tr-search-page__hint { margin-top: var(--tr-space-3); }

/* Forms: full-width submit on phones (matches the product quote form). */
@media (max-width: 639px) {
	.tr-form [type="submit"] { width: 100%; }
}