/* ============================================================================
 * Single recipe (`single-tarif.php`) detail page — enqueued only on
 * is_singular('tarif'); never loaded on the homepage or /tarifler/. All
 * selectors are scoped to `.recipe-detail` / `.recipe-hero` / `.recipe-panel`
 * / `.recipe-related` so nothing leaks to other templates.
 *
 * Base geometry provenance: references/Tada.xd, artboard "Tarifler – Detay"
 * (artboard-23185d7c-d924-4ba4-9086-65c54c5137bb). Values are matched to the
 * reference across explicit breakpoint tiers (1601+ / 1101–1600 / ≤1100 /
 * ≤767), the same discrete-tier convention already established in
 * assets/css/pages/product-detail.css — deliberately NOT a fluid
 * calc(var(calc())) multiplier: an earlier draft of this file used a single
 * `--rd-scale` custom property (itself a calc()) multiplied again inside
 * every other property's calc(), and that doubly-nested
 * calc(Npx * var(--custom-prop-holding-a-calc)) pattern renders wrong in
 * real Chromium at several viewport widths inside the 1101–1600 band
 * (confirmed via computed-style inspection — widths came out 5–8x too
 * large, e.g. a 60px circle rendering at 357–463px). Every value below is a
 * plain, literal pixel value per tier — no nested custom-property calc().
 *
 * The container width formula and breadcrumb block are copied token-for-
 * token from assets/css/pages/product-detail.css (`.product-detail__inner` /
 * `__breadcrumb` / `__crumbs`) since the XD card width here (1641) matches
 * that established convention (1640) almost exactly — same system, not a
 * third container convention.
 * ==========================================================================*/

.recipe-detail {
	font-synthesis: none;
}
.recipe-detail-main {
	padding-bottom: 40px;
}

.recipe-detail__inner {
	width: min(1640px, calc(100vw - 100px));
	margin: 0 auto;
}
@media (min-width: 1101px) and (max-width: 1600px) {
	.recipe-detail__inner {
		width: calc(100vw - 209px);
	}
}
@media (max-width: 1100px) {
	.recipe-detail__inner {
		width: calc(100% - 48px);
	}
}
@media (max-width: 767px) {
	.recipe-detail__inner {
		width: calc(100% - 32px);
	}
}

/* ---- Heading + breadcrumb ---- */
.recipe-detail__head {
	margin: 56px 0 40px;
}
@media (max-width: 1100px) {
	.recipe-detail__head { margin: 32px 0 28px; }
}
@media (max-width: 767px) {
	.recipe-detail__head { margin: 24px 0 20px; }
}
.recipe-detail__page-title {
	margin: 0 0 10px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--tada-red-dark);
}
@media (max-width: 1100px) {
	.recipe-detail__page-title { font-size: 28px; }
}
@media (max-width: 767px) {
	.recipe-detail__page-title { font-size: 24px; }
}
/* Breadcrumb: flat 12px, pure black in every state (link/visited/hover) —
   TADA red is allowed on hover/focus only, never as a resting or visited
   colour, so an explicit :visited rule is included rather than relying on
   author-stylesheet-beats-UA-stylesheet precedence alone. */
.recipe-detail__breadcrumb {
	font-size: 0;
}
.recipe-detail__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #000;
}
.recipe-detail__crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.recipe-detail__crumbs li:not(:last-child)::after {
	content: "›";
	font-weight: 500;
	color: #000;
}
.recipe-detail__crumbs a,
.recipe-detail__crumbs a:link,
.recipe-detail__crumbs a:visited {
	color: #000;
	text-decoration: none;
	transition: color .2s ease;
}
.recipe-detail__crumbs a:hover,
.recipe-detail__crumbs a:focus-visible {
	color: var(--tada-red-active);
}
.recipe-detail__crumbs .is-current {
	color: #000;
}

/* Vertical rhythm between the 4 stacked sections (hero card / hazırlanışı /
   püf+kalori / farklı lezzetler). */
.recipe-hero,
.recipe-panel,
.recipe-related {
	margin: 0 0 28px;
}
.recipe-related {
	margin-bottom: 0;
}
@media (min-width: 1101px) {
	.recipe-hero,
	.recipe-panel {
		margin-bottom: 32px;
	}
}

/* ============================================================================
 * CARD 1 — .recipe-hero (photo panel + info panel). Two equal columns
 * (1fr 1fr) desktop, stacked mobile — DOM order (media, then info) already
 * matches the required mobile reading order (görsel → ürün etiketi → rozet →
 * başlık → açıklama → metrikler → malzemeler), no reordering needed.
 * Compacted vs the literal XD card (which ran ~730px tall at native scale) —
 * the right panel's content is vertically centered (flex, see
 * .recipe-hero__info) so the whitespace above the badge and below the
 * ingredients list stays visually balanced at any content length, instead of
 * a brittle fixed card height.
 * ==========================================================================*/
.recipe-hero {
	display: grid;
	overflow: hidden;
	background: var(--tada-cream);
	border-radius: 28px;
}
@media (min-width: 1101px) {
	.recipe-hero {
		grid-template-columns: 1fr 1fr;
		border-radius: 36px;
	}
}
@media (min-width: 1601px) {
	.recipe-hero {
		border-radius: 44px;
	}
}

.recipe-hero__media {
	position: relative;
	/* Photo + pill are centered as one block in the yellow panel, so the yellow
	   band above the photo and below the pill stay equal no matter how much
	   taller the info column is (grid-stretch). */
	display: flex;
	flex-direction: column;
	background: var(--tada-yellow);
	padding: 20px;
}
@media (min-width: 1101px) {
	.recipe-hero__media { padding: 32px; }
}
@media (min-width: 1601px) {
	.recipe-hero__media { padding: 40px; }
}

/* Photo + pill as one block. On desktop the whole media column grid-stretches
   to the (taller) info column's height, and this figure + photo flex-grow to
   fill it, so the photo is exactly as tall as the info content beside it and
   the hero card stays compact — never driven taller by a fixed photo ratio. */
.recipe-hero__figure {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}
@media (min-width: 1101px) {
	.recipe-hero__figure { flex: 1 1 auto; min-height: 0; }
}

/* Decorative ring composition — a single concentric group (3 circles,
   shared center) centered on the YELLOW AREA itself (`.recipe-hero__rings`
   spans the full `.recipe-hero__media` box via inset:0, and each ring is
   centered at 50%/50% of that), not on the photo — so it reads as one
   continuous radiating pattern behind the (shorter, see .recipe-hero__photo
   below) image rather than corner fragments. Sized as percentages of the
   media box so it scales fluidly at every breakpoint with no per-tier value
   needed. Real vector rings (CSS), not a bitmap. */
.recipe-hero__rings {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.recipe-hero__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	aspect-ratio: 1 / 1;
	border: 1px solid #fff;
	border-radius: 50%;
	opacity: .45;
	transform: translate(-50%, -50%);
}
.recipe-hero__ring--1 { width: 92%; }
.recipe-hero__ring--2 { width: 72%; }
.recipe-hero__ring--3 { width: 52%; }

/* Photo shortened vs the literal XD ratio (was 680/692, near-square) to a
   more horizontal frame, freeing visible yellow margin around it for the
   ring composition above while keeping the full width and every ingredient
   in frame (object-position nudged up slightly so the tuna/vegetable top
   layer — not the plate rim — stays the visual center of the crop). */
.recipe-hero__photo {
	position: relative;
	z-index: 1;
	display: block;
	/* Full media-inner width, fixed LANDSCAPE frame (≈1.26:1) taken from the
	   XD/PDF "Tarifler – Detay" hero photo box (photo 384 wide × 305 tall of a
	   ~388px media inner column on the reference render). The photo is
	   deliberately NOT stretched to the media panel's full height — the media
	   column grid-stretches to the taller info panel, so this fixed-ratio
	   photo top-aligns and leaves a real yellow band below it, into which the
	   product pill hangs (see .recipe-hero__pill). Earlier the img used
	   height:100%, which let the photo grow to the full card height and read
	   as a tall portrait — wrong per reference. */
	/* The photo FILLS the panel frame (object-fit:cover). Mobile (stacked, no
	   grid to stretch the column) uses a fixed landscape ratio for height;
	   desktop lets the photo flex-grow to the info-driven column height (see
	   .recipe-hero__figure) so the card stays compact like the reference. */
	width: 100%;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	box-shadow: var(--tada-shadow-soft);
	border-radius: 20px;
}
@media (min-width: 1101px) {
	.recipe-hero__photo {
		flex: 1 1 auto;
		min-height: 0;
		aspect-ratio: auto;
	}
}
.recipe-hero__photo-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	object-fit: cover;
	object-position: center 52%;
}
@media (min-width: 1601px) {
	.recipe-hero__photo-img { border-radius: 26px; }
}

/* Product pill — sits in the yellow band BELOW the photo (not straddling it),
   left-aligned with the photo's own left edge (both start at the media box's
   inner padding line). It is a normal flow element after the photo, so it
   drops into the yellow band opened up beneath the fixed-ratio photo, with
   the rest of the band showing below it (matches the reference). z-index keeps
   it above the decorative rings. Optional link (tarif_urun_link,
   template-parts/recipe-detail/hero.php): default black bg / white text /
   white dot; hover/focus inverts to TADA red with text and dot staying
   white, box model unchanged (no layout shift), focus-visible outline
   preserved (global reset, main.css). */
.recipe-hero__pill {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	margin-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	box-sizing: border-box;
	max-width: 100%;
	width: fit-content;
	padding: 9px 16px;
	background: var(--tada-black);
	color: #fff;
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .2s ease;
}
@media (min-width: 1101px) {
	.recipe-hero__pill { margin-top: 22px; }
}
a.recipe-hero__pill:hover,
a.recipe-hero__pill:focus-visible {
	background: var(--tada-red-active);
	color: #fff;
}
.recipe-hero__pill-dot {
	flex: none;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #fff;
}
@media (min-width: 1601px) {
	.recipe-hero__pill { padding: 11px 20px; }
}

.recipe-hero__info {
	padding: 24px 20px 28px;
}
@media (min-width: 1101px) {
	.recipe-hero__info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 32px 32px 32px 28px;
	}
}
@media (min-width: 1601px) {
	.recipe-hero__info { padding: 40px 48px 40px 44px; }
}

/* "HAFTANIN TARİFİ" badge — yellow pill with a leading dot marker on the left
   of the text (same "• Label" pill language as the category pill), background
   colour unchanged (stays TADA yellow). */
.recipe-hero__badge {
	display: inline-flex;
	align-self: flex-start; /* .recipe-hero__info is a column flex box whose
		default align-items:stretch would otherwise stretch this pill to the
		full panel width — pin it to its own content width instead. */
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	padding: 9px 16px;
	background: var(--tada-yellow);
	color: #000;
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .01em;
}
.recipe-hero__badge::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #000;
}

/* Dominant, wraps to two lines like the reference ("Ton Balıklı" /
   "Salata Tarifi"). max-width is expressed in em so it scales with the
   font-size across tiers and forces the wrap at a natural word boundary
   without a hardcoded <br> (this template is shared by every recipe, so the
   break must come from width, not baked-in markup). */
.recipe-hero__title {
	margin: 0 0 12px;
	max-width: 7.5em;
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.08;
	color: #000;
}
@media (min-width: 601px) {
	.recipe-hero__title { font-size: 38px; }
}
@media (min-width: 1101px) {
	.recipe-hero__title { font-size: 48px; }
}
@media (min-width: 1601px) {
	.recipe-hero__title { font-size: 56px; margin-bottom: 16px; }
}
/* Mobile: title on a single line ("Ton Balıklı Salata Tarifi") — drop the
   width cap that forces the balanced two-line wrap on desktop, and size it to
   fit the panel width. */
@media (max-width: 767px) {
	.recipe-hero__title {
		max-width: none;
		font-size: 22px;
	}
}

.recipe-hero__description {
	margin: 0 0 18px;
	max-width: 46em;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.6;
	font-weight: 500;
	color: #000;
}
@media (min-width: 1601px) {
	.recipe-hero__description { margin-bottom: 22px; }
}

/* ---- Süre / Porsiyon / Servis metrics row — 3 equal columns ---- */
.recipe-hero__metrics {
	display: flex;
	gap: 16px;
	margin: 0 0 18px;
	padding: 12px 0;
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
}
@media (min-width: 1601px) {
	.recipe-hero__metrics { gap: 32px; padding: 16px 0; margin-bottom: 24px; }
}
/* Symmetric (left+right) padding on every column, not just padding-left, so
   `align-items:center` below centers each column's content within its own
   equal-width box — a left-only padding would have skewed the centerline
   toward the divider side. The divider itself is a one-sided border (a
   shared boundary line, not doubled between neighbours), suppressed on the
   first column only. */
.recipe-hero__metric {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 16px;
	border-left: 1px solid #d9d9d9;
}
.recipe-hero__metric:first-child {
	border-left: 0;
}
@media (min-width: 1601px) {
	.recipe-hero__metric { padding: 0 32px; }
}
.recipe-hero__metric-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0 0 8px;
}
.recipe-hero__metric-head svg {
	flex: none;
	width: 15px;
	height: 15px;
}
@media (min-width: 1601px) {
	.recipe-hero__metric-head svg { width: 18px; height: 18px; }
}
.recipe-hero__metric-label {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #000;
	white-space: nowrap;
}
.recipe-hero__metric-value {
	display: block;
	font-family: "Baloo 2", Arial, sans-serif;
	font-size: clamp(20px, 1.6vw, 26px);
	font-weight: 700;
	color: #000;
}

/* ---- Malzemeler — 2-column list, first half → col 1, second half → col 2
   (bucketing done server-side in hero.php; DOM read order already matches
   the visual order, so a plain 2-column grid is enough, no CSS
   columns/masonry reflow needed). ---- */
.recipe-hero__ingredients-title {
	margin: 0 0 12px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #000;
}
.recipe-hero__ingredients-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px 24px;
}
@media (min-width: 481px) {
	.recipe-hero__ingredients-columns { grid-template-columns: 1fr 1fr; }
}
.recipe-hero__ingredients-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.recipe-hero__ingredients-list li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 16px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.55;
	font-weight: 500;
	color: #000;
}
.recipe-hero__ingredients-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tada-red);
}
/* Brand-word highlight ("tada") inside an ingredient line — see
   tada_highlight_brand_word() in inc/helpers.php for the safe-escaping
   approach that produces this span. */
.recipe-detail__brand {
	color: var(--tada-red-active);
}

/* ============================================================================
 * CARDS 2 & 3 — .recipe-panel (Hazırlanışı / Püf Noktaları ve Kalori). Same
 * krem card chrome; small "TARİF DETAYLARI" badge above the title on both
 * (reference/XD form — see preparation.php / tips.php).
 * ==========================================================================*/
.recipe-panel {
	padding: 24px 20px;
	background: var(--tada-cream);
	border-radius: 28px;
}
@media (min-width: 1101px) {
	.recipe-panel { padding: 36px; border-radius: 36px; }
}
@media (min-width: 1601px) {
	.recipe-panel { padding: 48px 56px; border-radius: 44px; }
}

.recipe-panel__badge {
	display: inline-block;
	margin: 0 0 16px;
	padding: 9px 16px;
	background: var(--tada-yellow);
	color: #000;
	border-radius: 999px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.recipe-panel__badge--accent {
	background: var(--tada-red);
	color: #fff;
}

.recipe-panel__title,
.recipe-panel__subtitle {
	margin: 0 0 20px;
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 800;
	font-size: 22px;
	line-height: 1.15;
	color: #000;
}
@media (min-width: 601px) {
	.recipe-panel__title,
	.recipe-panel__subtitle { font-size: 26px; }
}
@media (min-width: 1101px) {
	.recipe-panel__title,
	.recipe-panel__subtitle { font-size: 32px; }
}
@media (min-width: 1601px) {
	.recipe-panel__title,
	.recipe-panel__subtitle { font-size: 40px; margin-bottom: 24px; }
}
.recipe-panel__subtitle {
	margin-top: 24px;
}
@media (min-width: 1601px) {
	.recipe-panel__subtitle { margin-top: 32px; }
}

/* ---- Hazırlanışı steps — 3-col desktop grid, wraps naturally past 6 ---- */
.recipe-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 601px) {
	.recipe-steps { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (min-width: 1101px) {
	.recipe-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.recipe-steps__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 14px;
	border-top: 1px solid #d9d9d9;
}
.recipe-steps__number {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--tada-yellow);
	color: #000;
	border-radius: 50%;
	font-family: "Baloo 2", Arial, sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}
@media (min-width: 1101px) {
	.recipe-steps__number { width: 48px; height: 48px; font-size: 26px; }
}
@media (min-width: 1601px) {
	.recipe-steps__number { width: 60px; height: 60px; font-size: 32px; }
}
.recipe-steps__text {
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.6;
	font-weight: 500;
	color: #000;
}
/* Mobile: number beside its text (not stacked above it) so the steps list
   isn't so tall; number and text vertically centred against each other. */
@media (max-width: 600px) {
	.recipe-steps__item {
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}
	.recipe-steps__number { flex: none; }
}

/* ---- Püf Noktaları / Kalori bullet lists ---- */
.recipe-tips {
	margin: 0;
	padding: 0;
	list-style: none;
}
.recipe-tips li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 18px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.6;
	font-weight: 500;
	color: #000;
}
.recipe-tips li:last-child {
	margin-bottom: 0;
}
.recipe-tips li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tada-red);
}

/* ---- Free WYSIWYG content (Card 3 — tarif_serbest_icerik) ----
   Editor-authored HTML: headings, paragraphs and lists are styled to match
   the rest of the recipe card (Baloo display headings, Montserrat body, red
   list bullets) so any amount of client content renders on-brand. */
.recipe-panel__content > :first-child { margin-top: 0; }
.recipe-panel__content > :last-child { margin-bottom: 0; }
.recipe-panel__content h2,
.recipe-panel__content h3,
.recipe-panel__content h4 {
	font-family: "Baloo 2", Arial, sans-serif;
	font-weight: 800;
	line-height: 1.15;
	color: #000;
}
.recipe-panel__content h2 { margin: 32px 0 20px; font-size: 22px; }
.recipe-panel__content h3 { margin: 28px 0 16px; font-size: 19px; }
.recipe-panel__content h4 { margin: 24px 0 14px; font-size: 16px; }
@media (min-width: 601px) {
	.recipe-panel__content h2 { font-size: 26px; }
	.recipe-panel__content h3 { font-size: 21px; }
}
@media (min-width: 1101px) {
	.recipe-panel__content h2 { font-size: 32px; }
	.recipe-panel__content h3 { font-size: 24px; }
	.recipe-panel__content h4 { font-size: 18px; }
}
@media (min-width: 1601px) {
	.recipe-panel__content h2 { font-size: 40px; margin: 40px 0 24px; }
	.recipe-panel__content h3 { font-size: 28px; }
}
.recipe-panel__content p {
	margin: 0 0 14px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.6;
	font-weight: 500;
	color: #000;
}
.recipe-panel__content ul,
.recipe-panel__content ol {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.recipe-panel__content li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 18px;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.6;
	font-weight: 500;
	color: #000;
}
.recipe-panel__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tada-red);
}
.recipe-panel__content ol {
	counter-reset: tada-ol;
}
.recipe-panel__content ol li {
	counter-increment: tada-ol;
}
.recipe-panel__content ol li::before {
	content: counter(tada-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--tada-red);
}
.recipe-panel__content a {
	color: var(--tada-red-active);
	text-decoration: underline;
}
.recipe-panel__content strong { font-weight: 700; }

/* ============================================================================
 * FARKLI LEZZETLER — .recipe-related. Isolated slider: own block name and
 * own `data-recipe-related-*` JS hooks (assets/js/recipe-detail.js). Reuses
 * the shared `.recipe-card` component (main.css, site-wide) completely
 * unmodified — only overrides its flex-basis here to get the reference's
 * 3-up/2-up/1-up layout (526px-per-card @1640, matching the exact grid math
 * already established in assets/css/pages/tarifler.css), and reuses the
 * `.home-categories__arrow` / `.home-catalog__button--secondary` visual
 * components verbatim. None of this touches `.home-recipes*` markup, CSS,
 * or JS. tada_get_related_tarifler() (inc/helpers.php) caps at 3
 * published+visible same-category posts excluding the current one and never
 * duplicates content — with fewer than 3, the arrows just report
 * aria-disabled="true" (nothing to page through), no fake card is ever
 * rendered.
 * ==========================================================================*/
.recipe-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}
.recipe-related__heading .recipe-panel__badge,
.recipe-related__heading .recipe-panel__title {
	margin-bottom: 12px;
}
.recipe-related__heading .recipe-panel__title {
	margin-bottom: 0;
	color: var(--tada-red-active);
}
.recipe-related__all.home-catalog__button--secondary {
	/* .home-catalog__button's own flex:1 1 auto (main.css) would stretch this
	   to fill the row once it wraps onto its own line below the title on
	   narrow viewports — kept to its natural content width instead, so it
	   reads as a balanced pill, not a full-width bar. Reference form: white
	   pill, light border, DARK text (the shared secondary component defaults
	   to TADA-red text — overridden here to match this section's reference). */
	flex: none;
	width: auto;              /* override the shared button's fixed 225/300px */
	min-height: 48px;
	padding: 0 30px;
	color: var(--tada-gray-700);
	border: 1px solid #e7e7e7;
	border-radius: 999px;     /* full pill */
	box-shadow: none;         /* reference button has no drop shadow */
	font-size: 13px;
	text-decoration: none;
}
/* Page-local hover/focus override: the shared `.home-catalog__button--
   secondary` component's own base hover is black/white (main.css) — this
   instance uses TADA red instead, per direct direction. Scoped to
   `.recipe-related__all` only (two classes on the selector outrank the
   shared component's single-class hover rule regardless of source order),
   so the global secondary-button system and every other page using it are
   untouched. Same box model (no width/height/padding change) — no layout
   shift on hover. */
.recipe-related__all.home-catalog__button--secondary:hover,
.recipe-related__all.home-catalog__button--secondary:focus-visible {
	background: var(--tada-red-active);
	border-color: var(--tada-red-active);
	color: #fff;
}
/* Mobile: keep the CTA in its original spot — top-right, on the heading row.
   The heading and pill are both trimmed a little so the long label fits
   beside "Farklı Lezzetler" without overflowing. */
@media (max-width: 600px) {
	.recipe-related__head {
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
	}
	.recipe-related__all.home-catalog__button--secondary {
		flex: 0 0 auto;
		min-height: 36px;
		padding: 0 14px;
		font-size: 11px;
		white-space: nowrap;
	}
}

/* No side arrows in this section (reference navigates via the pagination dots
   / swipe only) — the viewport spans the full row width. */
.recipe-related__layout {
	display: flex;
	align-items: center;
}

.recipe-related__viewport {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	touch-action: pan-y;
}
.recipe-related__track {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform .35s ease-out;
	will-change: transform;
}
.recipe-related__track .recipe-card {
	flex: 0 0 100%;
}
@media (min-width: 601px) {
	.recipe-related__track { gap: 16px; }
	.recipe-related__track .recipe-card { flex: 0 0 calc((100% - 16px) / 2); }
}
@media (min-width: 1101px) {
	.recipe-related__track { gap: 31px; }
	.recipe-related__track .recipe-card { flex: 0 0 calc((100% - 62px) / 3); }
}

.recipe-related__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	/* Matches the homepage Kategoriler/Tarifler sliders' own dots-to-content
	   gap exactly (.home-categories__pagination / .home-recipes__pagination,
	   main.css) at each breakpoint — this section previously had a flat,
	   unresponsive 20px here instead of following that shared rhythm. */
	margin-top: 24px;
	padding: 0;
}
@media (min-width: 1101px) {
	.recipe-related__pagination { margin-top: 42.5px; }
}
@media (min-width: 1601px) {
	.recipe-related__pagination { margin-top: 50px; }
}
.recipe-related__pagination button {
	display: block;
	width: 40px;
	height: 6px;
	padding: 0;
	background: var(--tada-black);
	opacity: .18;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	transition: opacity .25s ease;
}
.recipe-related__pagination button.is-active {
	opacity: 1;
}
.recipe-related__pagination:empty {
	display: none;
}

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

/* Comments — reuses .recipe-panel's existing card chrome (padding/radius/background). */
.recipe-comments__list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}
.recipe-comments__list .comment {
	padding: 20px 0;
	border-bottom: 1px solid var(--tada-gray-200);
}
.recipe-comments__list li:last-child > .comment {
	border-bottom: 0;
}
.recipe-comments__list .comment-author .fn {
	font-weight: 700;
	font-style: normal;
	color: var(--tada-black);
}
.recipe-comments__list .comment-metadata {
	font-size: 13px;
	color: var(--tada-gray-700);
}
.recipe-comments__list .comment-metadata a {
	color: inherit;
}
.recipe-comments__list .comment-content p {
	margin: 8px 0 0;
}
.recipe-comments__closed-notice {
	color: var(--tada-gray-700);
}
.recipe-comments__form {
	display: grid;
	gap: 14px;
	max-width: 560px;
}
.recipe-comments__form p {
	margin: 0;
}
.recipe-comments__form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}
.recipe-comments__form input[type="text"],
.recipe-comments__form input[type="email"],
.recipe-comments__form input[type="url"],
.recipe-comments__form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--tada-gray-400);
	border-radius: var(--tada-radius-sm);
	font: inherit;
}
.recipe-comments__submit {
	justify-self: start;
	padding: 14px 32px;
	background: var(--tada-red);
	color: var(--tada-white);
	border: 0;
	border-radius: var(--tada-radius-sm);
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease;
}
.recipe-comments__submit:hover,
.recipe-comments__submit:focus-visible {
	background: var(--tada-red-dark);
}

/* ============================================================================
 * TABLET REFINEMENT — 769–1100px only. Visual polish pass on top of the
 * already-approved tablet composition: no structural change, no reordering,
 * no new component. Deliberately the SAME band bounds already used by
 * assets/css/pages/product-detail.css ("min-width: 769px and max-width:
 * 1100px") so the two interior detail pages share one tablet definition
 * rather than introducing a third. Mobile (≤767) and desktop (≥1101) are
 * untouched — every rule below is inside this one query.
 * ==========================================================================*/
@media (min-width: 769px) and (max-width: 1100px) {

	/* ---- Page head: adopt the shared interior-page rhythm tokens ----
	   Measured at 820: this page ran header→H1 at 32px with a 28px H1, while
	   the approved product detail page (product-detail.css, same band) reads
	   the main.css :root tokens and renders 40px / 30px. Same tokens here, so
	   header→H1→breadcrumb→first-card is literally one system across the
	   interior detail pages instead of a near-copy. The 10px H1→breadcrumb
	   step, the 28px breadcrumb→card step and the 24px container gutter
	   already matched and are left alone. */
	.recipe-detail__head {
		margin: var(--tada-page-head-top) 0 var(--tada-page-head-bottom);
	}
	.recipe-detail__page-title {
		font-size: var(--tada-page-title-size);
	}

	/* ---- Hero photo: −9.1% height ----
	   The frame kept the ≤1100 base 16/11 ratio (732 × 503.3 at 820), which
	   made the yellow media panel dominate the first screen. 16/10 takes the
	   same full-width frame to 457.5 (−45.8px, −9.1%) without touching the
	   width, the object-fit: cover crop mode, the yellow panel padding, or the
	   decorative ring composition (rings are sized as % of the media box, so
	   they follow automatically). Height comes from the natural slot ratio —
	   no transform: scale(), no change to the img element itself. */
	.recipe-hero__photo {
		aspect-ratio: 16 / 10;
	}
	/* Crop anchor re-derived for the shorter frame so the shorter frame is not
	   also a tighter crop on the food. The source photo is portrait (738×922)
	   rendered into a landscape frame, so cover always trims top and bottom;
	   at the base 52% the 45.8px the frame lost came off both ends and cut
	   through the bowl's near rim. 57% is the value that puts the BOTTOM
	   content edge back exactly where the taller frame had it —
	   (914.5 − 457.5) × 0.57 ≈ 260 ≈ (914.5 − 503.3) × 0.52 + 45.8 — so the
	   bowl still closes at the bottom and the tuna/vegetable top layer stays
	   whole; the trim is taken entirely out of the empty background above. */
	.recipe-hero__photo-img {
		object-position: center 57%;
	}

	/* ---- Body copy: onto the page's own body measure ----
	   Every running-text run in the recipe card was a flat 12.5px/1.6 while
	   the page's own body text (theme.json styles.typography, served as
	   `--wp--preset--font-size--medium`, a fluid clamp) computes to 14.92px /
	   1.6 at 820 — the recipe body read visibly smaller than the rest of the
	   site. These now consume that exact same custom property rather than a
	   guessed literal, so they stay locked to the page measure at every width
	   in the band (14px at 769 → 15.3px at 1100). The px fallback only ever
	   applies if WP global styles are absent.
	   Headings, the badge/pill labels and the süre/porsiyon/servis meta values
	   are deliberately NOT in this list — they keep their own scale. */
	.recipe-hero__description,
	.recipe-hero__ingredients-list li,
	.recipe-steps__text,
	.recipe-tips li,
	.recipe-panel__content p,
	.recipe-panel__content li {
		font-size: var(--wp--preset--font-size--medium, 15px);
		line-height: 1.6;
	}

	/* ---- Vertical rhythm inside the hero card ----
	   Measured at 820 the section boundaries stepped 14 / 12 / 18 / 18px —
	   no discernible system. Unified on 24px, which is the low end of the
	   target band and already matches the 28px card→card gap closely enough
	   to read as one rhythm (24 / 24 / 24 / 24 / 28 / 28) without inflating
	   the card. The label→list step inside the Malzemeler group stays 12px:
	   it is an intra-group step, not a section boundary. */
	.recipe-hero__badge,
	.recipe-hero__title,
	.recipe-hero__description,
	.recipe-hero__metrics {
		margin-bottom: 24px;
	}

	/* ---- "Farklı Lezzetler" card legibility ----
	   The shared .recipe-card component (main.css) is left completely
	   untouched — these overrides are scoped to this section's track only, so
	   the homepage Tarifler slider and the /tarifler/ archive keep their own
	   card typography at this band. Card box, height, category pill and
	   padding are unchanged; only the title/excerpt type scale moves, and the
	   body's right inset grows by 4px so the larger text keeps clear air
	   against the CTA arrow. */
	.recipe-related__track .recipe-card__body {
		right: 66px;
	}
	.recipe-related__track .recipe-card__title {
		margin-bottom: 6px;
		font-size: 18px;
		line-height: 1.35;
	}
	.recipe-related__track .recipe-card__excerpt {
		font-size: 14px;
		line-height: 1.5;
	}
}