/* ════════════════════════════════════════════════════════════════════
   HOME MOTION: high level ("yüksek"): "the press room"
   ════════════════════════════════════════════════════════════════════
   Front page only, after the light layer (assets/css/motion.css), via
   inc/enqueue.php. Everything below is armed by classes that
   assets/js/motion-high.js sets on <html> once GSAP + ScrollTrigger
   (assets/vendor/gsap/, loaded locally) are ready and the visitor allows
   motion:
     html.yk-on        any high-level motion is running
     html.yk-hero      hero: 4-plate separation (intro, scroll explode)
     html.yk-cursor-on registration-mark cursor (fine pointer, desktop)
     html.yk-web-on    categories: the web's control strip slides under
                       the static grid (desktop)
     html.yk-feed-on   categories: cards fed off the roller (touch/tablet)
     html.yk-press-on  process: press with four ink rollers (horizontal on
                       desktop, .yk-run vertical rail on phones)
   Nothing is pinned: every scroll-linked piece follows the scroll 1:1.
   Without JS, without GSAP, with prefers-reduced-motion: reduce or in
   forced colours none of these classes exist, so nothing here applies
   and the page is the plain Dört Kalıp design (plus the light layer
   where it is allowed). Decorations built by JS are aria-hidden and
   never take pointer events.
   ════════════════════════════════════════════════════════════════════ */

/* The light layer's scroll-driven plate drift would fight the plate
   stack below; on this page the hero plates are driven by GSAP. */
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
	@supports (animation-timeline: view()) {
		.yk-hero .tr-hero .tr-proof::before {
			animation: tr-register-c 1100ms var(--tr-ease-press) 120ms backwards;
			animation-timeline: auto;
		}

		.yk-hero .tr-hero .tr-proof::after {
			animation: tr-register-m 1100ms var(--tr-ease-press) 260ms backwards;
			animation-timeline: auto;
		}
	}
}

/* ════════════════════════════════════════════════════════════════════
   1. HERO: the proof sheet as a stack of separations
   ════════════════════════════════════════════════════════════════════
   The white paper moves from .tr-proof onto its own layer (.yk-paper) so
   the paper, the four plates and the two overprint blocks can each be
   placed in depth. Stacking (unchanged look): blocks (z -2) under the
   paper (z -1) under the printed content, plates on top (multiply). */
.yk-hero .tr-hero {
	position: relative;
}

.yk-hero .tr-hero .tr-proof {
	background: transparent;
	box-shadow: none;
}

.yk-hero .tr-hero .tr-proof::before,
.yk-hero .tr-hero .tr-proof::after {
	z-index: -2;
	transform-origin: 0 0;
}

.yk-hero .tr-hero .tr-proof::before { transform: var(--yk-tc, none); }
.yk-hero .tr-hero .tr-proof::after { transform: var(--yk-tm, none); }

.yk-paper {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--tr-color-paper);
	box-shadow: var(--tr-shadow-sheet);
	transform-origin: 0 0;
	pointer-events: none;
}

/* While the stack is apart, the real (accessible) content steps back and
   the K plate shows the same ink; it is back the moment the plates meet. */
.yk-exploded > :is(.tr-hero__title, .tr-hero__services, .tr-colorbar, .tr-proof__crop, .tr-proof__reg) {
	opacity: 0;
}

.yk-plate {
	--_ink: var(--tr-color-ink);
	position: absolute;
	inset: 0;
	opacity: 0;
	mix-blend-mode: var(--tr-overprint-blend, multiply);
	transform-origin: 0 0;
	pointer-events: none;
	user-select: none;
}

.yk-plate--c { --_ink: var(--tr-color-cyan); }
.yk-plate--m { --_ink: var(--tr-color-magenta); }
.yk-plate--y { --_ink: var(--tr-color-yellow); }

.yk-plates-on .yk-plate:not(.yk-plate--k),
.yk-exploded .yk-plate {
	opacity: 1;
}

.yk-exploded .yk-plate,
.yk-exploded .yk-paper {
	will-change: transform;
}

/* Plate "film": a tinted acetate with a hairline edge, only visible
   while the stack is apart (--yk-film 0 → 1). */
.yk-plate__film {
	position: absolute;
	inset: 0;
	border: 1px solid color-mix(in srgb, var(--_ink) 55%, transparent);
	background: color-mix(in srgb, var(--_ink) 6%, transparent);
	opacity: var(--yk-film, 0);
}

.yk-plate--k .yk-plate__film {
	border-color: color-mix(in srgb, var(--tr-color-ink) 35%, transparent);
	background: color-mix(in srgb, var(--tr-color-ink) 2.5%, transparent);
}

/* Separation name in the plate margin, as on real film. */
.yk-plate__label {
	position: absolute;
	top: 10px;
	left: 14px;
	font-size: 0.8125rem;
	font-weight: var(--tr-weight-heavy);
	font-stretch: var(--tr-font-width-wide);
	line-height: 1;
	color: var(--_ink);
	opacity: var(--yk-film, 0);
}

.yk-plate--y .yk-plate__label { color: color-mix(in srgb, var(--tr-color-yellow) 82%, var(--tr-color-ink)); } /* legible yellow tag */

.yk-plate .tr-proof__crop::before,
.yk-plate .tr-proof__crop::after {
	background: var(--_ink);
}

.yk-plate .tr-proof__reg {
	stroke: var(--_ink);
}

.yk-plate__h,
.yk-plate__svc,
.yk-plate__bar {
	position: absolute;
	margin: 0;
}

.yk-plate__h {
	color: var(--_ink);
	text-wrap: balance; /* same line breaks as the real h1 */
}

/* Parts that only print in the exploded view (at rest they would double
   the ink of the real colour squares and swatches under them). */
.yk-plate__x {
	visibility: hidden;
}

.yk-exploded .yk-plate__x {
	visibility: visible;
}

.yk-plate__svc { color: transparent; }
.yk-plate--k .yk-plate__svc { color: var(--tr-color-text-muted); }
.yk-plate__svc span { background: transparent !important; }
.yk-plate--c .yk-plate__svc span:nth-of-type(1) { background: var(--tr-color-cyan) !important; }
.yk-plate--m .yk-plate__svc span:nth-of-type(2) { background: var(--tr-color-magenta) !important; }

.yk-plate__bar > span { visibility: hidden; }
.yk-plate--c .yk-plate__bar > span:nth-child(1),
.yk-plate--m .yk-plate__bar > span:nth-child(2),
.yk-plate--y .yk-plate__bar > span:nth-child(3),
.yk-plate--k .yk-plate__bar > span:nth-child(n+4) { visibility: inherit; }

/* Halftone loupe: CMYK rosette that blooms around the pointer. */
.yk-halftone {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	mix-blend-mode: var(--tr-overprint-blend, multiply);
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   2. CURSOR: a registration mark whose plates trail when you move fast
   and lock into register on anything you can click
   ════════════════════════════════════════════════════════════════════ */
html.yk-cursor-on,
html.yk-cursor-on * {
	cursor: none !important;
}

html.yk-cursor-on :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), textarea, select, [contenteditable="true"]) {
	cursor: auto !important;
}

.yk-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483000;
	pointer-events: none;
	opacity: 0;
	transition: opacity 180ms ease;
}

.yk-cursor.is-visible { opacity: 1; }

.yk-cursor__plate {
	position: absolute;
	top: -18px;
	left: -18px;
	width: 36px;
	max-width: none;
	height: 36px;
	fill: none;
	stroke-width: 1.5;
	will-change: transform;
}

.yk-cursor__plate--c { stroke: var(--tr-color-cyan); }
.yk-cursor__plate--m { stroke: var(--tr-color-magenta); }
.yk-cursor__plate--k { stroke: var(--tr-color-ink); }
.yk-cursor.is-dark .yk-cursor__plate--k { stroke: var(--tr-color-text-on-dark); }

/* ════════════════════════════════════════════════════════════════════
   3. CATEGORIES (desktop): the paper web under a static grid
   ════════════════════════════════════════════════════════════════════
   The 3 × 2 grid never moves. Under it runs the web: a control strip
   printed on a paper band (fixed paper + fixed ink, so K and the tints read
   in any theme) with cut marks between the columns. The strip slides
   ±40 px with the scroll (--yk-web, motion-high.js). Absolutely placed:
   no layout change. */
.yk-web { position: relative; overflow-x: clip; }

.yk-web .tr-cat-grid { position: relative; }

.yk-web .tr-cat-grid::after {
	content: "";
	position: absolute;
	left: -100vw;
	right: -100vw;
	bottom: -30px;
	height: 12px;
	border-block: 1px solid var(--tr-color-border);
	background:
		repeating-linear-gradient(90deg,
			var(--tr-color-cyan) 0 24px,
			var(--tr-color-magenta) 0 48px,
			var(--tr-color-yellow) 0 72px,
			var(--tr-fixed-ink, var(--tr-color-ink)) 0 96px,
			color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 60%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 120px,
			color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 30%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 144px,
			color-mix(in srgb, var(--tr-fixed-ink, var(--tr-color-ink)) 12%, var(--tr-fixed-paper, var(--tr-color-paper))) 0 168px,
			var(--tr-fixed-paper, var(--tr-color-paper)) 0 216px) 0 2px / 100% 8px no-repeat,
		var(--tr-fixed-paper, var(--tr-color-paper));
	transform: translate3d(var(--yk-web, 0px), 0, 0);
	pointer-events: none;
}

/* Cut marks in the two column gutters (3 columns, 12 px gap), above and
   below the grid (static: they mark where the sheet is cut). */
.yk-web .tr-cat-grid::before {
	content: "";
	position: absolute;
	inset: -20px 0;
	background:
		linear-gradient(color-mix(in srgb, var(--tr-color-ink) 55%, transparent), color-mix(in srgb, var(--tr-color-ink) 55%, transparent)) calc(100% / 3 - 2px) 0 / 1px 12px,
		linear-gradient(color-mix(in srgb, var(--tr-color-ink) 55%, transparent), color-mix(in srgb, var(--tr-color-ink) 55%, transparent)) calc(100% / 3 - 2px) 100% / 1px 12px,
		linear-gradient(color-mix(in srgb, var(--tr-color-ink) 55%, transparent), color-mix(in srgb, var(--tr-color-ink) 55%, transparent)) calc(200% / 3 + 2px) 0 / 1px 12px,
		linear-gradient(color-mix(in srgb, var(--tr-color-ink) 55%, transparent), color-mix(in srgb, var(--tr-color-ink) 55%, transparent)) calc(200% / 3 + 2px) 100% / 1px 12px;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   4. PROCESS: the sheet runs under four ink rollers (desktop, no pin)
   ════════════════════════════════════════════════════════════════════ */
.yk-press .tr-section__head { margin-bottom: var(--tr-space-5); }

.yk-press .tr-process__list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.yk-press__svg {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--tr-space-5);
	overflow: hidden;
}

.yk-press__label {
	font: var(--tr-weight-heavy) 13px/1 var(--tr-font-sans);
	font-stretch: var(--tr-font-width-wide);
}

.yk-press__poster-text {
	font-family: var(--tr-font-sans);
	font-weight: var(--tr-weight-black);
	font-stretch: 64%;
	letter-spacing: -0.02em;
}

/* Step rules fill with ink as the sheet passes each roller (--yk-ink). */
.yk-press .tr-process__step,
.yk-run .tr-process__step {
	position: relative;
	border-top-color: var(--tr-color-border-dark);
}

/* Steps the sheet has not reached yet: only the (decorative) number and the
   title dim; the body text keeps its full contrast. Title at 0.55 on the
   dark band stays above 4.5:1. */
.yk-press-on .tr-process__step :is(.tr-process__num, .tr-process__title) {
	transition: opacity 320ms var(--tr-ease);
}

.yk-press-on .tr-process__step:not(.is-reached) :is(.tr-process__num, .tr-process__title) { opacity: 0.55; }

.yk-press .tr-process__step::before,
.yk-run .tr-process__step::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--_c);
	transform: scaleX(var(--yk-ink, 0));
	transform-origin: left;
}

html.yk-press-on .tr-process__num {
	transition: none !important;
	text-shadow:
		calc((1 - var(--yk-ink, 0)) * 0.1em) 0 0 var(--_g1, transparent),
		calc((1 - var(--yk-ink, 0)) * -0.1em) 0 0 var(--_g2, transparent) !important;
}

/* ════════════════════════════════════════════════════════════════════
   4b. PROCESS on phones: the vertical press run (.yk-run, motion-high.js)
   ════════════════════════════════════════════════════════════════════
   A 26 px rail in the free right-hand margin of the one-column list: one
   roller lies across it on each step's rule, and a small sheet travels
   down, picking up one plate per roller. */
.yk-run .tr-container { position: relative; }

.yk-run__rail {
	position: absolute;
	right: var(--tr-gutter);
	width: 30px;
	pointer-events: none;
}

/* The paper path: two dashed guides. */
.yk-run__rail::before {
	content: "";
	position: absolute;
	inset: 0 4px;
	border-inline: 1px dashed color-mix(in srgb, var(--tr-color-text-on-dark) 22%, transparent);
}

.yk-run__roller {
	--_c: var(--tr-color-cyan);
	position: absolute;
	top: 0;
	left: -5px;
	width: 40px;
	height: 14px;
	border-radius: 7px / 5px;
	background:
		repeating-linear-gradient(90deg, transparent 0 6px, color-mix(in srgb, var(--tr-color-text-on-dark) 22%, transparent) 6px 7px),
		linear-gradient(color-mix(in srgb, var(--tr-color-text-on-dark) 45%, transparent), transparent 55%, color-mix(in srgb, var(--tr-color-ink) 45%, transparent)),
		var(--_c);
	background-size: 7px 100%, 100% 100%, 100% 100%;
	box-shadow: 0 3px 6px -2px color-mix(in srgb, var(--tr-color-ink) 60%, transparent);
	will-change: transform;
}

.yk-run__roller--m { --_c: var(--tr-color-magenta); }
.yk-run__roller--y { --_c: var(--tr-color-yellow); }
.yk-run__roller--k { --_c: var(--tr-color-antrasit); outline: 1px solid var(--tr-color-border-dark); }

/* While the sheet is under it, the roller's knurl turns. */
.yk-run__roller.is-turning { animation: yk-roll-turn 260ms linear infinite; }

@keyframes yk-roll-turn { to { background-position: 7px 0, 0 0, 0 0; } }

/* The sheet: fixed paper (it is a physical object, in any theme), with
   the four plates as layers that print (scaleY 0 → 1) under each roller.
   Overprint multiplies because the sheet is always paper. */
.yk-run__sheet {
	position: absolute;
	top: 0;
	left: 3px;
	width: 24px;
	height: 46px;
	overflow: hidden;
	isolation: isolate;
	background: var(--tr-fixed-paper, var(--tr-color-paper));
	box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--tr-color-ink) 80%, transparent);
	will-change: transform;
}

.yk-run__ink {
	position: absolute;
	transform: scaleY(0);
	transform-origin: top;
	mix-blend-mode: multiply;
}

.yk-run__ink--c { top: 6px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--tr-color-cyan); }
.yk-run__ink--m { top: 6px; left: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--tr-color-magenta); }
.yk-run__ink--y { top: 13px; left: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--tr-color-yellow); }
.yk-run__ink--k {
	top: 29px;
	left: 4px;
	width: 16px;
	height: 11px;
	background:
		linear-gradient(var(--tr-fixed-ink, var(--tr-color-ink)), var(--tr-fixed-ink, var(--tr-color-ink))) 0 0 / 100% 3px no-repeat,
		linear-gradient(var(--tr-fixed-ink, var(--tr-color-ink)), var(--tr-fixed-ink, var(--tr-color-ink))) 0 5px / 70% 2px no-repeat,
		linear-gradient(var(--tr-fixed-ink, var(--tr-color-ink)), var(--tr-fixed-ink, var(--tr-color-ink))) 0 9px / 85% 2px no-repeat;
}

/* Keep step text clear of the rail. */
.yk-run .tr-process__step { padding-right: 40px; }

/* ════════════════════════════════════════════════════════════════════
   4c. CATEGORIES on touch screens: cards fed off the roller (feed())
   ════════════════════════════════════════════════════════════════════ */
html.yk-feed-on .tr-cat-grid > li {
	clip-path: none !important;
	transition: none !important;
}

/* Cards enter from the screen edge: the section clips them (clip, not
   hidden: no scroll container, nothing else changes). */
html.yk-feed-on .tr-section:has(.tr-cat-grid) { overflow-x: clip; }

html.yk-feed-on .tr-cat-card {
	box-shadow: inset 0 calc(var(--yk-plate, 1) * 6px) 0 var(--_plate, var(--tr-color-ink));
	transform-origin: 50% 0;
	will-change: transform;
}

/* ════════════════════════════════════════════════════════════════════
   5. SMALL TOUCHES
   ════════════════════════════════════════════════════════════════════ */

/* Magnetic buttons move with the independent `translate` property, so the
   theme's :active nudge (transform) still works. */
.yk-magnet { will-change: translate; }

/* CTA band: an ink roller lays the magenta down, leaving a wet sheen. */
html.yk-on .tr-cta-band {
	position: relative;
	transition: none !important;
}

/* overflow-x: clip keeps the roller inside the page when it leaves the band
   (it overhung the viewport by 7 px on phones); the end caps above and
   below stay visible. */
.yk-cta-host { position: relative; overflow-x: clip; }

.yk-ink-roller {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 46px;
	border-radius: 23px / 10px;
	background:
		linear-gradient(90deg, rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.5) 28%, rgb(255 255 255 / 0) 46%, rgb(0 0 0 / 0.3)),
		var(--tr-color-magenta);
	box-shadow: 10px 0 18px -8px rgb(27 28 31 / 0.45);
	opacity: 0;
	pointer-events: none;
}

.yk-ink-roller::before,
.yk-ink-roller::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 14px;
	height: 16px;
	translate: -50% 0;
	border-radius: 3px;
	background: linear-gradient(90deg, #3a3c41, #9a9da3 40%, #3a3c41);
}

.yk-ink-roller::before { top: -12px; }
.yk-ink-roller::after { bottom: -12px; }

.yk-cta-sheen {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 220px;
	background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.28) 70%, rgb(255 255 255 / 0.05));
	mix-blend-mode: soft-light;
	opacity: 0;
	pointer-events: none;
}

/* Printing: the static design, whatever state the motion was in. */
@media print {
	.yk-plate,
	.yk-halftone,
	.yk-cursor,
	.yk-ink-roller,
	.yk-cta-sheen,
	.yk-web .tr-cat-grid::before,
	.yk-web .tr-cat-grid::after,
	.yk-run__rail,
	.yk-press__svg { display: none !important; }

	.tr-cat-card { transform: none !important; opacity: 1 !important; }

	.tr-cta-band { clip-path: none !important; }
}