:root {
	/* 2026 restoran sahibi revizyonu: renk sistemi sahibin verdiği kesin
	   palete yaklaştırıldı (--cp-color-antrasit, --cp-color-koz-kirmizisi ve
	   --cp-color-acik-metin değerleri güncellendi; --cp-color-antrasit-alt,
	   --cp-color-narcicegi ve --cp-color-tugla-kahvesi yeni eklendi).
	   Değişken adları korunduğu için bu üç dosyadaki (main.css,
	   ordering-page.css - WooCommerce dahil) ~350+ var() kullanımı otomatik
	   günceller; hiçbiri tek tek değiştirilmedi. */
	--cp-color-antrasit: #1A1310;
	--cp-color-antrasit-alt: #241A15;
	--cp-color-sicak-krem: #F4EBDD;
	--cp-color-warm-white: #FCF9F4;
	/* Sahibin verdiği "koyu narçiçeği" #D64A1F tam kırık-beyaz buton metniyle
	   yalnızca 3.82:1 kontrast veriyor (WCAG AA normal metin eşiği 4.5:1) -
	   bu token en yaygın kullanım yeri olan dolu-zeminli CTA butonlarında
	   metinle birlikte kullanıldığından, aynı renk ailesinde ~%12 koyultulmuş
	   #BC411B kullanıldı (kırık-beyazla 4.74:1, AA geçiyor). Görsel olarak
	   neredeyse ayırt edilemeyecek kadar yakın; tam #D64A1F isteniyorsa bu
	   satır geri alınabilir. */
	--cp-color-koz-kirmizisi: #BC411B;
	--cp-color-narcicegi: #E4572E;
	--cp-color-tugla-kahvesi: #6B3A24;
	--cp-color-sicak-altin: #D49A45;
	--cp-color-koyu-metin: #24211D;
	--cp-color-acik-metin: #F6F0E7;

	/* Extended "gerçek fırın tuğlası" helper palette (see brief). Additive
	   to the palette above, not a replacement - the primary five stay the
	   same, these are used sparingly for surfaces, edges, section
	   transitions and secondary accents only. --cp-color-soot aliases
	   --cp-color-antrasit rather than duplicating its hex, since they're
	   literally the same value; it exists so decorative "ateş/köz" surfaces
	   can reference a thematically-named token instead of the structural
	   one. */
	--cp-color-flour: #FCF7EE;
	--cp-color-dough: #E9D8BD;
	--cp-color-brick-light: #C97850;
	--cp-color-brick: #A95635;
	--cp-color-brick-dark: #713522;
	--cp-color-fired-clay: #D18450;
	--cp-color-ember-orange: #E06C2E;
	--cp-color-soot: var(--cp-color-antrasit);
	--cp-color-mortar: #B8ADA0;
	--cp-color-erciyes: #5E6467;

	/* Homepage premium pass: a few more warm tones between "fırın tuğlası"
	   and "ateş", used sparingly (buttons, active states, small
	   decoration, warm gradients) - never as a large flat fill. Where a
	   requested tone is effectively identical to an existing token
	   (charcoal/antrasit, ember-red/köz-kırmızısı, antique-gold/sıcak-altın),
	   it's aliased instead of duplicated so there is still one source of
	   truth per color. --cp-color-flour already exists with a very close
	   value (#FCF7EE vs. the newly requested #F7F0E5) and is left
	   untouched - redefining it here would silently shift every existing
	   use of it. */
	--cp-color-charcoal: var(--cp-color-antrasit);
	--cp-color-ember-red: var(--cp-color-koz-kirmizisi);
	--cp-color-antique-gold: var(--cp-color-sicak-altin);
	--cp-color-warm-cream: var(--cp-color-sicak-krem);
	--cp-color-ember-dark: #2B1711;
	--cp-color-brick-brown: #6F3A27;
	--cp-color-terracotta: #A95032;
	--cp-color-coral-ember: #C45A3A;
	--cp-color-baked-clay: #B7653E;

	/* Mobil WhatsApp CTA'sı için tek kullanımlık ton: tanınabilir bir koyu
	   yeşil olsun diye markanın parlak/neon WhatsApp yeşilinden kaçınıp
	   sitenin antrasit tonuyla harmanlanmış, sönük bir "orman yeşili"
	   kullanılıyor - böylece buton rengi tanınır kalırken site paletinden
	   kopmuyor. */
	--cp-color-whatsapp-koyu: color-mix(in srgb, #2F6B4F 82%, var(--cp-color-antrasit) 18%);

	--cp-space-xs: 0.25rem;
	--cp-space-sm: 0.5rem;
	--cp-space-md: 1rem;
	--cp-space-lg: 2rem;
	--cp-space-xl: 4rem;

	--cp-container-width: 1200px;
	--cp-container-padding: 1rem;

	--cp-radius-sm: 4px;
	--cp-radius-md: 8px;
	--cp-radius-lg: 16px;

	--cp-transition-fast: 150ms ease;
	--cp-transition-base: 250ms ease;

	--cp-font-heading: Georgia, 'Times New Roman', Cambria, Times, serif;
	--cp-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--cp-z-header: 40;
	--cp-z-fab: 50;
	--cp-z-mobile-cta-bar: 50;
	--cp-z-mobile-nav: 60;

	--cp-preheader-height: 36px;
	--cp-mobile-cta-bar-height: 56px;
	/* Cıvıklı Pide wordmark+emblem lockup (see .cp-logo__img): rendered
	   image height at rest on desktop. The logo is a normal flex item now
	   (sized by height, width follows its own ~4.7:1 aspect ratio) instead
	   of the old absolutely-positioned bleeding shield, so there is no
	   separate "panel width" to reserve elsewhere any more. */
	--cp-logo-size: clamp(40px, 2.2vw + 30px, 52px);

	/* Conservative worst-case sticky-header height (pre-header + the nav
	   row at its largest), used to keep #hash anchor targets from landing
	   underneath the header - see the :target rule near the nav styles. */
	--cp-header-offset: calc(var(--cp-preheader-height) + var(--cp-logo-size) + 40px);

	/* Shared "worn leather" texture: a soft warm/dark corner glow plus a
	   fine diagonal crosshatch. Reused wherever a köz-kırmızısı surface
	   needs the same hand-tooled feel (logo shield, order CTA). */
	--cp-leather-pattern:
		radial-gradient(120% 90% at 22% 12%, color-mix(in srgb, var(--cp-color-sicak-altin) 30%, var(--cp-color-koz-kirmizisi)) 0%, transparent 55%),
		radial-gradient(140% 100% at 85% 95%, color-mix(in srgb, var(--cp-color-antrasit) 40%, var(--cp-color-koz-kirmizisi)) 0%, transparent 60%),
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--cp-color-sicak-altin) 7%, transparent) 0 1px, transparent 1px 15px),
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cp-color-antrasit) 9%, transparent) 0 1px, transparent 1px 15px);

	/* Homepage section rhythm: one spacing/type scale reused by every
	   front-page.php section so vertical rhythm and heading sizes stay
	   consistent site-wide instead of being tuned per section. */
	--cp-section-py: clamp(3.5rem, 3rem + 3vw, 6.5rem);
	--cp-heading-xl: clamp(2.1rem, 1.5rem + 3vw, 3.75rem);
	--cp-heading-lg: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
	--cp-measure: 60ch;
}

/* Typed registration for --cp-dock-alpha (see .cp-mobile-cta-bar in the
   mobile CTA bar section): without this, browsers treat a plain custom
   property as an opaque token, so a change to it can't be smoothly
   interpolated - the transition declared on ::before would just snap
   instantly instead of fading. Registering it as a <number> makes the
   browser animate the number itself, which in turn animates every
   calc(var(--cp-dock-alpha) * ...) value that depends on it. */
@property --cp-dock-alpha {
	syntax: '<number>';
	inherits: true;
	initial-value: 0.18;
}

/* Skip link */

.cp-skip-link {
	position: absolute;
	top: -999px;
	left: var(--cp-space-sm);
	z-index: 100;
	padding: var(--cp-space-sm) var(--cp-space-md);
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	border-radius: var(--cp-radius-sm);
	font-family: var(--cp-font-body);
	text-decoration: none;
}

.cp-skip-link:focus {
	top: var(--cp-space-sm);
}

/* Visually-hidden utility */

.cp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Shared focus visibility (scoped to our own components only) */

.cp-header a:focus-visible,
.cp-header button:focus-visible,
.cp-mobile-nav a:focus-visible,
.cp-mobile-nav button:focus-visible,
.cp-footer a:focus-visible,
.cp-main a:focus-visible,
.cp-main button:focus-visible,
.cp-btn:focus-visible,
.cp-order-fab:focus-visible {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 2px;
}

/* Buttons */

.cp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cp-space-xs);
	padding: 0.65em 1.4em;
	border-radius: var(--cp-radius-sm);
	font-family: var(--cp-font-body);
	font-weight: 600;
	font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
	text-decoration: none;
	line-height: 1.2;
	transition: background-color var(--cp-transition-fast), transform var(--cp-transition-fast);
	/* Some buttons are real <a href> elements (e.g. "Sipariş Ver", cart/
	   checkout CTAs) - without this, mobile Chrome/Safari flash their own
	   default translucent blue "tap highlight" overlay on every tap/click,
	   which read as the button text itself turning blue. */
	-webkit-tap-highlight-color: transparent;
}

.cp-btn:active {
	transform: scale(0.97);
}

/* Belt-and-braces: an <a class="cp-btn cp-btn--cta"> otherwise has no
   explicit :link/:visited color, so once a browser has that href in its
   history, its own default visited-link blue can show through instead of
   the intended white text - explicit here for every interaction state. */
.cp-btn--cta:link,
.cp-btn--cta:visited,
.cp-btn--cta:hover,
.cp-btn--cta:active,
.cp-btn--cta:focus {
	color: var(--cp-color-acik-metin);
}

/* Base icon size for every .cp-btn__icon SVG. Without this, an <svg> with
   only a viewBox (no width/height attributes) falls back to the browser's
   300x150 replaced-element default and badly distorts the button - this
   was previously only fixed for .cp-order-cta's own icon. */

.cp-btn__icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.cp-btn--cta {
	background: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-acik-metin);
}

.cp-btn--cta:hover {
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 85%, black);
}

/* Announcement bar */

.cp-announcement {
	background: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-acik-metin);
}

.cp-announcement__inner {
	max-width: var(--cp-container-width);
	margin: 0 auto;
	padding: var(--cp-space-xs) var(--cp-container-padding);
	text-align: center;
	font-family: var(--cp-font-body);
	font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
}

.cp-announcement__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Pre-header: thin dark utility strip, part of the sticky header unit.
   Collapses smoothly to zero height (max-height + its own border) once
   main.js marks the header .is-scrolled, instead of just scrolling out of
   flow - see the .cp-header/.cp-mainnav sticky rules below. 120px is a
   generous cap above its real content height so normal wrapping at
   tablet widths is never clipped while at rest. */

.cp-preheader {
	overflow: hidden;
	max-height: 120px;
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	border-bottom: 2px solid var(--cp-color-sicak-altin);
	opacity: 1;
	/* Not transitioned. Measured with a real Chrome performance trace:
	   animating max-height here forces the sticky header (and everything
	   below it) to reflow on every single frame for the full transition
	   duration - ~1.9s of cumulative raster work for one toggle, the
	   actual cause of the stutter, confirmed by isolating it from plain
	   scrolling (which costs ~13ms). Collapsing it in one frame instead
	   keeps the "hide the pre-header" effect but as a single cheap
	   layout pass instead of ~15 expensive ones. */
}

.is-scrolled .cp-preheader {
	max-height: 0;
	opacity: 0;
	border-bottom-width: 0;
	pointer-events: none;
}

.cp-preheader__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px var(--cp-space-lg);
	max-width: var(--cp-container-width);
	min-height: var(--cp-preheader-height);
	margin: 0 auto;
	padding: 6px var(--cp-container-padding);
	font-family: var(--cp-font-body);
	font-size: clamp(0.72rem, 0.68rem + 0.1vw, 0.8rem);
}

.cp-preheader__info,
.cp-preheader__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	min-width: 0;
}

.cp-preheader__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.cp-preheader__icon {
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	color: var(--cp-color-sicak-altin);
}

.cp-preheader__address {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 32ch;
}

.cp-preheader a {
	color: var(--cp-color-acik-metin);
	text-decoration: none;
}

.cp-preheader a:hover {
	color: var(--cp-color-sicak-altin);
}

.cp-preheader__sep {
	color: color-mix(in srgb, var(--cp-color-acik-metin) 40%, transparent);
}

.cp-preheader .cp-status {
	color: var(--cp-color-acik-metin);
}

/* Header shell: the whole header (pre-header + nav) sticks to the top of
   the viewport as one unit, below the WP admin bar when logged in (WP core
   exposes --wp-admin--admin-bar--height: 32px desktop / 46px mobile). It
   never disappears on scroll - main.js only adds .is-scrolled once past a
   ~100px threshold, which the rules below use to fade the pre-header out
   and compact the nav row, all with smooth transitions so nothing snaps
   or jumps. */

.cp-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: var(--cp-z-header);
	transition: box-shadow var(--cp-transition-base);
	/* Without this, collapsing the pre-header shifts the document height
	   right where the browser's scroll-anchoring heuristic is watching,
	   so it "helpfully" nudges scrollY back to compensate - which can push
	   it back under main.js's threshold and immediately re-expand the
	   header, flip-flopping in a feedback loop. This opts the whole
	   sticky unit out of that adjustment. */
	overflow-anchor: none;
	/* Promotes the whole header to its own GPU compositor layer. Measured
	   with a real Chrome performance trace: without this, the header's
	   layered gradients (leather texture on the logo shield and CTA) were
	   being re-rasterized on nearly every scroll frame (~1.9s of
	   cumulative raster work during a single scroll past the threshold -
	   the actual jank, not layout). Once promoted, the header is painted
	   once and then just composited (cheap) while scrolling. */
	will-change: transform;
}

.cp-header.is-scrolled {
	box-shadow: 0 4px 18px color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
}

/* Keeps in-page #hash targets (and any future TOC/menu anchors) from
   landing underneath the sticky header. Uses the worst-case (full-height,
   pre-scroll) header size so content is never hidden even on a fresh
   #hash page load, before any scroll has happened to compact the header. */

:target {
	scroll-margin-top: var(--cp-header-offset);
}

.cp-mainnav {
	background: var(--cp-color-sicak-krem);
	border-bottom: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
}

.cp-mainnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-lg);
	max-width: var(--cp-container-width);
	margin: 0 auto;
	padding-block: 8px;
	padding-inline: var(--cp-container-padding);
	/* Not transitioned: a 4px padding change is imperceptible to animate
	   and just adds another layout recalculation per frame alongside the
	   pre-header's own collapse - see the perf note on .cp-header. */
}

.is-scrolled .cp-mainnav__inner {
	padding-block: 4px;
}

/* Logo: single Cıvıklı Pide wordmark+emblem lockup image
   (assets/images/civikli-pide-logo-son.webp - final design, bundled with
   the theme, not admin-swappable). A normal flex item, not an absolutely
   positioned bleeding shield - sized by height (.cp-logo__img), width
   follows automatically from the image's own ~4.7:1 aspect ratio. No
   background box: the wordmark and mountain silhouette are pale cream, so
   a soft dark drop-shadow (not a visible plate/badge) is applied directly
   to the artwork's own silhouette for contrast, keeping the logo itself
   fully transparent against any header background. */

.cp-logo {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	max-width: 50vw;
	margin-right: var(--cp-space-md);
	text-decoration: none;
	color: var(--cp-color-antrasit);
	/* Not transitioned, same reasoning as the old spacer/frame: a size
	   change animated every frame for ~250ms was the earlier source of
	   scroll jank. Snapping via .is-scrolled keeps the compact effect
	   smooth-looking without that per-frame layout recompute cost. */
}

.cp-logo__img {
	display: block;
	width: auto;
	height: var(--cp-logo-size);
	object-fit: contain;
	filter:
		drop-shadow(0 0 3px rgba(10, 8, 6, 0.75))
		drop-shadow(0 1px 5px rgba(10, 8, 6, 0.45));
}

/* Round emblem variant (.cp-logo--badge, toggled by the "Logoda Yuvarlak
   Amblemi Kullan" setting): the badge replaces the oven-arch mark that used
   to be baked into the left side of the lockup image, sitting next to the
   wordmark-only crop. Scaled to 1.28x --cp-logo-size because the wordmark
   artwork carries its own transparent padding above/below the glyphs, so
   matching the two raw heights 1:1 would render the badge visually smaller
   than the old emblem it replaces. */

.cp-logo--badge {
	gap: clamp(6px, 0.5vw + 3px, 10px);
}

.cp-logo__badge {
	display: block;
	width: auto;
	height: calc(var(--cp-logo-size) * 1.28);
	object-fit: contain;
	flex-shrink: 0;
	/* No drop-shadow here, unlike .cp-logo__img: the badge is a filled disc
	   with its own dark wooden rim, so a shadow only muddies that edge into
	   a grey halo instead of adding contrast the way it does for the
	   wordmark's thin cream lettering. */
}

.is-scrolled .cp-logo__badge {
	height: calc(var(--cp-logo-size) * 1.28 * 0.72);
}

/* Black-text variant (every page except the homepage): the plain light
   .cp-mainnav background already gives it full contrast on its own, so the
   dark drop-shadow built for the homepage's cream-text-over-video variant
   is dropped here rather than left stacking uselessly on top of it. */

.cp-logo__img--dark {
	filter: none;
}

.is-scrolled .cp-logo__img {
	height: calc(var(--cp-logo-size) * 0.72);
}

/* Desktop/tablet hide-on-scroll-down / peek-on-scroll-up (641px and up; the
   narrower range has its own version further below, since the mobile header
   is a different size and, on the homepage, transparent). The header is
   already position:sticky at every width, so the transform below is all
   that's needed to move it.

   Scoped to the same two page groups the mobile treatment covers -
   body.cp-header-autohide (every page except the digital menu / online
   ordering / cart / checkout, see
   civikli_pide_header_autohide_body_class() in functions.php) and
   body.cp-is-home - so the excluded pages keep their permanently-visible
   header at this width too. */

@media screen and (min-width: 641px) {
	body.cp-header-autohide .cp-header,
	body.cp-is-home .cp-header {
		transform: translateY(0);
		transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow var(--cp-transition-base);
	}

	body.cp-header-autohide .cp-header.is-header-hidden,
	body.cp-is-home .cp-header.is-header-hidden {
		transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
	}

	body.cp-header-autohide .cp-header.is-header-peek,
	body.cp-is-home .cp-header.is-header-peek {
		transform: translateY(0);
	}

	/* The peek state is deliberately shorter than the at-rest header: the
	   pre-header row collapses away and the nav row tightens, so scrolling
	   back up returns navigation without handing back the full original
	   height. These mirror the .is-scrolled compact treatment so the two
	   states don't read as different headers. */
	body.cp-header-autohide .cp-header.is-header-peek .cp-preheader,
	body.cp-is-home .cp-header.is-header-peek .cp-preheader {
		max-height: 0;
		opacity: 0;
		border-bottom-width: 0;
		pointer-events: none;
		overflow: hidden;
	}

	body.cp-header-autohide .cp-header.is-header-peek .cp-mainnav__inner,
	body.cp-is-home .cp-header.is-header-peek .cp-mainnav__inner {
		padding-block: 6px;
	}

	body.cp-header-autohide .cp-header.is-header-peek .cp-logo__img,
	body.cp-is-home .cp-header.is-header-peek .cp-logo__img {
		height: calc(var(--cp-logo-size) * 0.68);
	}

	body.cp-header-autohide .cp-header.is-header-peek .cp-logo__badge,
	body.cp-is-home .cp-header.is-header-peek .cp-logo__badge {
		height: calc(var(--cp-logo-size) * 1.28 * 0.68);
	}
}

/* Mobile hide-on-scroll-down / peek-on-scroll-up, for every page except the
   homepage (own transparent-header version below, body.cp-is-home) and the
   digital menu / online ordering / cart / checkout (excluded entirely - see
   civikli_pide_header_autohide_body_class() in functions.php). Same
   mechanics as the homepage's own .is-header-hidden/.is-header-peek
   (initHeaderReveal() in main.js drives both), just on top of this
   header's normal solid background instead of a transparent/video one. */

@media screen and (max-width: 640px) {
	/* Higher specificity than the generic ".cp-header { position: static }"
	   mobile rule further below (which intentionally leaves the header
	   scrolling away in normal flow on every other mobile page) - an
	   autohide page needs the header pinned near the top of the viewport at
	   all scroll positions so there is something fixed in place for the
	   .is-header-hidden/.is-header-peek transform to actually show or hide;
	   position:sticky (not fixed) is what desktop already uses for the same
	   reason, and needs no extra top-padding on the page content below it,
	   since a sticky element still reserves its own space in normal flow. */
	body.cp-header-autohide .cp-header {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		overflow-anchor: none;
		transform: translateY(0);
		transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* -100% alone only clears the header's own height - when a logged-in
	   admin is viewing the site, the sticky `top` offset above also reserves
	   var(--wp-admin--admin-bar--height) below the true viewport top for the
	   admin bar, so a translate of just -100% still left that many px of the
	   "hidden" header poking into view. Real (logged-out) visitors never
	   have that custom property set, so the extra term is simply 0 for them. */
	body.cp-header-autohide .cp-header.is-header-hidden {
		transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
	}

	/* See the matching body.cp-is-home rule: without an explicit
	   translateY(0) the header has no transform to animate back to when
	   .is-header-hidden is removed, so the reveal snapped instead of
	   sliding. */
	body.cp-header-autohide .cp-header.is-header-peek {
		transform: translateY(0);
	}

	body.cp-header-autohide .cp-header.is-header-peek .cp-preheader {
		max-height: 0;
		opacity: 0;
		border-bottom-width: 0;
		pointer-events: none;
	}

	body.cp-header-autohide .cp-header.is-header-peek .cp-mainnav__inner {
		padding-block: 4px;
	}

	body.cp-header-autohide .cp-header.is-header-peek .cp-logo__img {
		height: calc(var(--cp-logo-size) * 0.72);
	}

	body.cp-header-autohide .cp-header.is-header-peek .cp-logo__badge {
		height: calc(var(--cp-logo-size) * 1.28 * 0.72);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.cp-header-autohide .cp-header,
	body.cp-is-home .cp-header {
		transition-duration: 1ms;
	}

	.cp-hero__scrollcue {
		transition-duration: 1ms;
	}
}

/* Tablet range: the nav list (6 items, plus the order button) is tight
   enough here that the full-size logo can push it into wrapping onto a
   second line. Matches the same 641-1100px range the nav's own tightest
   pinch point was measured at previously. */

@media screen and (min-width: 641px) and (max-width: 1100px) {
	.cp-logo__img {
		height: clamp(32px, 3vw + 16px, 40px);
	}

	.is-scrolled .cp-logo__img {
		height: 28px;
	}

	.cp-logo__badge {
		height: clamp(41px, 3.84vw + 20px, 51px);
	}

	.is-scrolled .cp-logo__badge {
		height: 36px;
	}
}

@media screen and (max-width: 640px) {
	:root {
		--cp-logo-size: clamp(34px, 9vw + 14px, 42px);
	}

	/* Mobile header is not sticky: it sits in normal document flow and
	   scrolls away with the page like any other element, matching main.js's
	   own mobileQuery (max-width: 640px) which never adds .is-scrolled at
	   this width. The compositor-layer/scroll-anchoring opt-outs above only
	   matter for the sticky desktop header, so they're switched off here
	   too rather than left promoting a static element for nothing. */

	.cp-header {
		position: static;
		top: auto;
		will-change: auto;
		overflow-anchor: auto;
	}

	/* Defensive: even though main.js already forces isScrolled false under
	   this breakpoint (and strips .is-scrolled on the mobile<->desktop
	   matchMedia change), a header that briefly carries the class while
	   the viewport crosses this boundary (e.g. mid-resize) must not show
	   any of the compact-mode visual changes on mobile. */

	.cp-header.is-scrolled {
		box-shadow: none;
	}

	.is-scrolled .cp-mainnav__inner {
		padding-block: 8px;
	}

	.is-scrolled .cp-order-cta {
		min-height: 38px;
		font-size: 0.74rem;
	}

	/* Mobile drops the pre-header entirely (not just on scroll) - only the
	   compact nav row remains. main.js also never adds .is-scrolled at
	   this width, so the nav row itself stays a fixed, already-compact
	   size with no scroll-triggered shrinking/motion here. */

	.cp-preheader {
		display: none;
	}
}

/* Desktop navigation */

.cp-nav {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.cp-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--cp-space-xl);
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--cp-font-body);
}

.cp-nav__list li {
	position: relative;
}

.cp-nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: var(--cp-space-xs);
	color: var(--cp-color-koyu-metin);
	text-decoration: none;
	font-size: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);
	font-weight: 500;
	white-space: nowrap;
	/* Not transitioned: font-size is a layout property (reflows every
	   nav item on every frame); this ~1px change isn't worth animating. */
}

.is-scrolled .cp-nav__list a {
	font-size: clamp(0.78rem, 0.74rem + 0.1vw, 0.86rem);
}

/* Geometric gold/ember active-page indicator: a thin gold line with a
   small rotated ember diamond centered on top of it. */

.cp-nav__list a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8px;
	height: 1px;
	background: var(--cp-color-sicak-altin);
	opacity: 0;
	transform: scaleX(0);
	transition: opacity var(--cp-transition-fast), transform var(--cp-transition-fast);
}

.cp-nav__list a::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -11px;
	width: 7px;
	height: 7px;
	background: var(--cp-color-koz-kirmizisi);
	border: 1px solid var(--cp-color-sicak-altin);
	transform: translateX(-50%) rotate(45deg) scale(0);
	transition: transform var(--cp-transition-fast);
}

.cp-nav__list a:hover::after,
.cp-nav__list a:focus-visible::after,
.cp-nav__list a[aria-current="page"]::after,
.cp-nav__list .current-menu-item > a::after {
	opacity: 1;
	transform: scaleX(1);
}

.cp-nav__list a:hover::before,
.cp-nav__list a:focus-visible::before,
.cp-nav__list a[aria-current="page"]::before,
.cp-nav__list .current-menu-item > a::before {
	transform: translateX(-50%) rotate(45deg) scale(1);
}

.cp-nav__list a[aria-current="page"],
.cp-nav__list .current-menu-item > a {
	color: var(--cp-color-koz-kirmizisi);
	font-weight: 600;
}

/* Basic dropdown readiness for menu items with children */

.cp-nav__list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--cp-z-header);
	min-width: 200px;
	margin: var(--cp-space-sm) 0 0;
	padding: var(--cp-space-xs) 0;
	list-style: none;
	background: var(--cp-color-sicak-krem);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
	border-radius: var(--cp-radius-sm);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--cp-color-antrasit) 14%, transparent);
}

.cp-nav__list li:hover > .sub-menu,
.cp-nav__list li:focus-within > .sub-menu {
	display: block;
}

.cp-nav__list .sub-menu a {
	display: block;
	padding: var(--cp-space-xs) var(--cp-space-md);
}

.cp-nav__list .sub-menu a::after,
.cp-nav__list .sub-menu a::before {
	display: none;
}

/* Header actions: order CTA + mobile toggle */

.cp-header__actions {
	display: flex;
	align-items: center;
	gap: var(--cp-space-md);
	flex-shrink: 0;
}

/* Ribbon-flag shape: flat on the left, a single arrow point on the right -
   same köz-kırmızısı leather texture as the logo shield, and its own gold
   frame, so both geometric accents read as one design language. */

.cp-order-cta {
	position: relative;
	min-height: 44px;
	padding-right: calc(1.4em + 12px);
	border: 2px solid var(--cp-color-sicak-altin);
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
	background: var(--cp-leather-pattern), var(--cp-color-koz-kirmizisi);
	font-size: 1em;
	/* Only transform transitions here (hover lift, active press) - both
	   compositor-only and cheap. min-height/font-size used to also
	   transition for the is-scrolled shrink, but that meant yet another
	   layout recalculation stacked on top of the pre-header's own collapse
	   every frame; it now snaps instantly alongside the logo. */
	transition: transform var(--cp-transition-fast);
}

.is-scrolled .cp-order-cta {
	min-height: 38px;
	font-size: 0.85em;
}

.cp-order-cta:hover,
.cp-order-cta:focus-visible {
	background: var(--cp-leather-pattern), color-mix(in srgb, var(--cp-color-koz-kirmizisi) 85%, black);
	transform: translateY(-1px);
}

.cp-order-cta .cp-btn__icon {
	transition: transform var(--cp-transition-fast);
}

.cp-order-cta:hover .cp-btn__icon,
.cp-order-cta:focus-visible .cp-btn__icon {
	transform: translateX(3px);
}

/* Smaller order CTA on mobile: same ribbon shape, tighter padding. Placed
   after the base/hover/is-scrolled .cp-order-cta rules above (even though
   it belongs with the other ≤640px overrides higher up in the file) so it
   actually wins the cascade at equal specificity - a rule with the same
   selector positioned earlier in source order would otherwise lose to
   these later base rules regardless of the media query. */

@media screen and (max-width: 640px) {
	/* Removed from the mobile header entirely - the right-edge
	   .cp-order-fab tab (see its own rules further down) already covers
	   "sipariş ver" on mobile, so this icon-only header button was
	   redundant next to the hamburger toggle. */
	.cp-order-cta {
		display: none;
	}

	.cp-order-cta .cp-btn__icon {
		width: 11px;
		height: 11px;
	}
}

/* Open/closed status badge (used in the pre-header and mobile panel) */

.cp-status {
	display: inline-flex;
	align-items: center;
	gap: var(--cp-space-xs);
	margin: 0;
	font-family: var(--cp-font-body);
	font-size: clamp(0.75rem, 0.7rem + 0.1vw, 0.85rem);
	white-space: nowrap;
}

.cp-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: color-mix(in srgb, var(--cp-color-acik-metin) 45%, transparent);
}

.cp-status--open .cp-status__dot {
	background: #6FA65A;
}

.cp-status__closing {
	color: color-mix(in srgb, var(--cp-color-acik-metin) 65%, transparent);
}

/* Desktop header account button/dropdown (see template-parts/account/
   header-account.php + initAccountMenu() in main.js). Compact, icon-led,
   never a large filled CTA - two big "Giriş Yap"/"Kayıt Ol" buttons were
   explicitly ruled out. Mirrors .cp-nav__list a's own koyu-metin/homepage
   acik-metin color swap so it stays legible in both header states. Hidden
   below 860px (same breakpoint as the desktop nav) in favor of the mobile
   hamburger's own account area. */

.cp-account-menu {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.cp-account-menu__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 40px;
	padding: 0 0.7rem;
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 18%, transparent);
	border-radius: 999px;
	color: var(--cp-color-koyu-metin);
	text-decoration: none;
	font-family: var(--cp-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
}

.cp-account-menu__trigger:hover,
.cp-account-menu__trigger:focus-visible {
	border-color: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 50%, transparent);
	color: var(--cp-color-koz-kirmizisi);
}

.cp-account-menu__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.cp-account-menu__chevron {
	width: 9px;
	height: 6px;
	flex-shrink: 0;
	transition: transform var(--cp-transition-fast);
}

.cp-account-menu__trigger[aria-expanded="true"] .cp-account-menu__chevron {
	transform: rotate(180deg);
}

.cp-account-menu__panel[hidden] {
	display: none;
}

.cp-account-menu__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: var(--cp-z-header);
	min-width: 190px;
	display: flex;
	flex-direction: column;
	padding: 0.4rem;
	background: var(--cp-color-warm-white);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
	border-radius: var(--cp-radius-md);
	box-shadow: 0 14px 30px color-mix(in srgb, var(--cp-color-antrasit) 16%, transparent);
}

.cp-account-menu__panel a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 0 0.75rem;
	border-radius: var(--cp-radius-sm);
	color: var(--cp-color-koyu-metin);
	text-decoration: none;
	font-family: var(--cp-font-body);
	font-size: 0.88rem;
}

.cp-account-menu__panel a:hover,
.cp-account-menu__panel a:focus-visible {
	background: color-mix(in srgb, var(--cp-color-narcicegi) 10%, transparent);
	color: var(--cp-color-koz-kirmizisi);
}

.cp-account-menu__panel .cp-account-menu__logout {
	margin-top: 0.25rem;
	border-top: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 10%, transparent);
	border-radius: 0;
	padding-top: 0.55rem;
}

body.cp-is-home .cp-account-menu__trigger {
	border-color: color-mix(in srgb, var(--cp-color-acik-metin) 35%, transparent);
	color: var(--cp-color-acik-metin);
}

body.cp-is-home .cp-account-menu__trigger:hover,
body.cp-is-home .cp-account-menu__trigger:focus-visible {
	border-color: var(--cp-color-acik-metin);
	color: var(--cp-color-acik-metin);
}

/* Mobile menu toggle */

.cp-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 20%, transparent);
	border-radius: var(--cp-radius-sm);
	cursor: pointer;
}

.cp-menu-toggle__box {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cp-menu-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--cp-color-antrasit);
}

/* Mobile off-canvas navigation */

.cp-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--cp-z-mobile-nav);
}

.cp-mobile-nav[hidden] {
	display: none;
}

.cp-mobile-nav__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--cp-color-antrasit) 60%, transparent);
	opacity: 0;
	transition: opacity 240ms ease;
}

/* The panel slides on transform only (never `right`/`width`, which would
   lay out and paint every frame). `contain` stops the browser from
   re-evaluating anything outside the panel while it moves, and will-change
   is set on the open state rather than permanently, so a closed menu -
   which is every page load - costs no extra layer memory. */
.cp-mobile-nav__panel {
	contain: layout paint;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(320px, 86vw);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: var(--cp-space-lg) var(--cp-space-md);
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	border-left: 3px solid var(--cp-color-sicak-altin);
	transform: translateX(100%);
	/* Decelerating curve: fast off the mark, easing into place. A
	   symmetric `ease` made the same 250ms feel noticeably slower, because
	   the panel spends its first frames barely moving. */
	transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-lg);
}

.cp-mobile-nav.is-open .cp-mobile-nav__overlay {
	opacity: 1;
}

.cp-mobile-nav.is-open .cp-mobile-nav__panel {
	transform: translateX(0);
	will-change: transform;
}

.cp-mobile-nav__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-md);
}

.cp-mobile-nav__header .cp-brand__wordmark {
	font-size: 1.15rem;
	color: var(--cp-color-acik-metin);
}

.cp-mobile-nav__close {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: transparent;
	color: var(--cp-color-acik-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 30%, transparent);
	border-radius: var(--cp-radius-sm);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.cp-mobile-nav__info {
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-sm);
	padding: var(--cp-space-sm) var(--cp-space-md);
	background: color-mix(in srgb, var(--cp-color-acik-metin) 6%, transparent);
	border-radius: var(--cp-radius-sm);
}

.cp-mobile-nav .cp-status {
	color: var(--cp-color-acik-metin);
}

.cp-mobile-nav__phone,
.cp-mobile-nav__address {
	color: var(--cp-color-acik-metin);
	text-decoration: none;
	font-size: 0.9rem;
}

.cp-mobile-nav__address {
	opacity: 0.85;
}

.cp-mobile-nav__social {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-mobile-nav__social a {
	color: var(--cp-color-sicak-altin);
	text-decoration: none;
	font-size: 0.85rem;
}

.cp-mobile-nav__list,
.cp-mobile-nav__cta {
	font-family: var(--cp-font-body);
}

.cp-mobile-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.cp-mobile-nav__list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--cp-color-acik-metin);
	text-decoration: none;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
	border-bottom: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 10%, transparent);
}

.cp-mobile-nav__list li:last-child > a {
	border-bottom: none;
}

.cp-mobile-nav__list .sub-menu {
	list-style: none;
	margin: 0 0 0 var(--cp-space-md);
	padding: 0;
}

/* Responsive header/nav breakpoint. Without JS the desktop nav list stays
   visible (and wraps) at every width, so basic navigation is never lost;
   the hamburger + off-canvas experience only replaces it once main.js has
   confirmed it can run. */

@media screen and (max-width: 860px) {
	.cp-preheader__info,
	.cp-preheader__item--social {
		display: none;
	}

	.cp-preheader__inner {
		justify-content: flex-end;
	}

	body.cp-js .cp-nav {
		display: none;
	}

	body.cp-js .cp-menu-toggle {
		display: inline-flex;
	}

	/* The desktop account button/dropdown is replaced by the hamburger
	   panel's own account area below this same breakpoint - showing both
	   would be redundant and cramped next to the toggle. Guarded by
	   body.cp-js like .cp-nav above, so a no-JS visitor still gets the
	   plain header link rather than losing account access entirely. */
	body.cp-js .cp-account-menu {
		display: none;
	}

	.cp-mainnav__inner {
		gap: var(--cp-space-md);
	}
}

@media screen and (max-width: 480px) {
	/* Keep the order button an icon-only touch target at narrow widths so
	   the header never overflows; the label stays available to assistive
	   tech instead of being removed with display:none. This threshold is
	   deliberately generous (480px, not just 360px) since text-width is
	   the least predictable part of the header's row budget. */
	.cp-order-cta span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.cp-order-cta {
		padding-left: 0.7em;
	}
}

/* Body scroll lock while the mobile panel is open */

/* overscroll-behavior stops a scroll gesture that reaches the end of the
   locked body from chaining to the page behind it, which `overflow: hidden`
   alone does not prevent on touch devices. */
body.cp-scroll-lock {
	overflow: hidden;
	overscroll-behavior: none;
}

/* Main content landmark */

.cp-main {
	display: block;
	/* Promotes the page content to its own compositor layer. Measured
	   with a real Chrome trace: when the sticky header's height changes
	   (pre-header collapsing), everything below it has to reposition -
	   without this, the browser was repainting/re-rasterizing the whole
	   page to do that (~1.9s of raster work for one toggle) instead of
	   just shifting an already-painted layer (~40ms, confirmed after
	   adding this). This is what fixed the stutter; the .cp-header
	   layer promotion alone was not enough. */
	will-change: transform;
}

/* Homepage (front-page.php). Shared layout primitives first, then one
   block per section, in source order: Hero, Story, Flavors, Visit. */

.cp-container {
	max-width: var(--cp-container-width);
	margin-inline: auto;
	padding-inline: var(--cp-container-padding);
}

.cp-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--cp-space-sm);
	color: var(--cp-color-koz-kirmizisi);
	font-family: var(--cp-font-body);
	font-size: clamp(0.72rem, 0.68rem + 0.1vw, 0.82rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.cp-kicker--light {
	color: var(--cp-color-sicak-altin);
}

.cp-kicker__mark {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	background: var(--cp-color-koz-kirmizisi);
	border: 1px solid var(--cp-color-sicak-altin);
	transform: rotate(45deg);
}

.cp-kicker--light .cp-kicker__mark {
	background: var(--cp-color-sicak-altin);
}

.cp-heading-lg {
	margin: 0 0 var(--cp-space-md);
	max-width: 22ch;
	font-family: var(--cp-font-heading);
	font-size: var(--cp-heading-lg);
	line-height: 1.15;
	color: var(--cp-color-koyu-metin);
}

.cp-heading-lg--light {
	color: var(--cp-color-acik-metin);
}

.cp-section-head {
	max-width: 640px;
	margin: 0 auto var(--cp-space-xl);
	text-align: center;
}

.cp-section-head--tight {
	margin-bottom: var(--cp-space-lg);
}

.cp-section-head .cp-kicker {
	justify-content: center;
}

.cp-section-head .cp-heading-lg {
	max-width: none;
}

.cp-section-head__note {
	margin: var(--cp-space-sm) auto 0;
	max-width: 56ch;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 65%, transparent);
	font-size: clamp(0.85rem, 0.8rem + 0.1vw, 0.92rem);
	line-height: 1.6;
}

.cp-value-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-sm) var(--cp-space-lg);
	margin: var(--cp-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.cp-value-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cp-font-body);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cp-color-koyu-metin);
}

.cp-value-list__mark {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cp-color-koz-kirmizisi);
}

/* Three brick-derived tones instead of one repeated köz-kırmızısı dot -
   a small, controlled bit of the "fırın tuğlası" palette on the one list
   that's about the oven/craft process itself. */

.cp-value-list li:nth-child(1) .cp-value-list__mark {
	background: var(--cp-color-fired-clay);
}

.cp-value-list li:nth-child(2) .cp-value-list__mark {
	background: var(--cp-color-ember-orange);
}

.cp-value-list li:nth-child(3) .cp-value-list__mark {
	background: var(--cp-color-sicak-altin);
}

/* Hero */

/* ==========================================================================
   Homepage-only transparent header. Scoped entirely under body.cp-is-home
   (set in header.php only for is_front_page()) so every other page's
   header - including the sticky/compact behavior above - is completely
   unaffected. At rest the header floats over the hero video with no
   background of its own; initHomeHeaderScroll() in main.js adds the
   existing .is-scrolled class once a sentinel at the bottom of the hero
   (.cp-hero__sentinel) has scrolled out of view, at which point it
   switches to a solid, compact, sticky look for the rest of the page.
   ========================================================================== */

@media screen and (min-width: 641px) {
	body.cp-is-home .cp-header {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
	}

	/* Fixed headers reserve no space in the document flow (same as the
	   pre-existing sticky one did until it started sticking), so nothing
	   below needs a compensating top margin - .cp-hero already fills the
	   full viewport height and everything after it simply continues in
	   normal flow underneath. */

	body.cp-is-home .cp-header.is-scrolled {
		position: fixed;
	}
}

@media screen and (max-width: 640px) {
	/* Fixed, transparent throughout, and slides away on scroll-down /
	   slides back in (as a thinner "peek" version) on scroll-up - see
	   initMobileHomeHeaderReveal() in main.js for the direction tracking
	   behind .is-header-hidden/.is-header-peek. */
	body.cp-is-home .cp-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		transform: translateY(0);
		transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	body.cp-is-home .cp-header.is-header-hidden {
		transform: translateY(-100%);
	}

	/* The explicit translateY(0) here is what actually slides the header
	   back down. Removing .is-header-hidden alone left the element with no
	   transform of its own, so the browser had nothing to transition *to*
	   and the header reappeared by snapping (or, mid-gesture, not at all).
	   Stated as its own rule so the return trip is animated exactly like
	   the exit. */
	body.cp-is-home .cp-header.is-header-peek {
		transform: translateY(0);
	}
}

body.cp-is-home .cp-preheader {
	background: rgba(10, 8, 6, 0.5);
	border-bottom-color: transparent;
	transition: background-color var(--cp-transition-base);
}

body.cp-is-home .cp-mainnav {
	position: relative;
	background: transparent;
	border-bottom-color: transparent;
	transition: background-color var(--cp-transition-base), border-color var(--cp-transition-base);
}

/* Very light top-to-bottom readability gradient behind the nav row only
   (not the whole hero - .cp-hero__overlay already handles the rest), so
   nav text stays legible over bright video frames without re-darkening
   the entire hero underneath it. */

body.cp-is-home .cp-mainnav::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10, 8, 6, 0.32) 0%, rgba(10, 8, 6, 0) 100%);
	pointer-events: none;
	transition: opacity var(--cp-transition-base);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	body.cp-is-home .cp-mainnav {
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
	}
}

body.cp-is-home .cp-nav__list a {
	color: var(--cp-color-acik-metin);
}

body.cp-is-home .cp-nav__list a[aria-current="page"],
body.cp-is-home .cp-nav__list .current-menu-item > a {
	color: var(--cp-color-coral-ember);
}

body.cp-is-home .cp-menu-toggle__bar {
	background: var(--cp-color-acik-metin);
}

/* No extra homepage-specific legibility treatment needed here: the logo's
   own drop-shadow (.cp-logo__img, defined with the rest of the logo rules)
   already keeps it readable against video, transparent header included,
   without a separate background element to manage per state. */

/* Mobile: its own considered design, not a copy of either the transparent
   desktop-at-rest look or the flat solid desktop-scrolled bar. A soft
   charcoal-to-ember gradient (ties into the brand's "ateş/köz" identity
   instead of reading as a generic dark bar) at a high-but-not-flat opacity,
   backdrop-blurred so it still feels like it sits over the video rather
   than replacing it, lifted off the hero with a soft shadow, and finished
   with a slim centered gold light-beam instead of a bar-wide line. Genuinely
   see-through now (not just tinted) at rest over the hero video, since
   .cp-hero__overlay already darkens the video underneath; the "peek" state
   below is deliberately a bit less transparent, because that one floats
   over arbitrary page content on the way back up (no guaranteed dark
   overlay there to lean on), not just the hero. */

@media screen and (max-width: 860px) {
	/* Widened from the original 640px phone-only cutoff to match the
	   860px point where the hamburger takes over from the full nav (see
	   .cp-nav/.cp-menu-toggle above) - a narrowed desktop window or a
	   tablet in the 641-860px gap was still showing the OLD semi-opaque
	   preheader (rgba(10,8,6,.5), never covered by this block before) on
	   top of the thin mainnav below, which is exactly the "still looks
	   thick/dark" report this was meant to fix. Same treatment now applies
	   consistently everywhere the hamburger is the nav. */
	body.cp-is-home .cp-preheader {
		display: none;
	}

	/* At rest (top of page, over the hero video) the bar stays almost
	   see-through - just enough tint for the hamburger icon's own
	   background/border to still read, backdrop-filter blur below carries
	   the rest of the legibility work. It only solidifies once
	   .is-scrolled is added (hero has scrolled out of view, see
	   initHomeHeaderScroll() in main.js - the exact same mechanism the
	   desktop header already uses, just newly given mobile styling here
	   instead of being desktop-only). Padding also trimmed down from the
	   site-wide default (8px) for a visibly thinner bar. */
	body.cp-is-home .cp-mainnav {
		position: relative;
		background: linear-gradient(165deg, rgba(21, 19, 17, 0.14) 0%, rgba(43, 23, 17, 0.1) 100%);
		border-bottom: none;
		box-shadow: 0 6px 16px rgba(10, 8, 6, 0.16);
		transition: box-shadow 220ms ease;
	}

	body.cp-is-home .cp-mainnav__inner {
		padding-block: 6px;
		transition: padding 220ms ease;
	}

	body.cp-is-home .cp-header.is-scrolled .cp-mainnav {
		background: linear-gradient(165deg, rgba(21, 19, 17, 0.94) 0%, rgba(43, 23, 17, 0.9) 100%);
		box-shadow: 0 10px 24px rgba(10, 8, 6, 0.3);
	}

	body.cp-is-home .cp-mainnav::before {
		display: none;
	}

	body.cp-is-home .cp-mainnav::after {
		content: '';
		position: absolute;
		left: 12%;
		right: 12%;
		bottom: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--cp-color-sicak-altin) 50%, transparent);
		opacity: 0.8;
		pointer-events: none;
	}

	@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
		body.cp-is-home .cp-mainnav {
			backdrop-filter: blur(8px) saturate(1.15);
			-webkit-backdrop-filter: blur(8px) saturate(1.15);
		}
	}

	/* "Peek" state (see initMobileHomeHeaderReveal() in main.js): revealed
	   by scrolling up mid-page, thinner than the at-rest header (tighter
	   padding, smaller logo). In practice this is the only moment a mobile
	   visitor actually SEES the header again after scrolling past the hero
	   (continuing to scroll down keeps it off-screen via .is-header-hidden
	   instead), so it intentionally matches the same near-solid look as
	   .is-scrolled above rather than a lighter in-between tint - otherwise
	   the header would look more transparent on the way back up than it
	   did just before it hid, which reads as a step backwards, not forwards. */

	body.cp-is-home .cp-header.is-header-peek .cp-mainnav {
		background: linear-gradient(165deg, rgba(21, 19, 17, 0.94) 0%, rgba(43, 23, 17, 0.9) 100%);
	}

	body.cp-is-home .cp-header.is-header-peek .cp-mainnav__inner {
		padding-block: 4px;
	}

	body.cp-is-home .cp-header.is-header-peek .cp-logo__img {
		height: calc(var(--cp-logo-size) * 0.72);
	}

	body.cp-is-home .cp-header.is-header-peek .cp-logo__badge {
		height: calc(var(--cp-logo-size) * 1.28 * 0.72);
	}
}

/* Solid/compact state, once past the hero - true desktop only (nav items
   this targets, .cp-nav__list, are themselves hidden behind the hamburger
   below 861px - see .cp-nav's own breakpoint - so this starts at the same
   861px boundary rather than 641px, closing the gap where it used to
   overlap/fight with the widened hamburger-range treatment above). */

@media screen and (min-width: 861px) {
	body.cp-is-home .cp-header.is-scrolled .cp-preheader {
		background: rgba(21, 19, 17, 0.96);
	}

	body.cp-is-home .cp-header.is-scrolled .cp-mainnav {
		background: rgba(21, 19, 17, 0.96);
		border-bottom: 1px solid color-mix(in srgb, var(--cp-color-sicak-altin) 45%, transparent);
	}

	body.cp-is-home .cp-header.is-scrolled .cp-mainnav::before {
		opacity: 0;
	}

	body.cp-is-home .cp-header.is-scrolled .cp-nav__list a {
		color: var(--cp-color-acik-metin);
	}

	body.cp-is-home .cp-header.is-scrolled .cp-menu-toggle__bar {
		background: var(--cp-color-acik-metin);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.cp-is-home .cp-preheader,
	body.cp-is-home .cp-mainnav,
	body.cp-is-home .cp-mainnav::before,
	body.cp-is-home .cp-header {
		transition-duration: 1ms;
	}
}

.cp-hero {
	position: relative;
	display: flex;
	align-items: center;
	/* svh (small viewport height) avoids the mobile URL-bar resize jump;
	   older browsers that don't understand it simply ignore the second
	   declaration and keep the vh-based fallback above it. The header no
	   longer reserves flow space on the homepage (it floats over the hero,
	   transparent - see the block above), so the hero now fills a true
	   full screen instead of "screen minus header height"; safe clearance
	   for the header is handled separately via .cp-hero__inner's top
	   padding below, not by shrinking the section itself. */
	min-height: clamp(620px, 72vh, 760px);
	min-height: 100svh;
	overflow: hidden;
	color: var(--cp-color-acik-metin);
}

/* Erciyes silhouette: one of the brief's two allowed uses on the homepage.
   A single-tone, low-opacity CSS clip-path ridge with two prominent high
   points (the volcano's characteristic double summit), sitting behind the
   headline/CTA content (z-index 0, same layer as the hero media) and
   clipped by .cp-hero's own overflow:hidden above so it can never cause
   horizontal scroll. Hidden on mobile below, where there isn't room for it
   without competing with the text. */

.cp-hero::after {
	content: '';
	position: absolute;
	z-index: 0;
	right: clamp(-2%, 4vw, 8%);
	bottom: 0;
	width: clamp(220px, 22vw, 380px);
	height: clamp(90px, 9vw, 150px);
	background: var(--cp-color-erciyes);
	opacity: 0.1;
	clip-path: polygon(0% 100%, 8% 62%, 18% 78%, 27% 45%, 36% 68%, 44% 30%, 52% 58%, 61% 22%, 68% 52%, 78% 36%, 86% 60%, 100% 100%);
	pointer-events: none;
}

@media screen and (max-width: 640px) {
	.cp-hero::after {
		display: none;
	}
}

/* Homepage-only: a very controlled ember ring on primary CTA hover/focus,
   layered on top of the shared .cp-btn--cta darkening. Scoped under
   .cp-main--home so header/footer/About/Contact CTAs (which reuse the same
   base class) are not touched. */

.cp-main--home .cp-btn--cta:hover,
.cp-main--home .cp-btn--cta:focus-visible {
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--cp-color-ember-orange) 50%, transparent);
}

.cp-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cp-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.cp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.cp-hero__fallback {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background:
		radial-gradient(65% 55% at 50% 108%, color-mix(in srgb, var(--cp-color-koz-kirmizisi) 65%, transparent) 0%, transparent 70%),
		radial-gradient(50% 45% at 12% 12%, color-mix(in srgb, var(--cp-color-sicak-altin) 30%, transparent) 0%, transparent 65%),
		radial-gradient(55% 50% at 92% 15%, color-mix(in srgb, var(--cp-color-koz-kirmizisi) 35%, transparent) 0%, transparent 68%),
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--cp-color-sicak-altin) 6%, transparent) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cp-color-sicak-altin) 6%, transparent) 0 1px, transparent 1px 22px),
		var(--cp-color-antrasit);
}

/* A large, very faint stone-oven silhouette standing in for a real hero
   photo - keeps the fallback state from reading as an empty box while
   staying clearly secondary to the headline. Swapped out entirely once a
   real hero photo is uploaded via the Customizer. */

.cp-hero__fallback-mark {
	position: absolute;
	top: 50%;
	right: clamp(-4%, 2vw, 6%);
	width: clamp(340px, 34vw, 620px);
	height: auto;
	color: var(--cp-color-sicak-altin);
	opacity: 0.14;
	transform: translateY(-50%);
}

/* Premium dark filter over the video/photo: rgba(10,8,6,0.58) as the base
   tint everywhere (per brief), a touch stronger toward the left where the
   text sits for readability, and a light bottom vignette for depth - never
   opaque enough to lose the fire/oven detail underneath. */

.cp-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(10, 8, 6, 0.74) 0%, rgba(10, 8, 6, 0.58) 42%, rgba(10, 8, 6, 0.58) 100%),
		linear-gradient(180deg, rgba(10, 8, 6, 0.12) 0%, rgba(10, 8, 6, 0.3) 100%);
}

.cp-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: var(--cp-space-xl) clamp(3.5rem, 6vw, 5rem);
}

/* Safe clearance so the title/CTA never sit under the now-floating,
   transparent header (see the homepage header block above) - .cp-hero
   itself stays full height and centers .cp-hero__inner as before; this
   just pushes the centered content down enough to clear the header. */

@media screen and (min-width: 641px) {
	.cp-main--home .cp-hero__inner {
		padding-top: calc(var(--cp-header-offset) + var(--cp-space-lg));
	}
}

/* Hero-only vertical rhythm between kicker/title/subtitle/CTA group. Scoped
   to .cp-hero__inner (not the shared .cp-kicker/.cp-heading rules other
   sections use) so this spacing pass only touches Hero, per the brief. */

.cp-hero__inner .cp-kicker {
	margin-bottom: clamp(18px, 1vw + 15px, 24px);
}

.cp-hero__title {
	margin: 0 0 clamp(22px, 1.4vw + 17px, 30px);
	max-width: 16ch;
	font-family: var(--cp-font-heading);
	font-size: var(--cp-heading-xl);
	line-height: 1.08;
	color: var(--cp-color-acik-metin);
}

.cp-hero__subtitle {
	margin: 0 0 clamp(30px, 1.4vw + 25px, 38px);
	max-width: 52ch;
	font-size: clamp(1rem, 0.92rem + 0.3vw, 1.2rem);
	color: color-mix(in srgb, var(--cp-color-acik-metin) 88%, transparent);
	line-height: 1.6;
}

.cp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-lg);
}

.cp-hero__cta {
	min-height: 50px;
	padding-inline: 1.8em;
	font-size: 1rem;
}

.cp-hero__cta-arrow {
	transition: transform var(--cp-transition-fast);
}

.cp-hero__cta:hover .cp-hero__cta-arrow,
.cp-hero__cta:focus-visible .cp-hero__cta-arrow {
	transform: translateY(3px);
}

/* The cue lives on its own compositor layer: the inner <span> animates
   continuously over the hero video, and without an explicit layer the
   browser repaints that region of the video every frame. translateZ(0) on
   the wrapper (rather than will-change, which would pin the layer forever)
   keeps the cue's paint isolated from the video underneath. */
.cp-hero__scrollcue {
	position: absolute;
	left: 50%;
	bottom: var(--cp-space-md);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	transform: translateX(-50%) translateZ(0);
	opacity: 1;
	transition: opacity 200ms ease;
}

/* Toggled by initHeroScrollCue() in main.js as soon as the visitor scrolls
   past a short threshold. Only opacity changes (compositor-only, no layout
   or paint), and the animation is stopped outright once hidden so an
   invisible element isn't still driving a 1.8s loop off-screen. */
.cp-hero__scrollcue.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.cp-hero__scrollcue.is-hidden span {
	animation-play-state: paused;
}

.cp-hero__scrollcue span {
	width: 1px;
	height: 18px;
	background: color-mix(in srgb, var(--cp-color-acik-metin) 55%, transparent);
	animation: cp-scrollcue 1.8s ease-in-out infinite;
}

@keyframes cp-scrollcue {
	0%,
	100% {
		transform: translateY(0);
		opacity: 0.4;
	}

	50% {
		transform: translateY(6px);
		opacity: 1;
	}
}

/* ==========================================================================
   Marka Özü: a short strip between Hero and Taş Fırın, four brand elements
   as an editorial horizontal rhythm (not four boxed info cards) - a small
   line-icon, a short title, one admin-editable sentence. Small terracotta
   dots mark the gaps between items instead of a heavy divider.
   ========================================================================== */

.cp-essence {
	position: relative;
	overflow: hidden;
	background: var(--cp-color-warm-cream);
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.cp-essence__list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--cp-space-lg);
	list-style: none;
	margin: var(--cp-space-lg) 0 0;
	padding: 0;
}

/* Editorial rhythm instead of four identical corporate boxes: the 2nd and
   4th tiles sit slightly lower on desktop, so the row reads as a composed
   arrangement rather than a repeated grid. Disabled below (see the
   max-width:900px block) where there's no room for it. */
.cp-essence__item:nth-child(2),
.cp-essence__item:nth-child(4) {
	margin-top: clamp(1.25rem, 2vw, 2.25rem);
}

.cp-essence__item {
	position: relative;
	display: flex;
	flex-direction: column;
}

.cp-essence__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: var(--cp-radius-md);
	background: var(--cp-color-antrasit);
}

.cp-essence__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cp-transition-base);
}

/* Bottom scrim so the title/text sitting over the image or texture always
   stays readable, whatever the underlying photo looks like. */
.cp-essence__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--cp-color-antrasit) 92%, transparent) 0%, color-mix(in srgb, var(--cp-color-antrasit) 35%, transparent) 45%, transparent 75%);
	pointer-events: none;
}

.cp-essence__icon {
	position: absolute;
	z-index: 1;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 7px;
	background: color-mix(in srgb, var(--cp-color-antrasit) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 35%, transparent);
	border-radius: 50%;
	color: var(--cp-color-acik-metin);
	backdrop-filter: blur(2px);
}

.cp-essence__icon svg {
	width: 100%;
	height: 100%;
}

.cp-essence__body {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--cp-space-md);
}

.cp-essence__title {
	margin: 0 0 4px;
	font-family: var(--cp-font-heading);
	font-size: 1.05rem;
	color: var(--cp-color-acik-metin);
}

.cp-essence__text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 88%, transparent);
}

/* Görselsiz durum: kırık resim yerine temaya özgü, ek görsel indirmeyen CSS
   dokusu. Dört farklı tema, dört farklı doku - jenerik/tekrarlı görünmez. */
.cp-essence__texture {
	position: absolute;
	inset: 0;
	display: block;
}

.cp-essence__item--flour .cp-essence__texture {
	background:
		radial-gradient(1.5px 1.5px at 15% 22%, color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent) 40%, transparent 41%),
		radial-gradient(1.5px 1.5px at 68% 12%, color-mix(in srgb, var(--cp-color-antrasit) 10%, transparent) 40%, transparent 41%),
		radial-gradient(1.5px 1.5px at 40% 55%, color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent) 40%, transparent 41%),
		radial-gradient(1.5px 1.5px at 82% 70%, color-mix(in srgb, var(--cp-color-antrasit) 10%, transparent) 40%, transparent 41%),
		radial-gradient(1.5px 1.5px at 25% 85%, color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent) 40%, transparent 41%),
		radial-gradient(120% 90% at 20% 0%, var(--cp-color-flour) 0%, var(--cp-color-dough) 100%);
}

.cp-essence__item--brick .cp-essence__texture {
	background:
		repeating-linear-gradient(0deg, color-mix(in srgb, var(--cp-color-antrasit) 30%, transparent) 0 3px, transparent 3px 26px),
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cp-color-antrasit) 22%, transparent) 0 3px, transparent 3px 58px),
		linear-gradient(160deg, var(--cp-color-brick-light) 0%, var(--cp-color-tugla-kahvesi) 60%, var(--cp-color-brick-dark) 100%);
}

.cp-essence__item--ember .cp-essence__texture {
	background:
		radial-gradient(60% 55% at 50% 100%, var(--cp-color-narcicegi) 0%, transparent 65%),
		radial-gradient(40% 35% at 30% 90%, var(--cp-color-koz-kirmizisi) 0%, transparent 70%),
		var(--cp-color-antrasit);
}

.cp-essence__item--mountain .cp-essence__texture {
	background: var(--cp-color-antrasit-alt);
}

.cp-essence__item--mountain .cp-essence__texture::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22%;
	height: 45%;
	background: var(--cp-color-erciyes);
	opacity: 0.5;
	clip-path: polygon(0% 100%, 15% 55%, 30% 80%, 46% 25%, 62% 68%, 78% 40%, 100% 100%);
}

@media (hover: hover) and (pointer: fine) {
	.cp-essence__item:hover .cp-essence__img {
		transform: scale(1.035);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-essence__img {
		transition: none;
	}
}

/* Small per-item stagger on first reveal, capped well under the brief's
   250ms total - see initScrollReveal() in main.js for the shared
   IntersectionObserver and [data-cp-reveal].is-revealed transition. */

body.cp-js .cp-essence__item:nth-child(1) { transition-delay: 0ms; }
body.cp-js .cp-essence__item:nth-child(2) { transition-delay: 70ms; }
body.cp-js .cp-essence__item:nth-child(3) { transition-delay: 140ms; }
body.cp-js .cp-essence__item:nth-child(4) { transition-delay: 210ms; }

@media screen and (max-width: 900px) {
	.cp-essence__list {
		grid-template-columns: repeat(2, 1fr);
		row-gap: var(--cp-space-lg);
	}

	.cp-essence__item:nth-child(2),
	.cp-essence__item:nth-child(4) {
		margin-top: 0;
	}
}

@media screen and (max-width: 480px) {
	.cp-essence__list {
		grid-template-columns: 1fr;
	}

	/* Kompakt mobil blok: dikey alanı fazla kaplamaması için daha kısa
	   en-boy oranı; içerik (başlık+metin) her zaman görünür, hover'a
	   bağımlı değil. */
	.cp-essence__media {
		aspect-ratio: 16 / 10;
	}
}

/* Cıvıklı Nedir? - editorial two-column section right after Lezzetlerimiz.
   Only rendered when civikli_nedir_text is filled in (see front-page.php);
   this CSS just styles it, it doesn't decide visibility. */

/* Taş Fırın arka plan fotoğrafı: fırın kemeri sağda kalacak şekilde
   (background-position: center right), üzerinde metin okunurluğu için
   kırık-beyaz (--cp-color-acik-metin) tonunda çok hafif bir overlay var -
   taş/fırın dokusu belli belirsiz seçilir, pide fotoğrafının arkasında
   yüksek kontrast oluşmaz. background-color ayrı bir katman olduğu için
   görsel herhangi bir sebeple yüklenemezse mevcut kırık-beyaz zemin
   kesintisiz çalışmaya devam eder - hiçbir zaman kırık görsel görünmez.
   Görsel yalnızca bu class'ın bulunduğu ana sayfada var olduğu için
   (front-page.php), başka hiçbir sayfada tarayıcı bu dosyayı indirmez. */

.cp-civikli-nedir {
	position: relative;
	overflow: hidden;
	background-color: var(--cp-color-warm-white);
	background-image:
		linear-gradient(
			color-mix(in srgb, var(--cp-color-acik-metin) 60%, transparent),
			color-mix(in srgb, var(--cp-color-acik-metin) 60%, transparent)
		),
		url("../images/civikli-nedir-stone-oven-background.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	padding-block: var(--cp-section-py);
}

.cp-civikli-nedir__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

.cp-civikli-nedir__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--cp-radius-md);
}

.cp-civikli-nedir__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-civikli-nedir__fallback {
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(135deg, color-mix(in srgb, var(--cp-color-tugla-kahvesi) 10%, transparent) 0 2px, transparent 2px 18px),
		linear-gradient(160deg, var(--cp-color-dough) 0%, var(--cp-color-tugla-kahvesi) 140%);
}

.cp-civikli-nedir__text {
	margin: 0 0 var(--cp-space-md);
	max-width: var(--cp-measure);
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 88%, transparent);
	line-height: 1.75;
	white-space: pre-line;
}

.cp-civikli-nedir__cta {
	background: var(--cp-color-tugla-kahvesi);
	color: var(--cp-color-acik-metin);
}

.cp-civikli-nedir__cta:link,
.cp-civikli-nedir__cta:visited,
.cp-civikli-nedir__cta:hover,
.cp-civikli-nedir__cta:active,
.cp-civikli-nedir__cta:focus {
	color: var(--cp-color-acik-metin);
}

.cp-civikli-nedir__cta:hover {
	background: color-mix(in srgb, var(--cp-color-tugla-kahvesi) 85%, black);
}

@media screen and (max-width: 780px) {
	.cp-civikli-nedir {
		/* Dar ekranda "cover" fırın kemerini anlamsız şekilde kırpabiliyor -
		   odak noktasını kemerin göründüğü yere (görselin sağ tarafı, alt
		   yarısı) kaydırarak kemer alt-orta bölgede düzgün görünüyor. */
		background-position: 88% bottom;
		background-image:
			linear-gradient(
				color-mix(in srgb, var(--cp-color-acik-metin) 65%, transparent),
				color-mix(in srgb, var(--cp-color-acik-metin) 65%, transparent)
			),
			url("../images/civikli-nedir-stone-oven-background.webp");
	}

	.cp-civikli-nedir__inner {
		grid-template-columns: 1fr;
	}

	.cp-civikli-nedir__media {
		aspect-ratio: 16 / 10;
	}
}

/* Usta - only rendered when usta_name is filled in (see front-page.php).
   Dark surface (antrasit-alt) so it reads as its own moment, not a repeat
   of the light Cıvıklı Nedir/Essence sections either side of it. */

.cp-usta {
	position: relative;
	overflow: hidden;
	background: var(--cp-color-antrasit-alt);
	color: var(--cp-color-acik-metin);
	padding-block: var(--cp-section-py);
}

/* Ateş & Köz dokunuşu: iki köşeden gelen çok düşük opasiteli köz parıltısı
   ve sağ üstte seyrek bir kıvılcım noktacığı alanı - "flour speckle"
   (.cp-story::before) ile aynı teknik, sıcak altın/köz tonlarına
   uyarlanmış. İçerik ızgarası (.cp-usta__inner) z-index:1 ile her zaman
   üstte kalır, bu yüzden metin okunabilirliği etkilenmez. */

.cp-usta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(55% 65% at 88% 100%, color-mix(in srgb, var(--cp-color-ember-orange) 20%, transparent) 0%, transparent 70%),
		radial-gradient(40% 50% at 6% 0%, color-mix(in srgb, var(--cp-color-koz-kirmizisi) 14%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.cp-usta::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: clamp(160px, 18vw, 260px);
	height: clamp(120px, 14vw, 200px);
	background-image: radial-gradient(color-mix(in srgb, var(--cp-color-sicak-altin) 65%, transparent) 1px, transparent 1.6px);
	background-size: 22px 22px;
	opacity: 0.35;
	pointer-events: none;
}

.cp-usta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
}

.cp-usta__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	max-width: 320px;
	overflow: hidden;
	border-radius: var(--cp-radius-md);
	margin-inline: auto;
}

.cp-usta__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-usta__fallback {
	width: 100%;
	height: 100%;
	background:
		radial-gradient(60% 60% at 50% 30%, color-mix(in srgb, var(--cp-color-sicak-altin) 20%, transparent) 0%, transparent 70%),
		var(--cp-color-antrasit);
}

.cp-usta__bio {
	margin: 0 0 var(--cp-space-md);
	max-width: var(--cp-measure);
	color: color-mix(in srgb, var(--cp-color-acik-metin) 88%, transparent);
	line-height: 1.75;
}

.cp-usta__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0 0 var(--cp-space-md);
	padding: 0;
	list-style: none;
}

.cp-usta__stat {
	display: flex;
	flex-direction: column;
}

.cp-usta__stat-value {
	font-family: var(--cp-font-heading);
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	line-height: 1;
	color: var(--cp-color-sicak-altin);
}

.cp-usta__stat-label {
	margin-top: 4px;
	font-size: 0.82rem;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 75%, transparent);
}

.cp-usta__quote {
	margin: 0 0 var(--cp-space-md);
	max-width: var(--cp-measure);
	padding-left: var(--cp-space-md);
	border-left: 2px solid var(--cp-color-koz-kirmizisi);
	color: color-mix(in srgb, var(--cp-color-acik-metin) 92%, transparent);
	font-style: italic;
	line-height: 1.7;
}

@media screen and (max-width: 780px) {
	.cp-usta__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.cp-usta__media {
		max-width: 220px;
	}

	.cp-usta__bio,
	.cp-usta__quote {
		margin-inline: auto;
	}

	.cp-usta__stats {
		justify-content: center;
	}

	.cp-usta__quote {
		text-align: left;
	}
}

/* Google Yorumları - yalnızca reviews_profile_url doluysa render edilir;
   şimdilik tek bir CTA bandı, gerçek yorum/puan verisi yok. */

.cp-reviews {
	background: var(--cp-color-sicak-krem);
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.cp-reviews__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-md);
}

.cp-reviews__inner .cp-heading-lg {
	margin: 0;
}

@media screen and (max-width: 600px) {
	.cp-reviews__inner {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Sipariş Platformları (Trendyol Yemek / Yemeksepeti): Lezzetlerimiz'in
   hemen altında, antrasit bir bant üzerinde açık renkli logo kartları.
   Platform logoları kendi renklerinde (Trendyol koyu yazı, Yemeksepeti
   pembe-kırmızı) okunabilsin diye kartların zemini sıcak beyaz.
   ========================================================================== */

.cp-platforms {
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	padding-block: clamp(2.75rem, 2.25rem + 2.5vw, 4.5rem);
}

.cp-platforms__inner {
	display: grid;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	align-items: center;
}

@media screen and (min-width: 900px) {
	.cp-platforms__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}
}

.cp-platforms__intro .cp-kicker {
	color: var(--cp-color-sicak-altin);
}

.cp-platforms__intro .cp-heading-lg {
	color: var(--cp-color-acik-metin);
	margin: 0 0 var(--cp-space-sm);
}

.cp-platforms__text {
	margin: 0;
	max-width: var(--cp-measure);
	color: color-mix(in srgb, var(--cp-color-acik-metin) 78%, transparent);
}

.cp-platforms__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: var(--cp-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-platforms__item {
	display: flex;
}

.cp-platform-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	min-height: 150px;
	padding: 1.5rem 1.25rem;
	border-radius: var(--cp-radius-lg);
	background: var(--cp-color-warm-white);
	color: var(--cp-color-koyu-metin);
	text-decoration: none;
	border: 1px solid color-mix(in srgb, var(--cp-color-sicak-altin) 35%, transparent);
	box-shadow: 0 10px 28px rgb(0 0 0 / 0.28);
	transition: transform var(--cp-transition-base), box-shadow var(--cp-transition-base), border-color var(--cp-transition-base);
}

.cp-platform-card:hover {
	transform: translateY(-3px);
	border-color: var(--cp-color-sicak-altin);
	box-shadow: 0 16px 36px rgb(0 0 0 / 0.36);
}

.cp-platform-card:focus-visible {
	outline: 3px solid var(--cp-color-sicak-altin);
	outline-offset: 3px;
}

.cp-platform-card__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
}

/* Fixed height, auto width: the bundled SVG wordmarks only carry a viewBox
   (no intrinsic size), so height:auto would collapse them to nothing. An
   admin-uploaded raster logo scales the same way. */
.cp-platform-card__img {
	display: block;
	width: auto;
	max-width: 190px;
	height: 34px;
	object-fit: contain;
}

/* Trendyol's wordmark is taller per character than Yemeksepeti's script;
   matching their visual weight needs a slightly taller box for Trendyol. */
.cp-platform-card--trendyol-yemek .cp-platform-card__img {
	height: 40px;
}

.cp-platform-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;
	color: var(--cp-color-koz-kirmizisi);
}

.cp-platform-card__arrow {
	width: 0.85em;
	height: 0.85em;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cp-platform-card,
	.cp-platform-card:hover {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Kurumsal kimlik rozetleri (Un & Hamur / Taş Fırın / Ateş & Köz / Erciyes &
   Yöresellik): sitede birden çok sayfada, bir bölümün kicker'ı yanında küçük
   bir ikon rozeti olarak tekrar kullanılan paylaşılan bileşen. İkonların
   kendisi civikli_pide_render_essence_icon() ile aynı, tek kaynaklı SVG
   path'leri - burada yeni bir görsel indirilmiyor, yalnızca zaten var olan
   ikon çizimleri küçük bir rozet olarak başka bağlamlarda yeniden kullanılıyor.
   ========================================================================== */

.cp-about-theme-row {
	display: flex;
	align-items: center;
	gap: var(--cp-space-sm);
	margin-bottom: var(--cp-space-sm);
}

.cp-about-theme-row--center {
	justify-content: center;
}

.cp-about-theme-row .cp-kicker {
	margin: 0;
}

.cp-theme-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
}

.cp-theme-icon svg {
	width: 19px;
	height: 19px;
}

.cp-theme-icon--flour {
	background: color-mix(in srgb, var(--cp-color-dough) 55%, transparent);
	color: var(--cp-color-brick-dark);
}

.cp-theme-icon--brick {
	background: color-mix(in srgb, var(--cp-color-brick) 18%, transparent);
	color: var(--cp-color-brick-dark);
}

.cp-theme-icon--ember {
	background: color-mix(in srgb, var(--cp-color-narcicegi) 20%, transparent);
	color: var(--cp-color-narcicegi);
}

.cp-theme-icon--erciyes {
	background: color-mix(in srgb, var(--cp-color-erciyes) 16%, transparent);
	color: var(--cp-color-erciyes);
}

/* Koyu zeminler (antrasit/koyu-metin arka planlar) üzerinde ikon rengi yerine
   .cp-essence__icon ile aynı "cam rozet" diliyle değiştiriliyor, aksi halde
   bazı tema renkleri koyu zeminde neredeyse görünmez kalır. */
.cp-theme-icon--on-dark {
	background: color-mix(in srgb, var(--cp-color-antrasit) 45%, transparent);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 30%, transparent);
	color: var(--cp-color-acik-metin);
}

/* Story */

.cp-story {
	position: relative;
	overflow: hidden;
	background: var(--cp-color-flour);
	padding-block: var(--cp-section-py);
}

/* Very light, low-opacity flour speckle in one corner only - a hint of
   "un serpintisi", not a repeated pattern and not a snow effect. Small
   fixed area, doesn't sit under any text. */

.cp-story::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: clamp(140px, 14vw, 220px);
	height: clamp(140px, 14vw, 220px);
	background-image: radial-gradient(color-mix(in srgb, var(--cp-color-dough) 70%, transparent) 1px, transparent 1.6px);
	background-size: 14px 14px;
	opacity: 0.5;
	pointer-events: none;
}

.cp-story__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);
}

.cp-story__media {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--cp-radius-md);
	/* Ince, uc tonlu tugla-renkli cerceve: mortar (ic cizgi), dough (ara
	   bosluk), brick-light (dis cizgi). box-shadow kendisi bu elementin
	   overflow:hidden'inden etkilenmez, sadece icerideki <img> kirpilir. */
	box-shadow:
		0 0 0 1px var(--cp-color-mortar),
		0 0 0 5px var(--cp-color-dough),
		0 0 0 6px color-mix(in srgb, var(--cp-color-brick-light) 55%, transparent);
}

.cp-story__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.cp-story__fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--cp-color-sicak-altin);
	background:
		radial-gradient(60% 55% at 78% 82%, color-mix(in srgb, var(--cp-color-coral-ember) 35%, transparent) 0%, transparent 65%),
		radial-gradient(70% 70% at 30% 25%, color-mix(in srgb, var(--cp-color-sicak-altin) 20%, transparent) 0%, transparent 60%),
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--cp-color-sicak-altin) 6%, transparent) 0 1px, transparent 1px 16px),
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cp-color-antrasit) 5%, transparent) 0 1px, transparent 1px 16px),
		var(--cp-color-antrasit);
}

.cp-story__fallback svg {
	width: 34%;
	height: 34%;
}

.cp-story__text {
	max-width: var(--cp-measure);
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 85%, transparent);
	line-height: 1.75;
}

/* Marka Mührü: restoran sahibinin yuvarlak logosu, Hero ile Lezzetlerimiz
   arasındaki geçişte tek bir "fiziksel mühür" gibi. Wrapper'ın üst ve alt
   margin'i kendi boyutunun tam yarısı kadar negatif olduğu için toplam akış
   yüksekliği sıfırlanır - Lezzetlerimiz'in üst kenarı Hero'nun bittiği yerde
   kalır, hiçbir boşluk/dikiş açılmaz - yalnızca mühür bu çizginin üstünde
   Hero'ya, altında Lezzetlerimiz'e "batmış" gibi görünür. Hero'nun kendi
   overflow:hidden'i bunu etkilemez çünkü mühür Hero'nun İÇİNDE değil,
   ondan SONRA gelen bağımsız bir kardeş element. */

.cp-brand-seal {
	--cp-seal-size: clamp(104px, 8vw, 116px);
	position: relative;
	z-index: 5;
	display: flex;
	justify-content: center;
	margin-top: calc(var(--cp-seal-size) * -0.5);
	margin-bottom: calc(var(--cp-seal-size) * -0.5);
	pointer-events: none;
}

.cp-brand-seal__link {
	display: block;
	width: var(--cp-seal-size);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--cp-color-warm-white);
	border: 3px solid var(--cp-color-tugla-kahvesi);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--cp-color-sicak-altin) 55%, transparent),
		0 10px 24px -10px rgba(0, 0, 0, 0.4);
	pointer-events: auto;
}

.cp-brand-seal__link:focus-visible {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 3px;
}

.cp-brand-seal__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1024px) {
	.cp-brand-seal {
		--cp-seal-size: clamp(88px, 9vw, 96px);
	}
}

@media screen and (max-width: 640px) {
	.cp-brand-seal {
		--cp-seal-size: clamp(72px, 18vw, 80px);
	}
}

/* .cp-hero__scrollcue normally sits centered at the very bottom of the
   Hero (bottom: var(--cp-space-md)); when the brand seal is present right
   after Hero, its footprint would otherwise sit exactly on top of the
   scrollcue. Only nudge the scrollcue up, and only when the seal actually
   exists (empty admin field = no seal = scrollcue stays exactly where it
   always was). */

.cp-hero:has(+ .cp-brand-seal) .cp-hero__scrollcue {
	bottom: calc(var(--cp-space-md) + clamp(60px, 6vw, 68px));
}

@media screen and (max-width: 1024px) {
	.cp-hero:has(+ .cp-brand-seal) .cp-hero__scrollcue {
		bottom: calc(var(--cp-space-md) + clamp(52px, 6vw, 58px));
	}
}

@media screen and (max-width: 640px) {
	.cp-hero:has(+ .cp-brand-seal) .cp-hero__scrollcue {
		bottom: calc(var(--cp-space-md) + clamp(44px, 12vw, 48px));
	}
}

/* Flavors (Lezzetlerimiz) */

.cp-flavors {
	background: var(--cp-color-sicak-krem);
	padding-block: var(--cp-section-py);
}

/* Menü bölümü artık Hero'nun hemen altında (bkz. front-page.php'deki sıra
   değişikliği). Alt boşluk normal section ritminde (--cp-section-py) kalıyor.
   Üst boşluk, .cp-brand-seal mührü varsa onun alt yarısının (bkz. yukarıdaki
   --cp-seal-size) altında "Lezzetlerimiz" başlığına kadar hâlâ yeterli boşluk
   kalacak şekilde büyütüldü - her breakpoint'te mührün o breakpoint'teki en
   büyük olası yarı-yüksekliğinin üstünde güvenli bir taban değer. Mühür yoksa
   (admin alanı boş) bu üst boşluk yalnızca normal, biraz geniş bir section
   boşluğu gibi görünür - kırık bir görünüm oluşmaz. */
.cp-flavors--after-hero {
	padding-top: clamp(6.75rem, 5.5rem + 3vw, 8rem);
}

@media screen and (max-width: 1024px) {
	.cp-flavors--after-hero {
		padding-top: clamp(5.75rem, 4.5rem + 3vw, 6.5rem);
	}
}

@media screen and (max-width: 640px) {
	.cp-flavors--after-hero {
		padding-top: clamp(4.75rem, 3.5rem + 4vw, 5.5rem);
	}
}

.cp-flavor-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cp-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Small per-card stagger on first reveal (cards + the closing "Tüm
   Menümüz" card, 6 items max at 50ms apart - stays under the brief's
   250ms total). */

body.cp-js .cp-flavor-grid > li:nth-child(1) { transition-delay: 0ms; }
body.cp-js .cp-flavor-grid > li:nth-child(2) { transition-delay: 50ms; }
body.cp-js .cp-flavor-grid > li:nth-child(3) { transition-delay: 100ms; }
body.cp-js .cp-flavor-grid > li:nth-child(4) { transition-delay: 150ms; }
body.cp-js .cp-flavor-grid > li:nth-child(5) { transition-delay: 200ms; }
body.cp-js .cp-flavor-grid > li:nth-child(6) { transition-delay: 250ms; }

.cp-flavor-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cp-color-warm-white);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 10%, transparent);
	border-radius: var(--cp-radius-md);
	transition: transform var(--cp-transition-fast), border-color var(--cp-transition-fast),
		box-shadow var(--cp-transition-fast);
}

.cp-flavor-card:hover,
.cp-flavor-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--cp-color-terracotta);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--cp-color-antrasit) 10%, transparent),
		0 0 0 1px color-mix(in srgb, var(--cp-color-terracotta) 25%, transparent);
}

.cp-flavor-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-color-sicak-krem);
}

.cp-flavor-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cp-transition-base);
}

.cp-flavor-card:hover .cp-flavor-card__img,
.cp-flavor-card:focus-within .cp-flavor-card__img {
	transform: scale(1.04);
}

/* No image yet: a small, quiet warm-cream/köz-kırmızısı texture instead of
   a broken-image icon or an empty box - swapped out automatically once the
   admin picks a real photo via Genel Ayarlar → Ana Sayfa - Lezzetlerimiz. */

.cp-flavor-card__fallback {
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--cp-color-sicak-altin) 8%, transparent) 0 1px, transparent 1px 14px),
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cp-color-koz-kirmizisi) 6%, transparent) 0 1px, transparent 1px 14px),
		linear-gradient(155deg, color-mix(in srgb, var(--cp-color-koz-kirmizisi) 20%, var(--cp-color-sicak-krem)), var(--cp-color-sicak-krem));
}

/* Decorative-only favorite mark, top-right of the photo. Not interactive -
   there is no favorites/account system yet, so it never toggles or persists
   anything; it exists purely to read as a familiar food-app visual cue. */

.cp-flavor-card__fav {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: var(--cp-color-warm-white);
	color: var(--cp-color-koyu-metin);
	border-radius: 50%;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--cp-color-antrasit) 20%, transparent);
}

.cp-flavor-card__fav svg {
	width: 15px;
	height: 15px;
}

.cp-flavor-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--cp-space-md) var(--cp-space-lg) var(--cp-space-lg);
	text-align: left;
}

/* Name + 5-star rating share one row, name left / stars right, so the
   rating reads as a quick premium-listing cue instead of a separate line. */

.cp-flavor-card__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-sm);
	margin: 0 0 4px;
}

.cp-flavor-card__name {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
	font-family: var(--cp-font-heading);
	font-size: 1.15rem;
	color: var(--cp-color-koyu-metin);
}

.cp-flavor-card__name-mark {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	background: var(--cp-color-koz-kirmizisi);
	border: 1px solid var(--cp-color-sicak-altin);
	transform: rotate(45deg);
}

/* Up to 5 stars, filled up to the rounded rating value (out of 5) and
   outlined the rest of the way - no numeric score printed, per the brief. */

.cp-flavor-card__stars {
	display: flex;
	flex-shrink: 0;
	gap: 2px;
}

.cp-flavor-card__stars svg {
	width: 12px;
	height: 12px;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 25%, transparent);
}

.cp-flavor-card__stars svg.is-filled {
	color: var(--cp-color-sicak-altin);
}

.cp-flavor-card__desc {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 68%, transparent);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

/* Premium "info strip": delivery time, min. basket and delivery fee (each
   optional, admin-entered) plus price sit side by side on one line,
   separated by middots, with the price visually emphasized at the end -
   the flight-search-style layout the brief asked for instead of stacked
   rows. Wraps naturally on narrow cards instead of overflowing. */

.cp-flavor-card__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	row-gap: 2px;
	margin: 8px 0 0;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 62%, transparent);
	font-size: 0.78rem;
}

.cp-flavor-card__stat {
	position: relative;
	padding-left: 12px;
}

.cp-flavor-card__stat:first-child {
	padding-left: 0;
}

.cp-flavor-card__stat:not(:first-child)::before {
	content: '·';
	position: absolute;
	left: 3px;
}

/* Price row: its own line, left-aligned like the rest of the card (never
   pushed to the right or centered) - old price struck through on the left,
   real price on the right, per the brief. */

.cp-flavor-card__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 6px 0 0;
	font-family: var(--cp-font-heading);
}

.cp-flavor-card__price-current {
	color: var(--cp-color-koz-kirmizisi);
	font-size: 1.05rem;
	font-weight: 700;
}

/* Action row: on its own line below price, pinned to the bottom of the
   card via margin-top: auto so every card's button lines up at the same
   height regardless of description/stats length. */

.cp-flavor-card__footer {
	margin-top: auto;
	padding-top: var(--cp-space-sm);
}

.cp-flavor-card__price-old {
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 45%, transparent);
	font-family: var(--cp-font-body);
	font-size: 0.82rem;
	font-weight: 400;
	text-decoration: line-through;
}

.cp-flavor-card__link {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 4px;
	color: var(--cp-color-brick);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--cp-color-brick) 50%, transparent);
	text-underline-offset: 3px;
	font-weight: 600;
	font-size: 0.85rem;
	transition: color var(--cp-transition-fast);
}

/* Stretched link: the whole card is the click target (visitors aim at the
   photo, not the small text link), but it stays one real <a> so keyboard
   users get a single tab stop and the card's existing :focus-within styles
   light up on focus. The card itself only needs position: relative for this
   ::after to anchor to it. */

.cp-flavor-card {
	position: relative;
}

.cp-flavor-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* The heart is decorative (aria-hidden) and sits under the stretched layer,
   so lift it back above to keep it visible as a distinct affordance rather
   than letting the link's hit area visually swallow it. */

.cp-flavor-card__fav {
	z-index: 2;
}

.cp-flavor-card__link:hover,
.cp-flavor-card__link:focus-visible {
	color: var(--cp-color-koz-kirmizisi);
	text-decoration-color: currentColor;
}

.cp-flavor-card__link span {
	transition: transform var(--cp-transition-fast);
}

.cp-flavor-card__link:hover span,
.cp-flavor-card__link:focus-visible span {
	transform: translateX(3px);
}

/* Optional promo pill along the bottom edge of the card body - only shown
   when the admin fills in a badge label (never a fabricated discount). Kept
   in the antrasit/altın palette rather than a generic green so it still
   reads as this site's own design language. */

/* Sits at the end of the card body, so it is inline-level rather than a
   full-width bar: a short label like "Çok Satan" stretched edge to edge
   reads as a footer band competing with the price, not as a tag on the
   dish. align-self keeps it hugging its own text inside the flex body. */

.cp-flavor-card__badge {
	align-self: flex-start;
	margin: var(--cp-space-sm) 0 0;
	padding: 6px 10px;
	background: var(--cp-color-antrasit);
	color: var(--cp-color-sicak-altin);
	border-radius: var(--cp-radius-sm);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* "Tüm Menümüz": deliberately not styled like the other cards - a strong,
   self-contained CTA block so it reads as an action, not another dish. */

.cp-flavor-cta {
	display: flex;
	overflow: hidden;
	border-radius: var(--cp-radius-md);
}

.cp-flavor-cta__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--cp-space-xs);
	width: 100%;
	padding: var(--cp-space-lg);
	border-top: 2px solid var(--cp-color-ember-orange);
	/* "Tüm Menümüz" karti bilerek digerlerinden farkli: soot/antrasit temel
	   uzerine kose koselerden gelen kontrollu koz-kirmizisi/ember-orange
	   parlamalar - ayni koz-kirmizisi yuzeyin tekrari degil. */
	background:
		radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--cp-color-koz-kirmizisi) 35%, transparent) 0%, transparent 55%),
		radial-gradient(90% 100% at 0% 100%, color-mix(in srgb, var(--cp-color-ember-orange) 22%, transparent) 0%, transparent 60%),
		var(--cp-color-soot);
}

.cp-flavor-cta__heading {
	margin: 0;
	font-family: var(--cp-font-heading);
	font-size: 1.2rem;
	color: var(--cp-color-acik-metin);
}

.cp-flavor-cta__text {
	margin: 0 0 var(--cp-space-xs);
	font-size: 0.88rem;
	line-height: 1.55;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
}

.cp-flavor-cta__button {
	background: var(--cp-color-koz-kirmizisi);
}

.cp-flavor-cta__button:hover {
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 85%, black);
}

/* Yeni Mutfaktan Kareler (gallery teaser). Only rendered at all when the
   admin has uploaded at least one photo - a text-only "gallery" would be
   an empty, pointless section, so front-page.php skips it entirely rather
   than showing a CSS fallback for every square. */

.cp-gallery {
	position: relative;
	background: var(--cp-color-warm-white);
	border-top: 1px solid color-mix(in srgb, var(--cp-color-brick) 22%, transparent);
	padding-block: var(--cp-section-py);
}

/* Very soft darkening strip at the very bottom of the section, easing the
   handoff into the dark Şube section below it - a gradient, not a hard
   color block, per the brief's transition rule. */

.cp-gallery::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 48px;
	background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cp-color-soot) 6%, transparent));
	pointer-events: none;
}

/* The grid/carousel item markup itself is shared with the About page's
   Görsel Hikâye section - see the single .cp-media-gallery component
   further down instead of a second copy here. */

.cp-gallery__cta {
	margin: var(--cp-space-lg) 0 0;
	text-align: center;
}

.cp-gallery__button {
	background: transparent;
	color: var(--cp-color-koyu-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-brick) 30%, transparent);
}

.cp-gallery__button:hover {
	border-color: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-koz-kirmizisi);
}

.cp-gallery__button span {
	transition: transform var(--cp-transition-fast);
}

.cp-gallery__button:hover span,
.cp-gallery__button:focus-visible span {
	transform: translateX(3px);
}

/* Visit (Konum & Saatler) */

.cp-visit {
	position: relative;
	overflow: hidden;
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	padding-block: var(--cp-section-py);
}

/* Very low-opacity brick coursing/derz hint behind the content - two
   repeating-linear-gradients standing in for horizontal + vertical mortar
   lines. Cheap (no images), and faint enough to read as texture rather
   than a pattern. */

.cp-visit::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(0deg, color-mix(in srgb, var(--cp-color-brick-dark) 25%, transparent) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cp-color-brick-dark) 18%, transparent) 0 1px, transparent 1px 64px);
	opacity: 0.35;
	pointer-events: none;
}

/* Very controlled, contained ember light - one of the brief's 1-2 allowed
   dark-section uses. clip()'d to this element's own box (not just
   overflow:hidden) so a future layout change can't reintroduce the kind of
   right-edge overflow bug found and fixed on the menu page earlier. */

.cp-visit::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 85% 70%, rgba(196, 90, 58, 0.13), transparent 42%);
	clip-path: inset(0);
	pointer-events: none;
}

.cp-visit__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: start;
	gap: clamp(2rem, 4vw, 4rem);
}

.cp-visit__text {
	margin: var(--cp-space-sm) 0 0;
	max-width: 46ch;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 88%, transparent);
	line-height: 1.6;
}

.cp-visit__status {
	margin: var(--cp-space-sm) 0 var(--cp-space-md);
	font-size: 0.95rem;
}

.cp-visit__address {
	margin: 0 0 var(--cp-space-lg);
	max-width: 40ch;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
	line-height: 1.6;
}

.cp-visit__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-md);
}

.cp-visit__phone {
	background: transparent;
	color: var(--cp-color-acik-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-sicak-altin) 35%, transparent);
	transition: border-color var(--cp-transition-fast), color var(--cp-transition-fast);
}

.cp-visit__phone:hover {
	color: var(--cp-color-sicak-altin);
	border-color: var(--cp-color-sicak-altin);
}

.cp-visit__maps {
	color: var(--cp-color-sicak-altin);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-size: 0.9rem;
	font-weight: 600;
	transition: color var(--cp-transition-fast);
}

/* ember-orange rather than köz-kırmızısı here: on this section's near-black
   background, köz-kırmızısı's own contrast against antrasit is too low to
   read as an accessible hover state (checked ≈3:1); ember-orange keeps the
   "hover'da köz kırmızısına geçiş" spirit while staying WCAG-legible on a
   dark surface. */

.cp-visit__maps:hover {
	color: var(--cp-color-ember-orange);
}

.cp-visit__hours {
	position: relative;
	z-index: 1;
	padding: var(--cp-space-lg);
	background: color-mix(in srgb, var(--cp-color-brick-dark) 22%, var(--cp-color-antrasit));
	border: 1px solid color-mix(in srgb, var(--cp-color-brick-light) 30%, transparent);
}

.cp-visit__hours-title {
	margin: 0 0 var(--cp-space-md);
	font-family: var(--cp-font-heading);
	font-size: 1.05rem;
	color: var(--cp-color-sicak-altin);
}

.cp-hours-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.cp-hours-list__row {
	display: flex;
	justify-content: space-between;
	gap: var(--cp-space-sm);
	padding-bottom: 8px;
	border-bottom: 1px solid color-mix(in srgb, var(--cp-color-brick-light) 18%, transparent);
}

.cp-hours-list__row:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.cp-hours-list__day {
	color: color-mix(in srgb, var(--cp-color-acik-metin) 70%, transparent);
}

@media screen and (max-width: 1024px) {
	.cp-flavor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 860px) {
	.cp-hero {
		min-height: clamp(480px, 82vh, 720px);
		min-height: 100svh;
	}

	/* Video crop check at phone widths: keep the oven mouth/flame centered
	   rather than drifting toward the top/bottom of the frame once the
	   hero goes tall and narrow. */

	.cp-hero__video {
		object-position: center 42%;
	}

	.cp-hero__inner {
		padding-block: clamp(4.5rem, 16vh, 7rem) var(--cp-space-lg);
	}

	/* Mobile header is position:absolute on the homepage (see above) so it
	   no longer pushes the hero down on its own - add clearance here
	   instead (pre-header is hidden on mobile, so only the compact
	   logo+nav row height matters). */
	.cp-main--home .cp-hero__inner {
		padding-top: calc(clamp(4.5rem, 16vh, 7rem) + var(--cp-logo-size) + var(--cp-space-md));
	}

	.cp-story__inner,
	.cp-visit__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cp-story__media {
		aspect-ratio: 16 / 10;
	}

	.cp-visit__hours {
		margin-top: var(--cp-space-sm);
	}
}

@media screen and (max-width: 600px) {
	.cp-flavor-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Compact food-app style row instead of a tall stacked card: a small
	   square photo on the left, name/description/price/action on the
	   right. Keeps every product scannable in one glance while browsing a
	   long list on a phone. */

	.cp-flavor-card {
		flex-direction: row;
	}

	.cp-flavor-card__media {
		flex: 0 0 112px;
		width: 112px;
		aspect-ratio: 1 / 1;
	}

	.cp-flavor-card__fav {
		top: 6px;
		right: 6px;
		width: 22px;
		height: 22px;
	}

	.cp-flavor-card__fav svg {
		width: 11px;
		height: 11px;
	}

	.cp-flavor-card__badge {
		padding: 4px 8px;
		font-size: 0.66rem;
	}

	.cp-flavor-card__body {
		padding: var(--cp-space-sm) var(--cp-space-md);
	}

	.cp-flavor-card__desc {
		-webkit-line-clamp: 2;
	}

	.cp-flavor-card__title-row {
		flex-wrap: wrap;
		row-gap: 2px;
	}

	.cp-flavor-card__stats {
		font-size: 0.72rem;
	}

	.cp-flavor-card__price-current {
		font-size: 0.95rem;
	}

	.cp-flavor-card__link {
		min-height: 44px;
	}

	.cp-hero__title {
		max-width: 100%;
	}

	.cp-hero__actions {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--cp-space-md);
	}

	.cp-visit__actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-hero__scrollcue span {
		animation: none;
	}

	/* Belt-and-braces alongside initHeroVideo() in main.js (which actually
	   pauses playback): hides the <video> outright so the poster/fallback
	   image or gradient underneath is what's visible even if JS hasn't run
	   yet. */
	.cp-hero__video {
		display: none;
	}
}

/* Footer */

.cp-footer {
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	font-family: var(--cp-font-body);
}

/* A flat ember-red band read as a solid colour block pasted onto the page.
   The gradient gives it the same depth the hero and header surfaces have,
   so the footer's opening note belongs to the same material as the rest of
   the site. */
.cp-footer__cta {
	background: linear-gradient(
		135deg,
		var(--cp-color-koz-kirmizisi) 0%,
		color-mix(in srgb, var(--cp-color-koz-kirmizisi) 82%, var(--cp-color-antrasit)) 100%
	);
}

.cp-footer__cta-inner {
	max-width: var(--cp-container-width);
	margin: 0 auto;
	padding: clamp(2rem, 3.5vw, 3rem) var(--cp-container-padding);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-lg);
}

.cp-footer__cta-text {
	margin: 0;
	font-family: var(--cp-font-heading);
	font-size: clamp(1.25rem, 1.1rem + 1.2vw, 2rem);
	color: var(--cp-color-acik-metin);
}

/* .cp-btn--cta's own background is the same köz kırmızısı as this band's
   background, so without an override the button had no visible shape at all
   - just small text floating in the color, no contrast, no button "feel".
   Inverted to a solid warm-cream pill instead, the way a light CTA reads
   properly against a strong color band; every interaction state (not just
   the base color) is set explicitly because .cp-btn--cta already claims
   :link/:visited/:hover/etc with the same specificity earlier in this file,
   and this needs to win over that for this one button specifically. */

.cp-footer__cta-button {
	background: var(--cp-color-acik-metin);
	padding: 0.8em 1.8em;
	font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
	box-shadow: 0 8px 20px -10px rgba(10, 8, 6, 0.45);
	transition: background-color var(--cp-transition-fast), transform var(--cp-transition-fast), box-shadow var(--cp-transition-fast);
}

.cp-footer__cta-button:link,
.cp-footer__cta-button:visited,
.cp-footer__cta-button:active,
.cp-footer__cta-button:focus {
	color: var(--cp-color-antrasit);
}

.cp-footer__cta-button:hover {
	background: var(--cp-color-sicak-krem);
	color: var(--cp-color-antrasit);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -10px rgba(10, 8, 6, 0.55);
}

/* A hairline of ember-red under the CTA band, fading out at both ends -
   separates the band from the body below without the hard edge a plain
   border-top draws across the full width. */
.cp-footer__main {
	position: relative;
	padding: clamp(3rem, 5vw, 4.5rem) var(--cp-container-padding) clamp(2rem, 3vw, 2.75rem);
}

.cp-footer__main::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--cp-container-width), 100%);
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		color-mix(in srgb, var(--cp-color-sicak-altin) 45%, transparent) 30%,
		color-mix(in srgb, var(--cp-color-sicak-altin) 45%, transparent) 70%,
		transparent 100%
	);
}

/* Mobile first: a single column, so every block stacks in reading order.
   The asymmetric desktop layout is introduced at 861px below - the same
   breakpoint the main nav uses to leave the hamburger behind, so the
   footer and the header change character at the same width. */
.cp-footer__grid {
	max-width: var(--cp-container-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 2.75rem);
}

@media screen and (min-width: 641px) and (max-width: 860px) {
	.cp-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: clamp(2rem, 5vw, 3.5rem);
	}

	/* The brand block carries the logo and description, so it spans both
	   columns rather than being squeezed into half the width beside a
	   short link list. */
	.cp-footer__col--brand {
		grid-column: 1 / -1;
	}
}

/* Desktop: the brand column is given roughly twice the width of each link
   column (1.6fr against three 1fr tracks) so the logo, the description and
   the social row have room to sit as a block, and the three link columns
   read as a set beside it rather than as three more equal-weight
   competitors. */
@media screen and (min-width: 861px) {
	.cp-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
		column-gap: clamp(2.5rem, 4vw, 4.5rem);
		row-gap: 0;
		align-items: start;
	}

	/* A single vertical rule separating the brand block from the links,
	   drawn on the first link column so it never appears when the layout
	   collapses to fewer columns. */
	.cp-footer__grid > .cp-footer__col--brand + .cp-footer__col {
		padding-left: clamp(2rem, 3vw, 3rem);
		border-left: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 12%, transparent);
	}

	.cp-footer__col--brand {
		padding-right: clamp(1rem, 2vw, 2rem);
	}
}

.cp-footer__col .cp-brand__wordmark {
	color: var(--cp-color-acik-metin);
	display: block;
	margin-bottom: var(--cp-space-sm);
}

.cp-footer__logo {
	display: block;
	height: auto;
	width: auto;
	max-width: 180px;
	max-height: 56px;
	margin-bottom: var(--cp-space-md);
}

/* Looser leading than the link lists: this is the only prose in the footer
   and it needs to read as a paragraph, not as another dense list. The
   measure stays at ~34ch so it wraps to three or four short lines under
   the logo rather than running the full width of the brand column. */
.cp-footer__description {
	margin: 0;
	font-size: clamp(0.88rem, 0.84rem + 0.15vw, 0.95rem);
	line-height: 1.75;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 72%, transparent);
	max-width: 34ch;
}

/* Column titles: small, letter-spaced, uppercase gold with a short rule
   beneath. At footer scale a heading set in the display face at near-body
   size reads as just another line of text, whereas tracking + a rule gives
   each column an unmistakable start without enlarging anything. */
.cp-footer__heading {
	margin: 0 0 var(--cp-space-md);
	padding-bottom: 0.6rem;
	position: relative;
	font-family: var(--cp-font-heading);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cp-color-sicak-altin);
}

.cp-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 28px;
	height: 2px;
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 85%, var(--cp-color-sicak-altin));
}

/* Yasal links live inside the İletişim column (not their own column) so the
   footer doesn't grow an extra row on narrower widths - this subheading
   keeps them visually distinct without the weight of a full column title. */
.cp-footer__subheading {
	margin: var(--cp-space-lg) 0 var(--cp-space-sm);
	font-family: var(--cp-font-heading);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 65%, transparent);
}

.cp-footer__menu,
.cp-footer__social,
.cp-footer__contact,
.cp-footer__legal,
.cp-footer__hours {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cp-space-sm);
	font-size: clamp(0.85rem, 0.8rem + 0.1vw, 0.9rem);
}

/* Links sit at 78% of the cream text colour at rest and go to full gold on
   hover. The dimmed rest state is what lets the gold column headings stay
   the brightest thing in each column, so the eye lands on structure first
   and individual links second. */
.cp-footer__menu a,
.cp-footer__contact a,
.cp-footer__legal a {
	display: inline-block;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 78%, transparent);
	text-decoration: none;
	transition: color var(--cp-transition-fast), transform var(--cp-transition-fast);
}

/* Nudging right on hover (rather than underlining) keeps the vertical
   rhythm of the list intact - an underline appearing and disappearing
   makes a tight list look like it is twitching. */
.cp-footer__menu a:hover,
.cp-footer__contact a:hover,
.cp-footer__legal a:hover,
.cp-footer__menu a:focus-visible,
.cp-footer__contact a:focus-visible,
.cp-footer__legal a:focus-visible {
	color: var(--cp-color-sicak-altin);
	transform: translateX(3px);
}

/* Social links are a horizontal row of pills, not another vertical list -
   they are a different kind of destination from the nav/legal links above,
   and the shape says so without needing a heading of their own. */
.cp-footer__social {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--cp-space-sm);
	margin-top: var(--cp-space-md);
}

.cp-footer__social a {
	display: inline-flex;
	align-items: center;
	padding: 0.45em 0.95em;
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 18%, transparent);
	border-radius: 999px;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 82%, transparent);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color var(--cp-transition-fast), border-color var(--cp-transition-fast), background-color var(--cp-transition-fast);
}

.cp-footer__social a:hover,
.cp-footer__social a:focus-visible {
	color: var(--cp-color-antrasit);
	background: var(--cp-color-sicak-altin);
	border-color: var(--cp-color-sicak-altin);
}

/* A dotted leader between day and hours, the way an opening-hours board is
   actually set - it ties the two sides of the row together across the gap
   instead of leaving two disconnected columns of text. */
.cp-footer__hours-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cp-space-sm);
}

.cp-footer__hours-day {
	color: color-mix(in srgb, var(--cp-color-acik-metin) 70%, transparent);
	white-space: nowrap;
}

.cp-footer__hours-row::before {
	content: "";
	order: 1;
	flex: 1 1 auto;
	min-width: 1.5rem;
	height: 1px;
	transform: translateY(-0.2em);
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--cp-color-acik-metin) 22%, transparent) 0 2px,
		transparent 2px 5px
	);
	background-size: 5px 1px;
	background-repeat: repeat-x;
}

.cp-footer__hours-value {
	order: 2;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--cp-color-acik-metin);
	text-align: right;
}

.cp-footer__bottom {
	border-top: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 12%, transparent);
	padding: var(--cp-space-md) var(--cp-container-padding);
}

.cp-footer__copyright {
	max-width: var(--cp-container-width);
	margin: 0 auto;
	font-size: clamp(0.75rem, 0.7rem + 0.1vw, 0.8rem);
	letter-spacing: 0.02em;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 55%, transparent);
	text-align: center;
}

/* Mobile fixed order button: a floating vertical tab flush against the
   right edge (icon + rotated text) instead of a full-width bottom bar, so
   it stays out of the way of page content. Positioned mid-screen (top:53%)
   so it stays clear of the bottom-of-screen thumb zone the WhatsApp/Konum
   dock (.cp-mobile-cta-bar) occupies - the two are meant to coexist. */

.cp-order-fab {
	display: none;
	position: fixed;
	top: 53%;
	right: 0;
	transform: translateY(-50%);
	z-index: var(--cp-z-fab);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 48px;
	height: 126px;
	padding: 0;
	background: linear-gradient(160deg, var(--cp-color-tugla-kahvesi) 0%, color-mix(in srgb, var(--cp-color-tugla-kahvesi) 55%, var(--cp-color-narcicegi)) 100%);
	color: var(--cp-color-acik-metin);
	border-radius: 15px 0 0 15px;
	text-align: center;
	text-decoration: none;
	font-family: var(--cp-font-body);
	font-weight: 600;
	box-shadow: -3px 4px 16px color-mix(in srgb, var(--cp-color-antrasit) 30%, transparent);
	-webkit-tap-highlight-color: transparent;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.cp-order-fab:hover,
.cp-order-fab:focus-visible {
	background: linear-gradient(160deg, var(--cp-color-tugla-kahvesi) 0%, var(--cp-color-narcicegi) 100%);
	box-shadow: -4px 6px 20px color-mix(in srgb, var(--cp-color-antrasit) 38%, transparent);
}

.cp-order-fab:active {
	background: color-mix(in srgb, var(--cp-color-tugla-kahvesi) 80%, black);
}

.cp-order-fab:link,
.cp-order-fab:visited,
.cp-order-fab:hover,
.cp-order-fab:active,
.cp-order-fab:focus {
	color: var(--cp-color-acik-metin);
}

.cp-order-fab__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.cp-order-fab__text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.cp-order-fab {
		transition: none;
	}
}

@media screen and (max-width: 600px) {
	.cp-order-fab {
		display: flex;
	}

	/* Any overlay that locks page scroll (mobile hamburger menu, gallery
	   lightbox - see .cp-scroll-lock usages in main.js) sits above the FAB's
	   fixed band and would otherwise show it floating over the overlay. */
	body.cp-scroll-lock .cp-order-fab {
		display: none;
	}

	/* The fixed FAB sits at a constant viewport-relative band (top:53%,
	   right:0) regardless of scroll position, so any full-width form control
	   that happens to scroll under that band would otherwise render partly
	   hidden beneath it. Reserving its width + shadow as right padding on
	   every text input/textarea keeps them clear of that lane everywhere,
	   not just on the one page this was first noticed on. */
	body:not(.cp-order-flow-page) .wpcf7-form-control,
	body.woocommerce-account input.input-text,
	body.woocommerce-account select,
	body.woocommerce-account textarea {
		width: calc(100% - 56px);
	}
}

/* ==========================================================================
   Mobil ikili sabit CTA bar (WhatsApp Sipariş + Konuma Git). Yalnızca
   civikli_pide_get_mobile_cta_bar_links() dolu bir dizi döndürdüğünde
   (bkz. functions.php + footer.php) render edilir: Ana Sayfa, Hakkımızda,
   Menü, Galeri, İletişim ve Yasal sayfalarda; Online Sipariş/Sepet/
   Checkout'ta hiç basılmaz, bu yüzden oradaki sepet bottom bar'ıyla asla
   aynı anda var olamaz. Göründüğü sayfalarda "Sipariş Ver" FAB'ı
   (.cp-order-fab) ile birlikte, aralarında güvenli mesafeyle görünür.
   ========================================================================== */

.cp-mobile-cta-bar {
	display: none;
}

@media screen and (max-width: 767px) {
	/* Sipariş Ver FAB (top:53%, mid-screen) ve alttaki WhatsApp/Konum dock'u
	   (bottom, ~58-70px yükseklik) aynı anda görünür - aralarında yeterli
	   düşey mesafe olduğundan (bkz. .cp-order-fab top konumu) çakışmazlar. */

	/* Sabit dock'un altta kalan içeriği (özellikle footer'ın son
	   linklerini) kapatmaması için sayfaya dock yüksekliği + kendi alt
	   boşluğu + üstünde bir nefes payı kadar alt boşluk. bottom offset ile
	   birebir aynı max(12px, safe-area) mantığı kullanılıyor, yoksa
	   çentikli telefonlarda içerik gereğinden fazla kesilir/boşluk kalır. */
	/* The clearance is added to the footer's own last row, NOT to <body>.
	   Padding on <body> sits outside the footer, so it painted the page's
	   cream background below the footer's dark surface - a white-looking
	   strip across the very bottom of every mobile page, under what should
	   be the final edge of the site. Putting the same distance on
	   .cp-footer__bottom keeps the dock's clearance identical while the
	   space itself stays part of the footer. */
	body.cp-has-mobile-cta-bar .cp-footer__bottom {
		padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--cp-mobile-cta-bar-height) + 12px);
	}

	/* Tek premium koyu "dock": iki ayrı iri renkli buton değil, tek sakin
	   koyu yüzey - yeşil/narçiçeği yalnızca ikon rozetlerinde vurgu olarak
	   kullanılıyor. Ağır siyah/turuncu çerçeve, plastik gradyan veya
	   glassmorphism yok.
	   KRİTİK: dock'un kendisine (veya herhangi bir ata elementine) asla
	   opacity verilmez - bu, içindeki metni/ikonları/rozetleri/linkleri de
	   soldururdu. Yalnızca aşağıdaki ::before katmanının arka plan rengi
	   rgba() alfa kanalı üzerinden yarı saydam; gerçek buton içeriği (bkz.
	   .cp-mobile-cta-bar__action ve altındaki her şey) her zaman tam opak
	   kalır. isolation:isolate + ::before'a z-index:-1, bu katmanın içerik
	   katmanının HER ZAMAN üstünde değil altında kalmasını garanti eder. */
	.cp-mobile-cta-bar {
		--cp-dock-alpha: 0.18;
		display: flex;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: max(12px, env(safe-area-inset-bottom));
		z-index: var(--cp-z-mobile-cta-bar);
		max-height: 58px;
		min-height: 52px;
		background: transparent;
		border-radius: 18px;
		overflow: hidden;
		isolation: isolate;
	}

	.cp-mobile-cta-bar::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: inherit;
		background: rgba(26, 19, 16, var(--cp-dock-alpha));
		border: 1px solid rgba(107, 58, 36, calc(.28 + var(--cp-dock-alpha) * .45));
		box-shadow: 0 7px 20px rgba(26, 19, 16, calc(.08 + var(--cp-dock-alpha) * .18));
		backdrop-filter: blur(calc(3px + var(--cp-dock-alpha) * 6px));
		-webkit-backdrop-filter: blur(calc(3px + var(--cp-dock-alpha) * 6px));
		pointer-events: none;
		transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, backdrop-filter 260ms ease;
	}

	/* Transparent/frosted at the very top of the page; once the visitor has
	   scrolled down a little (see initMobileCtaBarScroll() in main.js -
	   plain scroll distance, not tied to the homepage hero) the same
	   --cp-dock-alpha custom property drives all of ::before's dependent
	   values up to a normal, solid-reading surface. Only the alpha number
	   changes here - never opacity on the dock or its content. */
	.cp-mobile-cta-bar.is-scrolled {
		--cp-dock-alpha: 0.94;
	}

	/* Çok kontrollü üst köz ışığı: merkezde hafifçe belirginleşip
	   kenarlarda tamamen kayboluyor - parlak neon çizgi hissi vermiyor.
	   ::before artık arka plan katmanına ayrıldığı için bu çizgi ::after'a
	   taşındı. */
	.cp-mobile-cta-bar::after {
		content: '';
		position: absolute;
		top: 0;
		left: 14%;
		right: 14%;
		height: 2px;
		background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--cp-color-sicak-altin) 65%, var(--cp-color-koz-kirmizisi)) 50%, transparent 100%);
		opacity: 0.5;
		pointer-events: none;
	}

	/* Mobil menü/ürün modalı/sepet bottom sheet gibi daha üst katmanlar
	   (--cp-z-mobile-nav ve üzeri) açıkken dock görsel olarak onların
	   altında kalır; ayrıca body scroll kilitliyken (mobil menü/modal
	   açıkken tema genelinde kullanılan ortak davranış) dock tıklanamaz
	   hale gelir. */
	body.cp-scroll-lock .cp-mobile-cta-bar {
		visibility: hidden;
		pointer-events: none;
	}

	.cp-mobile-cta-bar__action {
		display: flex;
		flex: 1 1 50%;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 4px 14px;
		color: var(--cp-color-acik-metin);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
		transition: background-color var(--cp-transition-fast), transform var(--cp-transition-fast);
	}

	.cp-mobile-cta-bar__action--full {
		flex: 1 1 100%;
	}

	.cp-mobile-cta-bar__action:link,
	.cp-mobile-cta-bar__action:visited,
	.cp-mobile-cta-bar__action:hover,
	.cp-mobile-cta-bar__action:active,
	.cp-mobile-cta-bar__action:focus {
		color: var(--cp-color-acik-metin);
	}

	.cp-mobile-cta-bar__action:hover,
	.cp-mobile-cta-bar__action:focus-visible {
		background: color-mix(in srgb, var(--cp-color-acik-metin) 6%, transparent);
	}

	.cp-mobile-cta-bar__action:hover .cp-mobile-cta-bar__badge,
	.cp-mobile-cta-bar__action:focus-visible .cp-mobile-cta-bar__badge {
		transform: translateY(-1px);
	}

	.cp-mobile-cta-bar__action:active {
		transform: scale(0.985);
	}

	.cp-mobile-cta-bar__action:focus-visible {
		outline: 2px solid var(--cp-color-sicak-altin);
		outline-offset: -2px;
	}

	.cp-mobile-cta-bar__badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		flex-shrink: 0;
		border-radius: 50%;
		transition: transform var(--cp-transition-fast);
	}

	.cp-mobile-cta-bar__action--whatsapp .cp-mobile-cta-bar__badge {
		background: var(--cp-color-whatsapp-koyu);
	}

	.cp-mobile-cta-bar__action--location .cp-mobile-cta-bar__badge {
		background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 82%, var(--cp-color-tugla-kahvesi));
	}

	.cp-mobile-cta-bar__icon {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
	}

	.cp-mobile-cta-bar__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
		gap: 1px;
	}

	.cp-mobile-cta-bar__label {
		font-family: var(--cp-font-body);
		font-weight: 700;
		font-size: clamp(0.81rem, 0.74rem + 0.3vw, 0.94rem);
		line-height: 1.2;
		white-space: nowrap;
	}

	.cp-mobile-cta-bar__hint {
		color: rgba(246, 240, 231, .66);
		font-family: var(--cp-font-body);
		font-weight: 500;
		font-size: clamp(0.63rem, 0.6rem + 0.1vw, 0.75rem);
		line-height: 1.2;
		white-space: nowrap;
	}

	.cp-mobile-cta-bar__divider {
		align-self: center;
		width: 1px;
		height: 34px;
		flex-shrink: 0;
		background: rgba(246, 240, 231, .16);
	}
}

/* 360px ve altında yardımcı metinler önce gizlenir; rozet/iç boşluk biraz
   daraltılır; ana metin artık nowrap değil (gerekirse iki satıra sarar) -
   320px'de bile "Konuma Git" gibi metinlerin .cp-mobile-cta-bar'ın kendi
   overflow:hidden'ı tarafından kırpılmaması için. İkonlar ve ana metin her
   zaman kalır, yalnızca yardımcı metin kayboluyor. */
@media screen and (max-width: 360px) {
	.cp-mobile-cta-bar__hint {
		display: none;
	}

	.cp-mobile-cta-bar__label {
		white-space: normal;
		line-height: 1.15;
	}

	.cp-mobile-cta-bar__badge {
		width: 30px;
		height: 30px;
	}

	.cp-mobile-cta-bar__action {
		gap: 8px;
		padding: 4px 10px;
	}
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.cp-mobile-cta-bar__action,
	.cp-mobile-cta-bar__badge,
	.cp-mobile-cta-bar::before {
		transition: none;
	}

	.cp-header,
	.cp-preheader,
	.cp-nav__list a,
	.cp-nav__list a::after,
	.cp-mobile-nav__overlay,
	.cp-mobile-nav__panel,
	.cp-mainnav__inner,
	.cp-logo,
	.cp-logo__img,
	.cp-logo__badge,
	.cp-order-cta,
	.cp-order-cta .cp-btn__icon,
	.cp-flavor-card,
	.cp-flavor-card__img,
	.cp-flavor-card__link span,
	.cp-gallery__button span,
	.cp-btn {
		transition-duration: 0.01ms;
	}
}

/* ==========================================================================
   Hakkımızda (About) page - page-about.php. New page-specific classes
   throughout (cp-about-*) rather than reusing the homepage's section
   classes directly: same brand language and CSS custom properties, but a
   page of its own, not a re-skinned copy of front-page.php.
   ========================================================================== */

/* Sayfa Hero: typographic only, no image/video/CTA by design. A very
   faint diagonal crosshatch (CSS only, no image asset) keeps the antrasit
   panel from reading as an empty block without competing with the text. */

.cp-about-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(360px, 38vw, 460px);
	padding-block: clamp(3rem, 3rem + 4vw, 5rem);
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
}

.cp-about-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--cp-color-sicak-altin) 5%, transparent) 0 1px, transparent 1px 28px),
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cp-color-koz-kirmizisi) 4%, transparent) 0 1px, transparent 1px 28px);
	pointer-events: none;
}

/* Taş Fırın kimliği: çok hafif, köşede bir tuğla tonu parıltısı - Hakkımızda
   sayfası ustalık/gelenek anlatısına sessizce eşlik ediyor, mevcut
   crosshatch dokusunun üstüne, içerikle asla yarışmayacak kadar düşük
   opaklıkta. */
.cp-about-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(45% 60% at 100% 100%, color-mix(in srgb, var(--cp-color-brick) 16%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.cp-about-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	padding-inline: var(--cp-container-padding);
	text-align: center;
}

.cp-about-hero__inner .cp-kicker {
	justify-content: center;
	margin-bottom: var(--cp-space-md);
}

.cp-about-hero__title {
	margin: 0 0 var(--cp-space-md);
	font-family: var(--cp-font-heading);
	font-size: clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
	line-height: 1.12;
	color: var(--cp-color-acik-metin);
}

.cp-about-hero__text {
	max-width: 62ch;
	margin: 0 auto;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
	font-size: clamp(1rem, 0.94rem + 0.25vw, 1.15rem);
	line-height: 1.65;
}

/* Hikâyemiz: controlled asymmetric two-column layout. Falls back to a
   single centered text column (no empty media box) when no image has
   been chosen yet. */

.cp-about-story {
	background: var(--cp-color-warm-white);
	padding-block: var(--cp-section-py);
}

.cp-about-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 4vw, 4rem);
}

.cp-about-story__inner--text-only {
	grid-template-columns: minmax(0, 1fr);
	max-width: 680px;
	margin-inline: auto;
	text-align: center;
}

.cp-about-story__inner--text-only .cp-kicker {
	justify-content: center;
}

.cp-about-story__media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--cp-radius-md);
}

.cp-about-story__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-about-story__media::after {
	content: '';
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 34px;
	height: 34px;
	border-right: 2px solid var(--cp-color-sicak-altin);
	border-bottom: 2px solid var(--cp-color-sicak-altin);
	opacity: 0.85;
	pointer-events: none;
}

.cp-about-story__text {
	max-width: var(--cp-measure);
	margin: 0 0 var(--cp-space-md);
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 85%, transparent);
	line-height: 1.75;
}

.cp-about-story__text:last-of-type {
	margin-bottom: 0;
}

/* Ustalık ve Taş Fırın: soft-dark surface (not pure antrasit, not pure
   black), an optional wide oven photo, then up to 3 editorial "principle"
   entries separated by a thin rule instead of icon cards. */

.cp-about-craft {
	position: relative;
	overflow: hidden;
	background: var(--cp-color-koyu-metin);
	color: var(--cp-color-acik-metin);
	padding-block: var(--cp-section-py);
}

/* Ateş & Köz kimliği: köşede çok hafif bir köz ışığı - parlak bir turuncu
   blok değil, içerikle asla yarışmayacak kadar düşük opaklıkta bir parıltı. */
.cp-about-craft::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(50% 65% at 8% 100%, color-mix(in srgb, var(--cp-color-narcicegi) 14%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.cp-about-craft__head {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.cp-about-craft__head .cp-kicker {
	color: var(--cp-color-sicak-altin);
}

.cp-about-craft__text {
	max-width: 60ch;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
	line-height: 1.7;
}

.cp-about-craft__media {
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: var(--cp-radius-md);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.cp-about-craft__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-about-craft__principles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-about-craft__principle {
	padding-left: 1.1rem;
	border-left: 1px solid color-mix(in srgb, var(--cp-color-sicak-altin) 35%, transparent);
}

.cp-about-craft__principle-index {
	display: block;
	margin-bottom: 6px;
	color: var(--cp-color-sicak-altin);
	font-family: var(--cp-font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.cp-about-craft__principle-title {
	margin: 0 0 6px;
	font-family: var(--cp-font-heading);
	font-size: 1.05rem;
	color: var(--cp-color-acik-metin);
}

.cp-about-craft__principle-desc {
	margin: 0;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 78%, transparent);
	font-size: 0.88rem;
	line-height: 1.6;
}

/* Sofraya Gelen Değerler: thin top rule per value instead of icon cards,
   so a missing icon set never becomes a dependency. auto-fit lets the
   column count follow however many of the (max 4) values actually have a
   title, without extra PHP-computed layout classes. */

.cp-about-values {
	background: var(--cp-color-sicak-krem);
	padding-block: var(--cp-section-py);
}

.cp-about-values__head {
	max-width: 640px;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.cp-about-values__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-about-values__mark {
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 12px;
	background: var(--cp-color-koz-kirmizisi);
}

.cp-about-values__title {
	margin: 0 0 6px;
	font-family: var(--cp-font-heading);
	font-size: 1.05rem;
	color: var(--cp-color-koyu-metin);
}

.cp-about-values__desc {
	margin: 0;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 68%, transparent);
	font-size: 0.88rem;
	line-height: 1.6;
}

/* Görsel Hikâye: up to 3 photos, cinematic asymmetric composition on
   desktop (1 large + 2 stacked small for 3 photos), adapting down to 2
   equal tiles or 1 wide banner - same adaptive-count approach as the
   homepage gallery, but its own grid (not shared selectors), sized for a
   3-photo maximum instead of 4. */

.cp-about-gallery {
	position: relative;
	overflow: hidden;
	background: var(--cp-color-warm-white);
	padding-block: var(--cp-section-py);
}

/* Un & Hamur kimliği: üst köşede yumuşak, un tozu hissi veren bir şekil -
   düz bir daire değil, hafif düzensiz bir "serpinti" hissi için birden çok
   üst üste radyal leke. İçerikle asla yarışmayacak kadar düşük opaklıkta. */
.cp-about-gallery::before {
	content: '';
	position: absolute;
	z-index: 0;
	top: -10%;
	right: -6%;
	width: clamp(220px, 26vw, 380px);
	height: clamp(220px, 26vw, 380px);
	background:
		radial-gradient(60% 60% at 40% 35%, color-mix(in srgb, var(--cp-color-dough) 45%, transparent) 0%, transparent 75%),
		radial-gradient(45% 45% at 70% 65%, color-mix(in srgb, var(--cp-color-flour) 40%, transparent) 0%, transparent 75%);
	border-radius: 50%;
	pointer-events: none;
}

.cp-about-gallery .cp-container {
	position: relative;
	z-index: 1;
}

/* The grid/carousel item markup itself is shared with the homepage's
   Mutfaktan Kareler section - see the single .cp-media-gallery component
   further down instead of a second copy here. */

.cp-about-gallery__cta {
	margin: var(--cp-space-lg) 0 0;
	text-align: center;
}

.cp-about-gallery__button {
	background: transparent;
	color: var(--cp-color-koyu-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 25%, transparent);
}

.cp-about-gallery__button:hover {
	border-color: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-koz-kirmizisi);
}

.cp-about-gallery__button span {
	transition: transform var(--cp-transition-fast);
}

.cp-about-gallery__button:hover span,
.cp-about-gallery__button:focus-visible span {
	transform: translateX(3px);
}

/* Kapanış CTA: short, centered, typography-led closing panel - not a
   repeat of the footer's own CTA strip. */

.cp-about-cta {
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	padding-block: var(--cp-section-py);
	text-align: center;
}

.cp-about-cta__inner {
	max-width: 720px;
	margin: 0 auto;
}

.cp-about-cta__inner .cp-kicker {
	justify-content: center;
}

.cp-about-cta__heading {
	margin: 0 0 var(--cp-space-sm);
	font-family: var(--cp-font-heading);
	font-size: var(--cp-heading-lg);
	color: var(--cp-color-acik-metin);
}

.cp-about-cta__text {
	max-width: 56ch;
	margin: 0 auto;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
	line-height: 1.65;
}

.cp-about-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cp-space-md);
	margin-top: clamp(1.5rem, 3vw, 2rem);
}

.cp-about-cta__secondary {
	background: transparent;
	color: var(--cp-color-acik-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 30%, transparent);
}

.cp-about-cta__secondary:hover {
	border-color: var(--cp-color-sicak-altin);
	color: var(--cp-color-sicak-altin);
}

@media screen and (max-width: 860px) {
	.cp-about-story__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cp-about-story__media {
		aspect-ratio: 16 / 10;
	}

	.cp-about-craft__principles {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.cp-about-values__grid {
		grid-template-columns: minmax(0, 1fr);
	}

}

@media screen and (max-width: 480px) {
	.cp-about-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cp-about-cta__actions .cp-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-about-gallery__button span {
		transition-duration: 0.01ms;
	}
}

/* ==========================================================================
   Shared media gallery: used by both the homepage's "Mutfaktan Kareler"
   and the About page's "Görsel Hikâye" sections (civikli_pide_render_media_gallery()
   in functions.php). 1-3 items render as a static, controlled asymmetric
   editorial grid; 4+ automatically become a swipeable one-at-a-time
   carousel (initMediaCarousels() in main.js) instead of an unstyled list -
   an unlimited repeater needs somewhere for "many" photos to go that
   still stays calm and premium, not a dense wall of thumbnails.
   ========================================================================== */

.cp-media-gallery__item {
	overflow: hidden;
	border-radius: var(--cp-radius-md);
}

.cp-media-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cp-transition-base);
}

.cp-media-gallery__video {
	position: relative;
	width: 100%;
	height: 100%;
}

.cp-media-gallery__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Static grid (1-3 items) */

ul.cp-media-gallery {
	--cp-media-gallery-row: clamp(150px, 15vw, 210px);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cp-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-media-gallery__item:hover .cp-media-gallery__img,
.cp-media-gallery__item:focus-within .cp-media-gallery__img {
	transform: scale(1.03);
}

@media screen and (min-width: 601px) {
	.cp-media-gallery--count-3 {
		grid-template-rows: repeat(2, var(--cp-media-gallery-row));
	}

	.cp-media-gallery--count-3 .cp-media-gallery__item:nth-child(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.cp-media-gallery--count-3 .cp-media-gallery__item:nth-child(2) {
		grid-column: 3 / 4;
		grid-row: 1 / 2;
	}

	.cp-media-gallery--count-3 .cp-media-gallery__item:nth-child(3) {
		grid-column: 3 / 4;
		grid-row: 2 / 3;
	}

	.cp-media-gallery--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cp-media-gallery--count-2 .cp-media-gallery__item {
		aspect-ratio: 4 / 3;
	}

	.cp-media-gallery--count-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.cp-media-gallery--count-1 .cp-media-gallery__item {
		aspect-ratio: 21 / 9;
	}
}

@media screen and (max-width: 600px) {
	ul.cp-media-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cp-media-gallery--count-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.cp-media-gallery--count-1 .cp-media-gallery__item {
		aspect-ratio: 16 / 10;
	}

	ul.cp-media-gallery .cp-media-gallery__item {
		aspect-ratio: 1 / 1;
	}
}

/* Carousel (4+ items): one slide at a time, arrows + dots, drag/swipe via
   initMediaCarousels(). Slides keep the same 21:9 cinematic frame at every
   width so photos and YouTube embeds sit in one consistent shape. */

.cp-media-gallery--carousel {
	position: relative;
}

.cp-media-gallery__viewport {
	overflow: hidden;
	border-radius: var(--cp-radius-md);
}

.cp-media-gallery__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	touch-action: pan-y;
}

.cp-media-gallery--carousel .cp-media-gallery__item {
	flex: 0 0 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0;
}

.cp-media-gallery--carousel .cp-media-gallery__img,
.cp-media-gallery--carousel .cp-media-gallery__video {
	user-select: none;
	-webkit-user-drag: none;
}

.cp-media-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--cp-color-warm-white);
	color: var(--cp-color-koyu-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 15%, transparent);
	border-radius: 50%;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--cp-color-antrasit) 18%, transparent);
	cursor: pointer;
	transform: translateY(-50%);
}

.cp-media-gallery__nav svg {
	width: 16px;
	height: 16px;
}

.cp-media-gallery__nav--prev {
	left: 12px;
}

.cp-media-gallery__nav--next {
	right: 12px;
}

.cp-media-gallery__nav:hover {
	color: var(--cp-color-koz-kirmizisi);
}

.cp-media-gallery__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--cp-space-md);
}

.cp-media-gallery__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	background: color-mix(in srgb, var(--cp-color-antrasit) 20%, transparent);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.cp-media-gallery__dot.is-active {
	background: var(--cp-color-koz-kirmizisi);
}

@media (prefers-reduced-motion: reduce) {
	.cp-media-gallery__img,
	.cp-media-gallery__track {
		transition-duration: 0.01ms;
	}
}

/* ==========================================================================
   İletişim (Contact) page - page-contact.php. New page-specific classes
   throughout (cp-contact-*), same brand language and CSS custom properties
   as Ana Sayfa/Hakkımızda but not a copy of either.
   ========================================================================== */

/* Sayfa Hero: typographic only, left-aligned (not centered like the About
   page's hero) with a quiet corner glow instead of a crosshatch texture -
   same family, a different composition. */

.cp-contact-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(320px, 30vw, 420px);
	padding-block: clamp(2.5rem, 2.5rem + 2vw, 4rem);
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
}

.cp-contact-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(55% 75% at 92% 105%, color-mix(in srgb, var(--cp-color-koz-kirmizisi) 20%, transparent) 0%, transparent 70%),
		radial-gradient(45% 55% at 100% -5%, color-mix(in srgb, var(--cp-color-sicak-altin) 14%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.cp-contact-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--cp-container-width);
	margin: 0 auto;
	padding-inline: var(--cp-container-padding);
}

.cp-contact-hero__title {
	max-width: 18ch;
	margin: 0 0 var(--cp-space-md);
	font-family: var(--cp-font-heading);
	font-size: clamp(2rem, 1.7rem + 1.6vw, 2.75rem);
	line-height: 1.15;
	color: var(--cp-color-acik-metin);
}

.cp-contact-hero__text {
	max-width: 56ch;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
	font-size: clamp(1rem, 0.94rem + 0.25vw, 1.1rem);
	line-height: 1.65;
}

/* Hızlı İletişim: premium icon-chip cards right under the hero, lifted off
   the section background with their own surface, radius and shadow instead
   of a flat hairline-divider strip. */

.cp-contact-quick {
	background: var(--cp-color-warm-white);
	padding-block: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
}

.cp-contact-quick__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.75rem, 0.6rem + 0.7vw, 1.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-contact-quick__item {
	flex: 1 1 220px;
}

.cp-contact-quick__link {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	height: 100%;
	padding: 14px 18px;
	background: var(--cp-color-sicak-krem);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 8%, transparent);
	border-radius: var(--cp-radius-md);
	color: var(--cp-color-koyu-metin);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	box-shadow: 0 6px 16px -12px rgba(10, 8, 6, 0.35);
	transition: transform var(--cp-transition-fast), box-shadow var(--cp-transition-fast), border-color var(--cp-transition-fast);
}

.cp-contact-quick__link:hover,
.cp-contact-quick__link:focus-visible {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 40%, transparent);
	box-shadow: 0 10px 22px -12px rgba(10, 8, 6, 0.45);
}

.cp-contact-quick__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 12%, transparent);
	border-radius: 50%;
}

.cp-contact-quick__icon svg {
	width: 17px;
	height: 17px;
	color: var(--cp-color-koz-kirmizisi);
}

/* Şubemiz ve İletişim Bilgileri: facts on the left, full week hours on the
   right - an editorial two-column pairing, not a card. */

.cp-contact-visit {
	background: var(--cp-color-sicak-krem);
	padding-block: var(--cp-section-py);
}

.cp-contact-visit__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

.cp-contact-visit__text {
	max-width: var(--cp-measure);
	margin: 0 0 var(--cp-space-md);
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 85%, transparent);
	line-height: 1.7;
}

.cp-contact-visit__facts {
	margin: 0 0 var(--cp-space-md);
	padding: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
	background: var(--cp-color-warm-white);
	border-radius: var(--cp-radius-md);
	box-shadow: 0 10px 28px -18px rgba(10, 8, 6, 0.4);
	font-style: normal;
}

.cp-contact-visit__fact {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 8px 0;
	color: var(--cp-color-koyu-metin);
	font-size: 0.95rem;
}

.cp-contact-visit__fact:not(:last-child) {
	border-bottom: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 8%, transparent);
}

.cp-contact-visit__fact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 12%, transparent);
	border-radius: 50%;
	color: var(--cp-color-koz-kirmizisi);
}

.cp-contact-visit__fact-icon svg {
	width: 15px;
	height: 15px;
}

.cp-contact-visit__fact a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.cp-contact-visit__fact a:hover,
.cp-contact-visit__fact a:focus-visible {
	border-bottom-color: currentColor;
}

.cp-contact-visit__status {
	flex-wrap: wrap;
	margin: 0 0 var(--cp-space-md);
	color: var(--cp-color-koyu-metin);
}

.cp-contact-visit__today {
	margin-left: 4px;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 60%, transparent);
	font-size: 0.85rem;
}

.cp-contact-visit__directions {
	background: transparent;
	color: var(--cp-color-koyu-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 25%, transparent);
}

.cp-contact-visit__directions:hover {
	border-color: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-koz-kirmizisi);
}

.cp-contact-visit__hours {
	padding: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
	background: var(--cp-color-antrasit);
	border-radius: var(--cp-radius-md);
	box-shadow: 0 14px 34px -20px rgba(10, 8, 6, 0.5);
}

.cp-contact-visit__hours-title {
	margin: 0 0 var(--cp-space-sm);
	font-family: var(--cp-font-heading);
	font-size: 1.1rem;
	color: var(--cp-color-acik-metin);
}

.cp-contact-hours-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-contact-hours-list__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 12%, transparent);
	color: color-mix(in srgb, var(--cp-color-acik-metin) 80%, transparent);
	font-size: 0.9rem;
}

.cp-contact-hours-list__row:last-child {
	border-bottom: 0;
}

.cp-contact-hours-list__row.is-today {
	color: var(--cp-color-sicak-altin);
	font-weight: 700;
}

/* Harita: near-full-width, no heavy shadow, no oversized radius. */

.cp-contact-map {
	background: var(--cp-color-warm-white);
	padding-block: var(--cp-section-py);
}

.cp-contact-map__header {
	margin-bottom: var(--cp-space-lg);
}

.cp-contact-map__header .cp-heading-lg {
	margin: 0;
}

.cp-contact-map__frame {
	position: relative;
	aspect-ratio: 16 / 6;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
	border-radius: var(--cp-radius-md);
	box-shadow: 0 20px 44px -26px rgba(10, 8, 6, 0.45);
}

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

/* İletişim Formu: Contact Form 7's own markup, styled to match the site
   instead of its bare default look. Scoped entirely to .cp-contact-form-wrap
   so nothing here reaches any other CF7 form on the site. */

.cp-contact-form-section {
	background: var(--cp-color-sicak-krem);
	padding-block: var(--cp-section-py);
}

.cp-contact-form__note {
	max-width: 60ch;
	margin: 0 auto var(--cp-space-lg);
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 68%, transparent);
	font-size: 0.9rem;
	text-align: center;
}

.cp-contact-form-wrap {
	max-width: 760px;
	margin: 0 auto;
}

.cp-contact-form-wrap .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cp-space-md) var(--cp-space-lg);
}

.cp-contact-form-wrap .cp-form-field {
	margin: 0;
}

.cp-contact-form-wrap .cp-form-field--full {
	grid-column: 1 / -1;
}

.cp-contact-form-wrap label {
	display: block;
	margin-bottom: 6px;
	color: var(--cp-color-koyu-metin);
	font-weight: 600;
	font-size: 0.85rem;
}

.cp-contact-form-wrap .wpcf7-form-control {
	width: 100%;
	min-height: 44px;
	padding: 0.6em 0.9em;
	background: var(--cp-color-warm-white);
	color: var(--cp-color-koyu-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 22%, transparent);
	border-radius: var(--cp-radius-sm);
	font-family: var(--cp-font-body);
	font-size: 0.95rem;
}

.cp-contact-form-wrap textarea.wpcf7-form-control {
	min-height: 120px;
	max-height: 220px;
	resize: vertical;
}

.cp-contact-form-wrap .wpcf7-form-control:focus-visible {
	outline: 2px solid var(--cp-color-koz-kirmizisi);
	outline-offset: 2px;
}

.cp-contact-form-wrap .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--cp-color-koz-kirmizisi);
}

.cp-contact-form-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	color: var(--cp-color-koz-kirmizisi);
	font-size: 0.8rem;
}

/* CF7 wraps [acceptance] in its own <span class="wpcf7-form-control-wrap">
   and <span class="wpcf7-form-control wpcf7-acceptance"> - both inline by
   default, so a long label (with the privacy-policy link text) could size
   past the viewport instead of wrapping. Forcing them to block, full-width
   keeps the flex label below actually able to wrap its own text. */

.cp-contact-form-wrap .wpcf7-form-control-wrap,
.cp-contact-form-wrap .wpcf7-form-control.wpcf7-acceptance {
	display: block;
	width: 100%;
	max-width: 100%;
}

.cp-contact-form-wrap .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	max-width: 100%;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 85%, transparent);
	font-weight: 400;
	font-size: 0.85rem;
	line-height: 1.5;
}

.cp-contact-form-wrap .wpcf7-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--cp-color-koz-kirmizisi);
}

.cp-contact-form-wrap .wpcf7-acceptance a {
	color: var(--cp-color-koz-kirmizisi);
}

.cp-contact-form-wrap .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.7em 1.8em;
	background: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-acik-metin);
	border: 0;
	border-radius: var(--cp-radius-sm);
	font-family: var(--cp-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color var(--cp-transition-fast);
}

.cp-contact-form-wrap .wpcf7-submit:hover {
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 82%, black);
}

.cp-contact-form-wrap .wpcf7-spinner {
	margin-left: 8px;
}

.cp-contact-form-wrap .wpcf7-response-output {
	margin: var(--cp-space-md) 0 0;
	padding: 0.8em 1em;
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 20%, transparent);
	border-radius: var(--cp-radius-sm);
	font-size: 0.9rem;
}

.cp-contact-form-wrap form.sent .wpcf7-response-output {
	border-color: #6fa65a;
	color: #3d6b2c;
	background: color-mix(in srgb, #6fa65a 12%, transparent);
}

.cp-contact-form-wrap form.failed .wpcf7-response-output,
.cp-contact-form-wrap form.aborted .wpcf7-response-output {
	border-color: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-koz-kirmizisi);
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 8%, transparent);
}

.cp-contact-form-wrap form.invalid .wpcf7-response-output,
.cp-contact-form-wrap form.spam .wpcf7-response-output,
.cp-contact-form-wrap form.unaccepted .wpcf7-response-output {
	border-color: var(--cp-color-sicak-altin);
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 80%, transparent);
	background: color-mix(in srgb, var(--cp-color-sicak-altin) 14%, transparent);
}

.cp-contact-admin-notice {
	max-width: 760px;
	margin: var(--cp-space-lg) auto;
	padding: 1em 1.2em;
	background: color-mix(in srgb, var(--cp-color-sicak-altin) 15%, transparent);
	border: 1px solid var(--cp-color-sicak-altin);
	border-radius: var(--cp-radius-sm);
	color: var(--cp-color-koyu-metin);
	font-size: 0.85rem;
	text-align: center;
}

/* Toplu Sipariş formu: page-toplu-siparis.php is plain HTML (no CF7), but
   reuses .cp-contact-form-wrap's own wpcf7-form-control/wpcf7-acceptance/
   wpcf7-submit class hooks above so it matches the İletişim form's look
   without duplicating every rule. Only the pieces that form genuinely
   doesn't have (server-rendered notice, honeypot, radio fieldset) need
   their own rules here. */

.cp-form-notice {
	max-width: 100%;
	margin: 0 0 var(--cp-space-md);
	padding: 0.8em 1em;
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 20%, transparent);
	border-radius: var(--cp-radius-sm);
	font-size: 0.9rem;
}

.cp-form-notice--success {
	border-color: #6fa65a;
	color: #3d6b2c;
	background: color-mix(in srgb, #6fa65a 12%, transparent);
}

.cp-form-notice--error {
	border-color: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-koz-kirmizisi);
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 8%, transparent);
}

.cp-bulk-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cp-bulk-fulfillment {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-md);
}

.cp-bulk-fulfillment legend {
	width: 100%;
	margin-bottom: 6px;
	color: var(--cp-color-koyu-metin);
	font-weight: 600;
	font-size: 0.85rem;
}

.cp-bulk-fulfillment label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	margin-bottom: 0;
}

.cp-bulk-delivery-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cp-space-md) var(--cp-space-lg);
}

.cp-bulk-delivery-fields[hidden] {
	display: none;
}

/* Ulaşım ve Ziyaret Notları: numbered, hairline-divided editorial list. */

.cp-contact-notes {
	background: var(--cp-color-warm-white);
	padding-block: var(--cp-section-py);
}

.cp-contact-notes__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.75rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-contact-notes__item {
	padding-top: var(--cp-space-sm);
	border-top: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 15%, transparent);
}

.cp-contact-notes__index {
	display: block;
	margin-bottom: 6px;
	color: var(--cp-color-koz-kirmizisi);
	font-family: var(--cp-font-heading);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.cp-contact-notes__title {
	margin: 0 0 6px;
	font-family: var(--cp-font-heading);
	font-size: 1.05rem;
	color: var(--cp-color-koyu-metin);
}

.cp-contact-notes__desc {
	margin: 0;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 68%, transparent);
	font-size: 0.88rem;
	line-height: 1.6;
}

/* Kapanış: short, centered, typography-led - not a repeat of the footer's
   own CTA strip. */

.cp-contact-closing {
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	padding-block: var(--cp-section-py);
	text-align: center;
}

.cp-contact-closing__inner {
	max-width: 640px;
	margin: 0 auto;
}

.cp-contact-closing__heading {
	margin: 0 0 var(--cp-space-sm);
	font-family: var(--cp-font-heading);
	font-size: var(--cp-heading-lg);
	color: var(--cp-color-acik-metin);
}

.cp-contact-closing__text {
	max-width: 56ch;
	margin: 0 auto var(--cp-space-md);
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
	line-height: 1.65;
}

.cp-contact-closing__cta {
	margin-top: var(--cp-space-sm);
}

@media screen and (max-width: 860px) {
	.cp-contact-visit__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.cp-contact-notes__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.cp-contact-quick__item {
		flex: 1 1 45%;
		border-right: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 10%, transparent);
	}

	.cp-contact-map__frame {
		aspect-ratio: 4 / 5;
	}

	.cp-contact-form-wrap .wpcf7-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Dijital Menü (page-menu.php, /menu/). Every selector below is scoped to
   classes that only exist on this one page/template (cp-menu-*), so none of
   it can leak onto the homepage, About, Contact, header or footer. Reuses
   the site's existing design tokens only - no new CSS custom properties
   besides the two menu-nav-specific offsets below.
   ========================================================================== */

:root {
	/* Sticky category nav offset: compact/scrolled header height (re-measured
	   per breakpoint via a live rect check after the logo redesign shrank
	   the compact header considerably - ~47px at ≥1101px) plus a small
	   ~10px breathing gap, just enough that the nav never sits flush
	   against the header. 641-1100px gets a slightly larger value: right
	   around the nav's own tightest pinch width in that range the compact
	   header measures a few px taller (~53px) than the rest of it. */
	--cp-menu-nav-top: calc(var(--wp-admin--admin-bar--height, 0px) + 57px);
}

@media screen and (min-width: 641px) and (max-width: 1100px) {
	:root {
		--cp-menu-nav-top: calc(var(--wp-admin--admin-bar--height, 0px) + 63px);
	}
}

.cp-menu-hero {
	/* position:relative + overflow:hidden is what actually contains the
	   ::after decoration below - without a positioned ancestor, an
	   absolutely positioned pseudo-element with top:0/bottom:0 sizes itself
	   against the whole document instead of just this section, which was
	   the exact cause of a tall, page-length dark stripe rendering down the
	   right edge of every viewport. Same containment pattern the homepage
	   hero (.cp-hero) already uses for its own silhouette. */
	position: relative;
	overflow: hidden;
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	padding-block: clamp(2.5rem, 3vw + 1.5rem, 3.5rem);
}

/* Deliberately short (no full-viewport hero): a QR customer needs to reach
   the category nav and products in one glance, not scroll past a big photo
   first. */

.cp-menu-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

/* Very quiet Erciyes/kabartma texture instead of a photo - a single low
   opacity ridge line, same technique as the homepage hero's silhouette but
   drawn small and flat so it never competes with the heading. Contained by
   .cp-menu-hero's own overflow:hidden above; pointer-events:none so it can
   never intercept a click/tap meant for the content above it. */

.cp-menu-hero::after {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(160px, 22vw, 320px);
	background: var(--cp-color-erciyes);
	opacity: 0.08;
	clip-path: polygon(0% 100%, 10% 60%, 22% 80%, 34% 40%, 46% 70%, 58% 25%, 70% 58%, 82% 38%, 100% 100%);
	pointer-events: none;
}

@media screen and (max-width: 640px) {
	.cp-menu-hero::after {
		display: none;
	}
}

.cp-menu-hero__title {
	position: relative;
	z-index: 1;
	margin: 0 0 10px;
	font-family: var(--cp-font-heading);
	font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
	line-height: 1.12;
	color: var(--cp-color-acik-metin);
}

.cp-menu-hero__subtitle {
	position: relative;
	z-index: 1;
	margin: 0 0 18px;
	max-width: 48ch;
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
	line-height: 1.55;
}

.cp-menu-hero__meta {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-md);
}

.cp-menu-hero .cp-status {
	color: var(--cp-color-acik-metin);
}

.cp-menu-hero__cta {
	min-height: 44px;
}

.cp-menu-empty {
	padding-block: var(--cp-space-xl);
	text-align: center;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 65%, transparent);
}

/* Sticky nav sentinel: zero-size, purely a scroll marker for
   initMenuStickyNav()'s IntersectionObserver (see page-menu.php). Sits
   between the hero and the nav so "sentinel scrolled above the viewport"
   means exactly "nav has become stuck". */

.cp-menu-nav-sentinel {
	height: 1px;
}

/* Sticky category navigation.
   - At rest (page top, not yet stuck): warm cream, matching the hero's
     handoff into the page.
   - Stuck (.is-stuck, toggled by the sentinel observer - never scroll-math,
     so there's no jitter): a dark antrasit/köz gradient with a thin warm
     line underneath, active-category treatment switches to a solid
     köz/terracotta pill. The swap is a plain color/background transition
     (200-280ms), not a layout change, so nothing jumps.
   - top offset uses --cp-menu-nav-top (defined above): the header's own
     *compact* scrolled height (measured, not guessed) plus a deliberate
     ~22px gap, already admin-bar aware via the same --wp-admin--admin-bar
     --height var the header itself keys off. */

.cp-menu-nav {
	position: sticky;
	top: var(--cp-menu-nav-top);
	z-index: 30;
	background: var(--cp-color-sicak-krem);
	border-bottom: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
	transition: background 250ms ease, border-color 250ms ease;
}

.cp-menu-nav.is-stuck {
	background: linear-gradient(90deg, #171310 0%, #2b1711 50%, #421b10 100%);
	border-bottom-color: color-mix(in srgb, var(--cp-color-sicak-altin) 35%, transparent);
}

@media screen and (max-width: 640px) {
	.cp-menu-nav {
		/* Mobile header isn't sticky at all (see .cp-header's own ≤640px
		   override elsewhere in this file), so there's no header to clear -
		   the nav sticks to the very top of the viewport instead, and never
		   overlaps the hamburger/header row since that row has already
		   scrolled away by the time this bar can stick. */
		top: 0;
	}
}

.cp-menu-nav__list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(4px, 1vw, 10px);
	margin: 0;
	padding: 10px var(--cp-container-padding);
	max-width: var(--cp-container-width);
	margin-inline: auto;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--cp-color-antrasit) 25%, transparent) transparent;
}

.cp-menu-nav__list::-webkit-scrollbar {
	height: 4px;
}

.cp-menu-nav__list::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--cp-color-antrasit) 20%, transparent);
	border-radius: 4px;
}

.cp-menu-nav__list li {
	flex-shrink: 0;
}

.cp-menu-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 16px;
	border-radius: 999px;
	color: var(--cp-color-koyu-metin);
	text-decoration: none;
	font-family: var(--cp-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 220ms ease, color 220ms ease;
}

.cp-menu-nav.is-stuck .cp-menu-nav__link {
	color: var(--cp-color-sicak-krem);
}

.cp-menu-nav__link:hover {
	background: color-mix(in srgb, var(--cp-color-brick) 12%, transparent);
}

.cp-menu-nav.is-stuck .cp-menu-nav__link:hover {
	background: color-mix(in srgb, var(--cp-color-sicak-krem) 14%, transparent);
}

.cp-menu-nav__link.is-active {
	background: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-acik-metin);
}

.cp-menu-nav.is-stuck .cp-menu-nav__link.is-active {
	background: var(--cp-color-brick);
	color: var(--cp-color-sicak-krem);
}

.cp-menu-category {
	position: relative;
	background: var(--cp-color-warm-white);
	padding-block: clamp(2rem, 3vw, 3rem);
	border-bottom: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 8%, transparent);
	/* Keeps the sticky nav from covering a section's own heading when
	   jumped to via nav click or #hash - matches --cp-menu-nav-top plus the
	   nav bar's own rendered height. */
	scroll-margin-top: calc(var(--cp-menu-nav-top) + 56px);
}

.cp-menu-category:nth-of-type(even) {
	background: var(--cp-color-sicak-krem);
}

/* Pide section only: an extremely faint flour-speckle texture in one
   corner, echoing the homepage Story section's same touch - never repeated
   on every category, per the brief. */

.cp-menu-category--flour::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: clamp(120px, 12vw, 200px);
	height: clamp(120px, 12vw, 200px);
	background-image: radial-gradient(color-mix(in srgb, var(--cp-color-dough) 70%, transparent) 1px, transparent 1.6px);
	background-size: 14px 14px;
	opacity: 0.5;
	pointer-events: none;
}

.cp-menu-category .cp-container {
	position: relative;
	z-index: 1;
}

.cp-menu-category__heading {
	position: relative;
	margin: 0 0 6px;
	padding-left: 14px;
	font-family: var(--cp-font-heading);
	font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
	color: var(--cp-color-koyu-metin);
}

/* Very small Erciyes-line accent beside each category heading - a single
   quiet motif reused per heading rather than a different ornament each
   time. */

.cp-menu-category__heading::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 6px;
	height: 6px;
	background: var(--cp-color-koz-kirmizisi);
	border: 1px solid var(--cp-color-sicak-altin);
	transform: rotate(45deg);
}

.cp-menu-category__desc {
	margin: 0 0 var(--cp-space-lg);
	max-width: 60ch;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 65%, transparent);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* ==========================================================================
   Editorial product list - two-column on desktop, single wide row per
   product (image one side, info the other), separated by hairlines and
   spacing rather than boxed cards. Each row is a <button> (the whole row is
   the trigger) followed by a sibling detail panel.
   ========================================================================== */

.cp-menu-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(2rem, 3vw, 3.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (max-width: 860px) {
	.cp-menu-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cp-menu-row {
	border-top: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
}

.cp-menu-list > .cp-menu-row:nth-child(1),
.cp-menu-list > .cp-menu-row:nth-child(2) {
	border-top: none;
}

@media screen and (max-width: 860px) {
	.cp-menu-list > .cp-menu-row:nth-child(2) {
		border-top: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
	}
}

/* A featured row is allowed to span both columns on desktop (more room,
   without breaking the grid) - "some products may use more space, but the
   layout must stay intact" per the brief. */

.cp-menu-row--featured {
	grid-column: 1 / -1;
}

.cp-menu-row--featured:nth-child(1) {
	border-top: none;
}

.cp-menu-row__trigger {
	display: flex;
	align-items: center;
	gap: var(--cp-space-md);
	width: 100%;
	padding: 14px 4px;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	color: inherit;
}

.cp-menu-row__trigger:disabled {
	cursor: default;
}

.cp-menu-row__trigger:focus-visible {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 2px;
	border-radius: var(--cp-radius-sm);
}

.cp-menu-row__media {
	position: relative;
	flex-shrink: 0;
	width: 92px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--cp-radius-sm);
	background: var(--cp-color-sicak-krem);
}

.cp-menu-row--featured .cp-menu-row__media {
	width: 128px;
}

.cp-menu-row__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.cp-menu-row__trigger:hover .cp-menu-row__img {
	transform: scale(1.05);
}

.cp-menu-row__fallback {
	display: block;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(45deg, color-mix(in srgb, var(--cp-color-sicak-altin) 8%, transparent) 0 1px, transparent 1px 12px),
		repeating-linear-gradient(-45deg, color-mix(in srgb, var(--cp-color-brick) 7%, transparent) 0 1px, transparent 1px 12px),
		linear-gradient(155deg, color-mix(in srgb, var(--cp-color-brick-light) 18%, var(--cp-color-flour)), var(--cp-color-flour));
}

.cp-menu-row__featured-badge {
	position: absolute;
	left: 6px;
	bottom: 6px;
	padding: 2px 8px;
	background: color-mix(in srgb, var(--cp-color-antrasit) 78%, transparent);
	color: var(--cp-color-sicak-altin);
	border-radius: var(--cp-radius-sm);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.cp-menu-row__status-badge {
	position: absolute;
	left: 6px;
	top: 6px;
	padding: 2px 8px;
	background: color-mix(in srgb, var(--cp-color-antrasit) 82%, transparent);
	color: var(--cp-color-acik-metin);
	border-radius: var(--cp-radius-sm);
	font-size: 0.62rem;
	font-weight: 700;
}

.cp-menu-row--unavailable .cp-menu-row__img,
.cp-menu-row--unavailable .cp-menu-row__fallback {
	opacity: 0.55;
	filter: grayscale(35%);
}

.cp-menu-row__info {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

.cp-menu-row__name-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--cp-space-sm);
}

.cp-menu-row__name {
	font-family: var(--cp-font-heading);
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--cp-color-koyu-metin);
}

.cp-menu-row--featured .cp-menu-row__name {
	font-size: 1.2rem;
}

/* Price: right-aligned, tabular figures so a column of prices lines up
   cleanly instead of ragged widths per digit count. */

.cp-menu-row__price {
	flex-shrink: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--cp-font-heading);
	font-variant-numeric: tabular-nums;
}

.cp-menu-row__price-current {
	color: var(--cp-color-koz-kirmizisi);
	font-size: 1.05rem;
	font-weight: 700;
}

.cp-menu-row__price-old {
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 45%, transparent);
	font-family: var(--cp-font-body);
	font-size: 0.78rem;
	text-decoration: line-through;
}

.cp-menu-row__desc {
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 68%, transparent);
	font-size: 0.85rem;
	line-height: 1.5;
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.cp-menu-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.cp-menu-row__tag {
	padding: 2px 8px;
	background: color-mix(in srgb, var(--cp-color-brick) 12%, transparent);
	color: var(--cp-color-brick-dark);
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.cp-menu-row__chevron {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin-left: 4px;
	border-right: 2px solid color-mix(in srgb, var(--cp-color-koyu-metin) 45%, transparent);
	border-bottom: 2px solid color-mix(in srgb, var(--cp-color-koyu-metin) 45%, transparent);
	transform: rotate(45deg);
	transition: transform 250ms ease;
}

.cp-menu-row__trigger[aria-expanded="true"] .cp-menu-row__chevron {
	transform: rotate(-135deg);
}

/* ==========================================================================
   Expanding detail panel. Uses the CSS grid 0fr->1fr technique instead of a
   fixed max-height guess: the panel's own height is whatever its content
   needs, and the transition animates the grid track, not a magic pixel
   value. inert (toggled by JS, not by this CSS) keeps the collapsed panel's
   video/close/order controls out of the tab order and off-screen-reader
   radar without needing the [hidden] attribute, which can't transition.
   ========================================================================== */

.cp-menu-row__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 380ms ease;
}

.cp-menu-row__panel.is-open {
	grid-template-rows: 1fr;
}

.cp-menu-row__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.cp-menu-row__panel-media,
.cp-menu-row__panel-body {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 300ms ease, transform 300ms ease;
}

.cp-menu-row__panel.is-open .cp-menu-row__panel-media,
.cp-menu-row__panel.is-open .cp-menu-row__panel-body {
	opacity: 1;
	transform: translateY(0);
}

.cp-menu-row__panel-media {
	position: relative;
	margin: 10px 4px 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--cp-radius-md);
	background: var(--cp-color-antrasit);
}

@media screen and (max-width: 640px) {
	.cp-menu-row__panel-media {
		aspect-ratio: 3 / 2;
	}
}

.cp-menu-row__panel-video,
.cp-menu-row__panel-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-menu-row__panel-media-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 8, 6, 0.1) 0%, rgba(10, 8, 6, 0.38) 100%);
	pointer-events: none;
}

.cp-menu-row__panel-toggle {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: color-mix(in srgb, var(--cp-color-antrasit) 55%, transparent);
	color: var(--cp-color-acik-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 30%, transparent);
	border-radius: 50%;
	cursor: pointer;
}

.cp-menu-row__panel-toggle svg {
	width: 16px;
	height: 16px;
}

.cp-menu-row__panel-body {
	padding: 14px 4px 6px;
	max-width: 62ch;
}

.cp-menu-row__panel-line {
	margin: 0 0 8px;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 78%, transparent);
	font-size: 0.88rem;
	line-height: 1.6;
}

.cp-menu-row__panel-line strong {
	color: var(--cp-color-koyu-metin);
}

.cp-menu-row__panel-allergen {
	margin: 0 0 10px;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 50%, transparent);
	font-size: 0.75rem;
	line-height: 1.5;
}

.cp-menu-row__panel-cta {
	min-height: 44px;
	margin-right: var(--cp-space-sm);
}

.cp-menu-row__close {
	display: none;
	min-height: 44px;
	padding: 0.6em 1.2em;
	background: transparent;
	color: var(--cp-color-koyu-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 25%, transparent);
	border-radius: var(--cp-radius-sm);
	font-family: var(--cp-font-body);
	font-weight: 600;
	cursor: pointer;
}

/* The row itself is still keyboard/mouse operable to collapse on desktop
   (click/Enter the trigger again), so an extra "Kapat" button there would
   be redundant chrome - it only earns its place on touch, where the brief
   explicitly asks for one. */

@media (hover: none) {
	.cp-menu-row__close {
		display: inline-flex;
	}
}

/* ==========================================================================
   Scroll reveal. Hidden-by-default only applies once body.cp-js is present
   (added by main.js on DOMContentLoaded) AND the element hasn't been
   revealed yet - so content stays fully visible with JS disabled or before
   it has run, per the brief's "no-JS-safe" requirement.
   ========================================================================== */

body.cp-js .cp-menu-category [data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-menu-row[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-menu-closing__inner[data-cp-reveal]:not(.is-revealed) {
	opacity: 0;
	transform: translateY(20px);
}

/* Homepage (front-page.php) - Hero is deliberately excluded (always
   visible immediately, never delayed behind a reveal). */

body.cp-js .cp-brand-seal[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-section-head[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-essence__item[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-civikli-nedir__media[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-civikli-nedir__content[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-usta__media[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-usta__content[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-story__media[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-story__content[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-flavor-grid > li[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-visit__info[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-visit__hours[data-cp-reveal]:not(.is-revealed) {
	opacity: 0;
	transform: translateY(20px);
}

@media (prefers-reduced-motion: reduce) {
	.cp-brand-seal[data-cp-reveal],
	.cp-section-head[data-cp-reveal],
	.cp-essence__item[data-cp-reveal],
	.cp-civikli-nedir__media[data-cp-reveal],
	.cp-civikli-nedir__content[data-cp-reveal],
	.cp-usta__media[data-cp-reveal],
	.cp-usta__content[data-cp-reveal],
	.cp-story__media[data-cp-reveal],
	.cp-story__content[data-cp-reveal],
	.cp-flavor-grid > li[data-cp-reveal],
	.cp-visit__info[data-cp-reveal],
	.cp-visit__hours[data-cp-reveal] {
		transition: none !important;
	}
}

/* `contain` on the not-yet-revealed state keeps each pending element's
   layout and paint work scoped to itself, so a page with a few dozen of
   them doesn't make the browser re-evaluate the whole document every time
   one crosses the threshold. It is dropped once revealed - by then the
   element is static content and containment would only constrain it. */
body.cp-js [data-cp-reveal]:not(.is-revealed) {
	contain: layout paint;
	will-change: opacity, transform;
}

/* 550ms read as sluggish in practice - by the time the element finished
   arriving the visitor had already scrolled past it. 420ms on a
   decelerating curve covers the same distance but settles while it's still
   the thing being looked at. will-change is cleared here so the compositor
   layer is released as soon as the element lands. */
[data-cp-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 420ms ease-out, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: auto;
}

/* Closing CTA ("Kararınızı verdiniz mi?") */

.cp-menu-closing {
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.cp-menu-closing__inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.cp-menu-closing__heading {
	margin: 0 0 var(--cp-space-lg);
	font-family: var(--cp-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	color: var(--cp-color-acik-metin);
}

.cp-menu-closing__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--cp-space-md);
}

.cp-menu-closing__cta,
.cp-menu-closing__phone {
	min-height: 44px;
}

.cp-menu-closing__phone {
	background: transparent;
	color: var(--cp-color-acik-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 35%, transparent);
}

.cp-menu-closing__phone:hover {
	color: var(--cp-color-sicak-altin);
	border-color: var(--cp-color-sicak-altin);
}

/* Mobile: single column already handled by .cp-menu-list's own breakpoint
   above; here just tighten spacing/touch targets. */

@media screen and (max-width: 640px) {
	.cp-menu-row__trigger {
		padding: 12px 2px;
	}

	.cp-menu-row__media {
		width: 84px;
	}

	.cp-menu-row--featured .cp-menu-row__media {
		width: 100px;
	}

	.cp-menu-row__name {
		font-size: 0.98rem;
	}

	.cp-menu-row__desc {
		-webkit-line-clamp: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-menu-row__img,
	.cp-menu-row__chevron,
	.cp-menu-row__panel,
	.cp-menu-row__panel-media,
	.cp-menu-row__panel-body,
	.cp-menu-nav,
	.cp-menu-nav__link,
	[data-cp-reveal] {
		transition: none !important;
	}

	body.cp-js .cp-menu-category [data-cp-reveal]:not(.is-revealed),
	body.cp-js .cp-menu-row[data-cp-reveal]:not(.is-revealed),
	body.cp-js .cp-menu-closing__inner[data-cp-reveal]:not(.is-revealed) {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Galeri (page-gallery.php, /galeri/). Every selector below is scoped to
   classes that only exist on this one page/template (cp-gallery-*), so none
   of it can leak onto the homepage, About, Contact, Menu, header or footer.
   Reuses the site's existing design tokens and the generic [data-cp-reveal]
   scroll-reveal system already wired up by initScrollReveal() in main.js.
   ========================================================================== */

/* Scroll reveal hide-by-default, scoped to this page's own elements (the
   shared [data-cp-reveal].is-revealed transition-in rule already exists
   from the menu page work and is page-agnostic; only the "start hidden"
   half needs a gallery-specific selector added here, same pattern as
   .cp-menu-row/.cp-menu-category use). 18px per the brief (vs. the menu
   page's 20px). */

body.cp-js .cp-gallery-item[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-gallery-empty[data-cp-reveal]:not(.is-revealed),
body.cp-js .cp-gallery-closing__inner[data-cp-reveal]:not(.is-revealed) {
	opacity: 0;
	transform: translateY(18px);
}

.cp-gallery-hero {
	position: relative;
	overflow: hidden;
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	padding-block: clamp(2.5rem, 3vw + 1.5rem, 3.5rem);
}

.cp-gallery-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
}

/* Same quiet Erciyes-ridge technique as the menu hero, contained by this
   section's own overflow:hidden so it can never bleed down the page. */

.cp-gallery-hero::after {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(160px, 22vw, 320px);
	background: var(--cp-color-erciyes);
	opacity: 0.08;
	clip-path: polygon(0% 100%, 10% 60%, 22% 80%, 34% 40%, 46% 70%, 58% 25%, 70% 58%, 82% 38%, 100% 100%);
	pointer-events: none;
}

@media screen and (max-width: 640px) {
	.cp-gallery-hero::after {
		display: none;
	}
}

.cp-gallery-hero__title {
	position: relative;
	z-index: 1;
	margin: 0 0 10px;
	font-family: var(--cp-font-heading);
	font-size: clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
	line-height: 1.12;
	color: var(--cp-color-acik-metin);
}

.cp-gallery-hero__subtitle {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 52ch;
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
	color: color-mix(in srgb, var(--cp-color-acik-metin) 85%, transparent);
	line-height: 1.55;
}

.cp-gallery-empty {
	padding-block: var(--cp-space-xl);
	text-align: center;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 65%, transparent);
}

.cp-gallery-empty__admin-link {
	margin-top: var(--cp-space-md);
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
}

/* Category filter bar - not sticky (unlike the menu's), just a calm strip
   under the hero. Horizontally scrollable on narrow screens with the same
   quiet scrollbar treatment as the menu category nav. */

.cp-gallery-filter {
	background: var(--cp-color-sicak-krem);
	border-bottom: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
}

.cp-gallery-filter__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(4px, 1vw, 10px);
	margin: 0 auto;
	padding: 14px var(--cp-container-padding);
	max-width: var(--cp-container-width);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--cp-color-antrasit) 25%, transparent) transparent;
}

.cp-gallery-filter__inner::-webkit-scrollbar {
	height: 4px;
}

.cp-gallery-filter__inner::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--cp-color-antrasit) 20%, transparent);
	border-radius: 4px;
}

.cp-gallery-filter__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 18px;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 18%, transparent);
	border-radius: 999px;
	color: var(--cp-color-koyu-metin);
	font-family: var(--cp-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.cp-gallery-filter__btn:hover {
	border-color: var(--cp-color-brick);
}

.cp-gallery-filter__btn:focus-visible {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 2px;
}

.cp-gallery-filter__btn.is-active {
	background: var(--cp-color-koz-kirmizisi);
	border-color: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-acik-metin);
}

/* ==========================================================================
   Editorial grid. CSS Grid with grid-auto-flow: dense - a repeating,
   deterministic rhythm of wide/tall/normal cells (never random per the
   brief) via nth-child, plus featured items always spanning two columns.
   No masonry library.
   ========================================================================== */

.cp-gallery-grid-section {
	background: var(--cp-color-warm-white);
	padding-block: clamp(2.5rem, 4vw, 4rem);
}

.cp-gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 220px;
	grid-auto-flow: dense;
	gap: clamp(10px, 1.2vw, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (max-width: 1024px) {
	.cp-gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 200px;
	}
}

@media screen and (max-width: 640px) {
	.cp-gallery-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
		gap: 14px;
	}
}

.cp-gallery-item {
	position: relative;
}

/* Deterministic rhythm, repeats every 6 items: #3 tall, #4 wide. Everything
   else stays a normal 1x1 cell. */

.cp-gallery-item:nth-child(6n + 3) {
	grid-row: span 2;
}

.cp-gallery-item:nth-child(6n + 4) {
	grid-column: span 2;
}

.cp-gallery-item--featured {
	grid-column: span 2;
}

@media screen and (max-width: 640px) {
	.cp-gallery-item,
	.cp-gallery-item--featured,
	.cp-gallery-item:nth-child(6n + 3),
	.cp-gallery-item:nth-child(6n + 4) {
		grid-row: auto;
		grid-column: auto;
	}
}

/* Hidden by the filter (see initGalleryFilter() in main.js) - a plain
   utility class, not [hidden], so it composes cleanly with the reveal
   system's own opacity/transform without fighting over display. */

.cp-gallery-item.is-filtered-out {
	display: none;
}

.cp-gallery-item__figure {
	margin: 0;
	width: 100%;
	height: 100%;
}

.cp-gallery-item__trigger {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	background: var(--cp-color-sicak-krem);
	border: none;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	/* Thin terracotta/köz accent along the bottom edge - the brief's
	   suggested subtle alternative to a heavy border/shadow. */
	box-shadow: inset 0 -3px 0 0 color-mix(in srgb, var(--cp-color-brick) 55%, transparent);
}

.cp-gallery-item__trigger:focus-visible {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 2px;
}

.cp-gallery-item__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 350ms ease;
}

.cp-gallery-item__trigger:hover .cp-gallery-item__img,
.cp-gallery-item__trigger:focus-visible .cp-gallery-item__img {
	transform: scale(1.035);
}

.cp-gallery-item__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 8, 6, 0) 55%, rgba(10, 8, 6, 0.55) 100%);
	opacity: 0;
	transition: opacity 250ms ease;
}

.cp-gallery-item__trigger:hover .cp-gallery-item__overlay,
.cp-gallery-item__trigger:focus-visible .cp-gallery-item__overlay {
	opacity: 1;
}

.cp-gallery-item__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	background: color-mix(in srgb, var(--cp-color-antrasit) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 45%, transparent);
	border-radius: 50%;
	color: var(--cp-color-acik-metin);
	transform: translate(-50%, -50%);
	transition: transform 250ms ease, background-color 250ms ease;
}

.cp-gallery-item__play svg {
	width: 20px;
	height: 20px;
	margin-left: 3px;
}

.cp-gallery-item__trigger:hover .cp-gallery-item__play,
.cp-gallery-item__trigger:focus-visible .cp-gallery-item__play {
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 75%, transparent);
	transform: translate(-50%, -50%) scale(1.06);
}

.cp-gallery-item__caption {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 10px;
	color: var(--cp-color-acik-metin);
	font-family: var(--cp-font-heading);
	font-size: 0.92rem;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(10, 8, 6, 0.6);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 250ms ease, transform 250ms ease;
}

.cp-gallery-item__trigger:hover .cp-gallery-item__caption,
.cp-gallery-item__trigger:focus-visible .cp-gallery-item__caption {
	opacity: 1;
	transform: translateY(0);
}

/* Touch devices: caption/play icon stay legible without relying on hover
   (per the brief, mobile never "waits" for a hover that will never come). */

@media (hover: none) {
	.cp-gallery-item__overlay {
		opacity: 1;
		background: linear-gradient(180deg, rgba(10, 8, 6, 0) 45%, rgba(10, 8, 6, 0.6) 100%);
	}

	.cp-gallery-item__caption {
		opacity: 1;
		transform: none;
	}

	.cp-gallery-item__play {
		background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 70%, transparent);
	}
}

/* ==========================================================================
   Lightbox/modal - shared by both photo and video items (see
   initGalleryLightbox() in main.js). Sized to stay within the viewport at
   every breakpoint, never a full uncontrolled bleed.
   ========================================================================== */

.cp-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
}

.cp-gallery-lightbox[hidden] {
	display: none;
}

.cp-gallery-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--cp-color-antrasit) 88%, transparent);
}

.cp-gallery-lightbox__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 920px;
	max-height: 100%;
	overflow-y: auto;
	background: var(--cp-color-antrasit);
	border-radius: var(--cp-radius-md);
}

.cp-gallery-lightbox__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: color-mix(in srgb, var(--cp-color-antrasit) 60%, transparent);
	color: var(--cp-color-acik-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 30%, transparent);
	border-radius: 50%;
	cursor: pointer;
}

.cp-gallery-lightbox__close svg {
	width: 18px;
	height: 18px;
}

.cp-gallery-lightbox__nav {
	position: absolute;
	top: 40%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: color-mix(in srgb, var(--cp-color-antrasit) 55%, transparent);
	color: var(--cp-color-acik-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 30%, transparent);
	border-radius: 50%;
	cursor: pointer;
	transform: translateY(-50%);
}

.cp-gallery-lightbox__nav svg {
	width: 18px;
	height: 18px;
}

.cp-gallery-lightbox__nav--prev {
	left: 10px;
}

.cp-gallery-lightbox__nav--next {
	right: 10px;
}

.cp-gallery-lightbox__close:focus-visible,
.cp-gallery-lightbox__nav:focus-visible {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 2px;
}

.cp-gallery-lightbox__media {
	position: relative;
	width: 100%;
	max-height: 70vh;
	background: var(--cp-color-antrasit);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cp-gallery-lightbox__image,
.cp-gallery-lightbox__video {
	display: block;
	width: 100%;
	max-height: 70vh;
	object-fit: contain;
}

/* Without this, [hidden] loses to the rule above (equal specificity, this
   stylesheet loads after the UA one) and the video's native controls stay
   visible/interactive even while "hidden" - this is what let the video
   scrubber peek out next to a photo item earlier. */

.cp-gallery-lightbox__image[hidden],
.cp-gallery-lightbox__video[hidden] {
	display: none;
}

.cp-gallery-lightbox__info {
	padding: 18px 22px 22px;
	color: var(--cp-color-acik-metin);
}

.cp-gallery-lightbox__category {
	margin: 0 0 4px;
	color: var(--cp-color-sicak-altin);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cp-gallery-lightbox__title {
	margin: 0 0 6px;
	font-family: var(--cp-font-heading);
	font-size: 1.3rem;
	color: var(--cp-color-acik-metin);
}

.cp-gallery-lightbox__desc {
	margin: 0;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 82%, transparent);
	font-size: 0.9rem;
	line-height: 1.6;
}

.cp-gallery-lightbox__desc:empty,
.cp-gallery-lightbox__category:empty {
	display: none;
}

@media screen and (max-width: 640px) {
	.cp-gallery-lightbox {
		padding: 0;
		align-items: flex-end;
	}

	.cp-gallery-lightbox__panel {
		max-height: 92vh;
		border-radius: var(--cp-radius-md) var(--cp-radius-md) 0 0;
	}

	.cp-gallery-lightbox__nav {
		width: 38px;
		height: 38px;
	}
}

/* Closing CTA */

.cp-gallery-closing {
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	padding-block: clamp(2.5rem, 4vw, 3.5rem);
}

.cp-gallery-closing__inner {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.cp-gallery-closing__heading {
	margin: 0 0 var(--cp-space-lg);
	font-family: var(--cp-font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	color: var(--cp-color-acik-metin);
}

.cp-gallery-closing__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--cp-space-md);
}

.cp-gallery-closing__menu,
.cp-gallery-closing__cta,
.cp-gallery-closing__maps {
	min-height: 44px;
}

.cp-gallery-closing__menu,
.cp-gallery-closing__maps {
	background: transparent;
	color: var(--cp-color-acik-metin);
	border: 1px solid color-mix(in srgb, var(--cp-color-acik-metin) 35%, transparent);
}

.cp-gallery-closing__menu:hover,
.cp-gallery-closing__maps:hover {
	color: var(--cp-color-sicak-altin);
	border-color: var(--cp-color-sicak-altin);
}

@media (prefers-reduced-motion: reduce) {
	.cp-gallery-item__img,
	.cp-gallery-item__overlay,
	.cp-gallery-item__play,
	.cp-gallery-item__caption,
	.cp-gallery-filter__btn,
	[data-cp-reveal] {
		transition: none !important;
	}

	body.cp-js .cp-gallery-item[data-cp-reveal]:not(.is-revealed),
	body.cp-js .cp-gallery-empty[data-cp-reveal]:not(.is-revealed),
	body.cp-js .cp-gallery-closing__inner[data-cp-reveal]:not(.is-revealed) {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Legal / compliance pages (KVKK, Gizlilik, Çerez, Ön Bilgilendirme,
   Mesafeli Satış, İptal-İade). Warm-cream reading surface, restrained
   Erciyes-silhouette + flour-texture motif (same technique as the menu/
   gallery heroes - the parent needs position:relative + overflow:hidden or
   the pseudo-element sizes against the whole document), strong heading
   hierarchy, desktop sidebar TOC + mobile collapsible TOC from one shared
   section list, print button, and an admin-only draft notice.
   ========================================================================== */

.cp-legal {
	position: relative;
	overflow: hidden;
	background: var(--cp-color-sicak-krem);
	padding-block: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem);
}

.cp-legal__motif {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	background:
		radial-gradient(ellipse 60% 40% at 85% 0%, var(--cp-color-erciyes) 0%, transparent 60%),
		repeating-linear-gradient(45deg, var(--cp-color-mortar) 0 1px, transparent 1px 16px);
}

.cp-legal__container {
	position: relative;
	max-width: 900px;
	margin-inline: auto;
	padding-inline: var(--cp-container-padding, var(--cp-space-md));
}

.cp-legal__header {
	max-width: 760px;
	margin-bottom: var(--cp-space-xl);
}

.cp-legal__admin-notice {
	margin: 0 0 var(--cp-space-md);
	padding: var(--cp-space-sm) var(--cp-space-md);
	background: color-mix(in srgb, var(--cp-color-sicak-altin) 20%, var(--cp-color-warm-white));
	border: 1px solid var(--cp-color-sicak-altin);
	border-radius: 6px;
	font-size: 0.85rem;
	color: var(--cp-color-koyu-metin);
}

.cp-legal__title {
	margin: 0 0 var(--cp-space-md);
	font-family: var(--cp-font-heading);
	font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
	color: var(--cp-color-antrasit);
}

.cp-legal__intro {
	margin: 0 0 var(--cp-space-md);
	font-size: 1.05rem;
	color: var(--cp-color-koyu-metin);
}

.cp-legal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-md);
}

.cp-legal__updated {
	margin: 0;
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 65%, transparent);
}

.cp-legal__print {
	min-height: 40px;
	padding: 0 var(--cp-space-md);
	background: transparent;
	color: var(--cp-color-koz-kirmizisi);
	border: 1px solid var(--cp-color-koz-kirmizisi);
	border-radius: 4px;
	font-family: var(--cp-font-body);
	font-size: 0.85rem;
	cursor: pointer;
}

.cp-legal__print:hover {
	background: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-acik-metin);
}

.cp-legal__toc--mobile {
	margin-bottom: var(--cp-space-lg);
	padding: var(--cp-space-sm) var(--cp-space-md);
	background: var(--cp-color-warm-white);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
	border-radius: 6px;
}

.cp-legal__toc--mobile summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--cp-color-antrasit);
}

.cp-legal__toc--mobile ol {
	margin: var(--cp-space-sm) 0 0;
	padding-left: 1.25rem;
}

.cp-legal__toc--mobile li {
	margin-bottom: var(--cp-space-xs);
}

.cp-legal__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cp-space-xl);
}

.cp-legal__toc--desktop {
	display: none;
}

.cp-legal__toc-title {
	margin: 0 0 var(--cp-space-sm);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 60%, transparent);
}

.cp-legal__toc--desktop ol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 2px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
}

.cp-legal__toc--desktop li a {
	display: block;
	padding: 6px var(--cp-space-md);
	color: var(--cp-color-koyu-metin);
	text-decoration: none;
	font-size: 0.9rem;
	border-left: 2px solid transparent;
	margin-left: -2px;
}

.cp-legal__toc--desktop li a:hover,
.cp-legal__toc--desktop li a:focus-visible {
	color: var(--cp-color-koz-kirmizisi);
	border-left-color: var(--cp-color-koz-kirmizisi);
}

.cp-legal__content {
	min-width: 0;
}

.cp-legal__section {
	max-width: 760px;
	margin-bottom: var(--cp-space-xl);
	scroll-margin-top: calc(var(--cp-header-offset, 90px) + var(--cp-space-md));
}

.cp-legal__section h2 {
	margin: 0 0 var(--cp-space-md);
	font-family: var(--cp-font-heading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
	color: var(--cp-color-antrasit);
	padding-bottom: var(--cp-space-xs);
	border-bottom: 2px solid var(--cp-color-sicak-altin);
}

.cp-legal__section p {
	margin: 0 0 var(--cp-space-md);
	line-height: 1.7;
	color: var(--cp-color-koyu-metin);
}

.cp-legal__section ul,
.cp-legal__section ol {
	margin: 0 0 var(--cp-space-md);
	padding-left: 1.4rem;
	line-height: 1.7;
	color: var(--cp-color-koyu-metin);
}

.cp-legal__section li {
	margin-bottom: var(--cp-space-xs);
}

.cp-legal__section a {
	color: var(--cp-color-koz-kirmizisi);
}

.cp-legal__section a:focus-visible,
.cp-legal__print:focus-visible,
.cp-legal__toc--desktop li a:focus-visible,
.cp-legal__toc--mobile summary:focus-visible {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 2px;
}

.cp-legal-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--cp-space-md);
	font-size: 0.9rem;
}

.cp-legal-table th,
.cp-legal-table td {
	padding: var(--cp-space-sm);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 15%, transparent);
	text-align: left;
	vertical-align: top;
	color: var(--cp-color-koyu-metin);
}

.cp-legal-table th {
	background: var(--cp-color-warm-white);
	font-weight: 600;
}

@media (min-width: 900px) {
	.cp-legal__toc--mobile {
		display: none;
	}

	.cp-legal__layout {
		grid-template-columns: 220px 1fr;
		align-items: start;
	}

	.cp-legal__toc--desktop {
		display: block;
		position: sticky;
		top: calc(var(--cp-header-offset, 90px) + var(--cp-space-md));
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-legal__section[data-cp-reveal] {
		transition: none !important;
	}
}

body.cp-js .cp-legal__section[data-cp-reveal]:not(.is-revealed) {
	opacity: 0;
	transform: translateY(16px);
}

@media print {
	.site-header,
	.cp-header,
	.cp-mobile-nav,
	.cp-footer,
	.cp-order-fab,
	.cp-legal__toc--mobile,
	.cp-legal__toc--desktop,
	.cp-legal__print,
	.cp-legal__admin-notice,
	.cp-cookie-banner,
	.cp-cookie-modal,
	.cp-menu-nav-sentinel,
	.cp-menu-nav,
	.cp-menu-hero__cta,
	.cp-status,
	.cp-menu-row__chevron,
	.cp-menu-row__panel-toggle,
	.cp-menu-row__panel-video {
		display: none !important;
	}

	.cp-legal {
		padding: 0;
		background: #fff;
	}

	.cp-legal__layout {
		display: block;
	}

	.cp-legal__section {
		break-inside: avoid;
	}

	/* Yazdırma çıktısında akordeon panelleri kapalı (0fr) kalmasın -
	   müşteri/ekip elindeki kağıtta içindekiler/hazırlanış/alerjen notunu
	   JS etkileşimi olmadan görsün. */
	.cp-menu-row__panel {
		grid-template-rows: 1fr !important;
	}

	.cp-menu-row__panel-media,
	.cp-menu-row__panel-body {
		opacity: 1 !important;
		transform: none !important;
	}

	.cp-menu-row {
		break-inside: avoid;
	}
}

/* ==========================================================================
   Consent-gated third-party embeds (Google Maps, YouTube-nocookie). Fills
   whichever aspect-ratio box it's placed in (.cp-media-gallery__video,
   .cp-contact-map__frame - both already position:relative with a fixed
   size); no iframe exists in the DOM until initConsentEmbeds() in main.js
   inserts one, either because consent was already stored or the visitor
   clicked the placeholder button.
   ========================================================================== */

.cp-consent-embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.cp-consent-embed__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--cp-space-sm);
	padding: var(--cp-space-md);
	text-align: center;
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
}

.cp-consent-embed__placeholder p {
	margin: 0;
	max-width: 280px;
	font-size: 0.85rem;
}

.cp-consent-embed__button {
	min-height: 40px;
	padding: 0 var(--cp-space-md);
	background: var(--cp-color-sicak-altin);
	color: var(--cp-color-antrasit);
	border: none;
	border-radius: 4px;
	font-family: var(--cp-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.cp-consent-embed__button:hover {
	background: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-acik-metin);
}

.cp-consent-embed__button:focus-visible {
	outline: 2px solid var(--cp-color-acik-metin);
	outline-offset: 2px;
}

.cp-consent-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Cookie consent banner + modal. Only two categories are offered - both are
   real: "Kesinlikle Gerekli" (always on) and "Üçüncü Taraf Gömülü İçerik"
   (Google Maps / YouTube-nocookie embeds, off by default). No fabricated
   Analytics/Marketing category is shown because the site doesn't use one -
   see initCookieConsent() in main.js.
   ========================================================================== */

.cp-cookie-banner {
	position: fixed;
	left: var(--cp-space-md);
	right: var(--cp-space-md);
	bottom: var(--cp-space-md);
	z-index: 90;
	max-width: 640px;
	margin-inline: auto;
	padding: var(--cp-space-lg);
	background: var(--cp-color-antrasit);
	color: var(--cp-color-acik-metin);
	border-radius: 10px;
	box-shadow: 0 16px 40px color-mix(in srgb, var(--cp-color-antrasit) 45%, transparent);
}

.cp-cookie-banner[hidden] {
	display: none;
}

.cp-cookie-banner__text {
	margin: 0 0 var(--cp-space-md);
	font-size: 0.9rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--cp-color-acik-metin) 90%, transparent);
}

.cp-cookie-banner__text a {
	color: var(--cp-color-sicak-altin);
}

.cp-cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-sm);
}

.cp-cookie-banner__actions button {
	min-height: 44px;
	padding: 0 var(--cp-space-lg);
	border-radius: 4px;
	font-family: var(--cp-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--cp-color-acik-metin);
}

.cp-cookie-banner__accept,
.cp-cookie-banner__reject {
	background: var(--cp-color-acik-metin);
	color: var(--cp-color-antrasit);
}

.cp-cookie-banner__accept:hover,
.cp-cookie-banner__reject:hover {
	background: var(--cp-color-sicak-altin);
	border-color: var(--cp-color-sicak-altin);
}

.cp-cookie-banner__manage {
	background: transparent;
	color: var(--cp-color-acik-metin);
}

.cp-cookie-banner__manage:hover {
	background: color-mix(in srgb, var(--cp-color-acik-metin) 12%, transparent);
}

.cp-cookie-banner__accept:focus-visible,
.cp-cookie-banner__reject:focus-visible,
.cp-cookie-banner__manage:focus-visible {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 2px;
}

.cp-cookie-modal {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cp-space-md);
	background: color-mix(in srgb, var(--cp-color-antrasit) 70%, transparent);
}

.cp-cookie-modal[hidden] {
	display: none;
}

.cp-cookie-modal__panel {
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	overflow-y: auto;
	padding: var(--cp-space-lg);
	background: var(--cp-color-warm-white);
	border-radius: 10px;
}

.cp-cookie-modal__title {
	margin: 0 0 var(--cp-space-md);
	font-family: var(--cp-font-heading);
	font-size: 1.3rem;
	color: var(--cp-color-antrasit);
}

.cp-cookie-modal__category {
	padding: var(--cp-space-md) 0;
	border-top: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 12%, transparent);
}

.cp-cookie-modal__category-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cp-space-md);
	margin-bottom: var(--cp-space-xs);
}

.cp-cookie-modal__category-head strong {
	color: var(--cp-color-antrasit);
}

.cp-cookie-modal__category p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--cp-color-koyu-metin);
}

.cp-cookie-modal__locked {
	font-size: 0.75rem;
	color: color-mix(in srgb, var(--cp-color-koyu-metin) 60%, transparent);
}

.cp-cookie-modal__switch {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
	flex-shrink: 0;
}

.cp-cookie-modal__switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.cp-cookie-modal__switch-track {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--cp-color-antrasit) 25%, transparent);
	border-radius: 999px;
	transition: background 200ms ease;
}

.cp-cookie-modal__switch-track::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform 200ms ease;
}

.cp-cookie-modal__switch input:checked + .cp-cookie-modal__switch-track {
	background: var(--cp-color-koz-kirmizisi);
}

.cp-cookie-modal__switch input:checked + .cp-cookie-modal__switch-track::before {
	transform: translateX(18px);
}

.cp-cookie-modal__switch input:focus-visible + .cp-cookie-modal__switch-track {
	outline: 2px solid var(--cp-color-sicak-altin);
	outline-offset: 2px;
}

.cp-cookie-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-sm);
	margin-top: var(--cp-space-lg);
}

.cp-cookie-modal__actions button {
	min-height: 44px;
	padding: 0 var(--cp-space-lg);
	border-radius: 4px;
	font-family: var(--cp-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.cp-cookie-modal__save {
	background: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-acik-metin);
	border: 1px solid var(--cp-color-koz-kirmizisi);
}

.cp-cookie-modal__save:hover {
	background: color-mix(in srgb, var(--cp-color-koz-kirmizisi) 85%, black);
}

.cp-cookie-modal__close {
	background: transparent;
	color: var(--cp-color-antrasit);
	border: 1px solid color-mix(in srgb, var(--cp-color-antrasit) 30%, transparent);
}

.cp-cookie-modal__close:hover {
	border-color: var(--cp-color-koz-kirmizisi);
	color: var(--cp-color-koz-kirmizisi);
}

.cp-cookie-modal__save:focus-visible,
.cp-cookie-modal__close:focus-visible {
	outline: 2px solid var(--cp-color-koz-kirmizisi);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.cp-cookie-banner {
		left: var(--cp-space-sm);
		right: var(--cp-space-sm);
		bottom: var(--cp-space-sm);
		padding: var(--cp-space-md);
	}

	.cp-cookie-banner__actions button {
		flex: 1 1 auto;
	}
}

/* Mobil ikili CTA bar (bkz. .cp-mobile-cta-bar) görünürken çerez bildirimi
   onun üzerine binmesin diye alt konumu bar yüksekliği kadar yukarı
   kaydırılır. Sınıf/class özgüllüğü (.cp-cookie-banner + body.*) yukarıdaki
   480px kuralından daha yüksek olduğu için kaynak sırası fark etmeksizin
   kazanır. */
@media (max-width: 767px) {
	body.cp-has-mobile-cta-bar .cp-cookie-banner {
		bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--cp-mobile-cta-bar-height) + var(--cp-space-sm));
	}
}