/* ============================================================================
 * 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;
	/* `minmax(0, 1fr)`: varsayilan `1fr`in otomatik minimumu MIN-CONTENT'tir.
	   Bilgi kolonundaki metrik satiri (uc hucre + nowrap etiketler) 340.5px
	   min-content uretiyordu; tek kolonlu (<=1100) yerlesimde bu, kolonu
	   380.5px'e zorluyor ve sari medya paneli karti asiyordu — olculen tasma
	   390'da 22.5px, 360'ta 52.5px (kart `overflow: hidden` oldugu icin
	   fotonun sag kenari kirpiliyordu). minmax(0,1fr) kolonun icerikten
	   kucuk olmasina izin verir; hucreler zaten `min-width: 0`. */
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	background: var(--tada-cream);
	border-radius: 28px;
}
/* Baseline minimum kart yüksekliği (müşteri revizesi). Kartın yüksekliğini
   bugüne kadar TAMAMEN sağdaki bilgi kolonunun içeriği belirliyordu: medya
   kolonu grid-stretch ile ona uyuyor, .recipe-hero__photo da (masaüstünde
   aspect-ratio:auto + flex:1 1 auto) kalan yüksekliği dolduruyor. Sağda daha
   az içerik girilen bir tarifte kart ve onunla birlikte fotoğraf birlikte
   çöküyordu — ölçüldü: 1920'de 639.80 -> 429.20px (%32.9), fotoğraf
   495.80 -> 285.20px; 1101'de %40.5.
   Zemin değerleri, referans tarifin (Ton Balıklı Salata) GERÇEK render
   yüksekliğinin ilgili katmandaki EN DÜŞÜK ölçümünden alındı, ortalamadan
   veya tek bir viewport'tan değil — aksi hâlde zemin mevcut sayfayı bazı
   genişliklerde büyütürdü:
     ≥1601px      : ölçülen 639.17 (1601) … 639.80 (1800+)  -> zemin 639px
     1101–1600px  : ölçülen 581.81 (1520) … 665.67 (1101)   -> zemin 580px
   Bu yüzden `height` değil `min-height`: içerik daha fazlaysa satır serbestçe
   büyümeye devam ediyor (ölçüldü: 10 ek malzeme satırında 933.55px, taşma 0),
   metin kesilmiyor. ≤1100px'e bilerek dokunulmadı — orada kart zaten tek
   kolona yığılıyor ve masaüstü zeminini oraya zorlamak dev bir sarı boşluk
   üretirdi. Kolon oranları, dikey hizalama, padding, radius ve crop
   davranışı değişmedi. */
@media (min-width: 1101px) {
	.recipe-hero {
		grid-template-columns: 1fr 1fr;
		border-radius: 36px;
		min-height: 580px;
	}
}
@media (min-width: 1601px) {
	.recipe-hero {
		border-radius: 44px;
		/* Zemin yüksekliği burada da gereksiz — aynı gerekçe, bkz.
		   1200–1600 bloğundaki açıklama. Medya kolonu fotoğrafın kendi
		   oranından doğal bir taban üretiyor (1920'de ~654px). */
		min-height: 0;
	}
}

.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; }
}
/* 40px, 1920'de panel genişliğinin %4.88'i — küçük masaüstündeki
   oransal dolguyla aynı değer; bantta da oranı sabit tutmak için yüzde. */
@media (min-width: 1601px) {
	.recipe-hero__media { padding: 4.88%; }
}

/* 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;
}
/* Masaustunde foto panelini DOLDURUR, ama orani asla 4/3'un altina inmez.
   Iki ayri hatanin ortak cozumu:
   1) Eskiden `flex: 1 1 auto` + `aspect-ratio: auto` vardi; kutu sag bilgi
      kolonunun icerik yuksekligine gore uzayip orani kontrolsuz kaliyordu
      (olculen 1.162 @1920, 0.892 @1440, 0.768 @1280) ve `cover` YANLARDAN
      kesiyordu (%42.4 @1280).
   2) Sonra oran sabitlendi (`flex: 0 0 auto`), yatay kirpma sifirlandi ama
      bu sefer foto panelin ustunde kucuk kalip altinda buyuk sari bosluk
      biraktu (olculen artan bosluk 135px @1440, 159px @1366, 238px @1280).
   Cozum: foto yine BUYUR (`flex: 1 1 auto`), fakat yuksekligi kabin kendi
   genisliginin %75'iyle sinirlanir — yani kutu orani >= 4/3. 4/3, musteriye
   verilen tarif gorseli standardiyla (2000x1500) ayni oran, dolayisiyla
   uyumlu gorsellerde yatay kirpma SIFIR kalir. Sinir `cqw` ile ifade
   edildigi icin her breakpoint'te kendiliginden dogru; tek bir viewport'a
   yazilmis sabit yukseklik yok.
   Artan bosluk kalirsa figur dikeyde ortalanir, boylece bosluk foto+pill
   blogunun altina yigilmak yerine ust/alt esit dagilir. */
@media (min-width: 1101px) {
	.recipe-hero__media {
		container-type: inline-size;
	}
	.recipe-hero__figure {
		justify-content: center;
	}
	.recipe-hero__photo {
		flex: 1 1 auto;
		min-height: 0;
		max-height: 75cqw;
	}
}
.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;
	/* Genislik sinirini KOLON belirler, font degil.
	   Burada eskiden `max-width: 7.5em` vardi ve referans tarifin
	   ("Ton Balikli Salata Tarifi") dengeli iki satira kirilmasi icin
	   ayarlanmisti — yani tek bir tarif adina gore. Sonuc: 1920'de bilgi
	   kolonunda 728px yer varken baslik 420px'e sikisiyor, uzun adlar
	   4 satira dusuyor ve kart gereksiz uzuyordu (olculen: 781px).
	   Sinir kalkinca ayni baslik 2 satir, kart 660px. `text-wrap: balance`
	   coklu satirda satir uzunluklarini dengeler; desteklemeyen tarayicida
	   normal sarma davranisi gecerli olur (kayipsiz aşamalı iyilestirme). */
	text-wrap: balance;
	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 {
		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;
}

/* Dar mobilde uc metrik hucresi yan yana sigmiyordu: "1 - 2 Kişilik" iki
   satira dusuyordu (360/390/430'da olculdu). Once hucreye GERCEK genislik
   kazandiriliyor (gap 16->8, hucre yan dolgusu 16->4), sonra deger tipografisi
   akiskan hale getiriliyor. `clamp` tabani 14px: 513px'in ustunde deger yine
   20px, altinda viewport'la birlikte kuculuyor. Bu degerlerle "1 kişilik",
   "1 - 2 Kişilik", "4 - 6 Kişilik" ve "10 - 12 Kişilik" 360-600 arasindaki
   her genislikte TEK SATIR (olculdu). `white-space: nowrap` bilerek
   kullanilmadi — tasma yaratirdi. */
@media (max-width: 600px) {
	.recipe-hero__metrics { gap: 8px; }
	.recipe-hero__metric { padding: 0 4px; }
	.recipe-hero__metric-value { font-size: clamp(14px, 3.9vw, 20px); }
}

/* ---- 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.
 * ==========================================================================*/
/* NOT: Bu blok dosyanın SONUNDA duruyor çünkü aynı özgüllükteki
   `@media (min-width: 1101px)` kuralları (başlık font-size'ı, panel/bilgi
   dolguları, kolon tanımı) daha aşağıda tanımlı; blok yukarıda olsaydı
   onlar bunu ezerdi. */
/* ---- Küçük masaüstü kompozisyonu (1101–1600) ----
   Sorun foto değil, İKİ KOLONUN BİRLİKTE oluşturduğu denge: medya kolonunun
   iç genişliği 1920'de 740px iken 1280'de 471px'e düşerken sağ bilgi kolonunun
   içerik yüksekliği DÜŞMÜYOR, aksine artıyordu (ölçüldü: 1920'de 579.8px,
   1280'de 622.3px — başlık 2 satırdan 3'e çıkıyor, malzemeler daha çok
   sarıyor). 4/3 oranındaki bir foto o genişlikte bu yüksekliği hiçbir şekilde
   dolduramıyordu; boşluğu yalnız simetrik dağıtmak da yetmedi.
   Bu yüzden dört küçük ayar BİRLİKTE uygulanıyor:
     1. medya kolonu biraz daha geniş (1.12fr / .88fr) -> foto büyür,
     2. panel ve bilgi dolguları bu bantta 32px yerine 20/24px,
     3. başlık akışkan -> uzun ad 1280'de de İKİ satırda kalıyor (3 değil),
     4. malzeme satır aralığı hafif sıkılaştırılıyor.
   Ölçülen sonuç (uzun başlıklı tarif, artan sarı boşluk):
     1600: 6 -> 0px | 1470: 71 -> 0px | 1440: 101 -> 0px
     1366: 127 -> 19px | 1280: 209 -> 67px
   Foto alanı aynı bantta ~%40 büyüdü. Sabit yükseklik, translateY veya
   stretch kullanılmadı. */
@media (min-width: 1200px) and (max-width: 1600px) {
	/* 1920 REFERANSININ YAPISAL ORANLARI.
	   Önceki tur burada `1.12fr .88fr` ve sabit 20px dolgu kullanıyordu;
	   sayısal boşluk iyileşti ama kompozisyon 1920'den KOPTU: kolon oranı
	   1.00 yerine 1.27 (+%27), fotoğrafın çevresindeki sarı çerçeve
	   %4.88 yerine %2.9–3.3 (−%32…−41) oluyordu. Ekran görüntüsünde bu,
	   "fotoğraf paneli eziyor, çerçeve yok" hissi veriyordu.
	   Kolon oranı 1920'deki gibi 1:1'e, dolgu ise YÜZDE olarak panel
	   genişliğine bağlandı — 1920'de 40/820 = %4.88, dolayısıyla her
	   genişlikte aynı çerçeve kalınlığı oranı çıkıyor. */
	.recipe-hero {
		grid-template-columns: 1fr 1fr;
		/* Zemin yüksekliği KALDIRILDI. `min-height: 580px` fotoğrafın sağ
		   kolonun boyuna göre esnediği döneme aitti; o zaman içeriği az bir
		   tarifte kart ve fotoğraf birlikte çöküyordu. Artık fotoğrafın
		   ölçüsünü panelin GENİŞLİĞİ belirliyor, yani medya kolonu kendi
		   doğal yüksekliğini üretiyor ve çökme mümkün değil. Zemin ise
		   1280–1470 bandında bağlayıcı hâle gelip kartı içeriğinden 34–51px
		   uzatıyor, o fazlalık da doğrudan sarı boşluk olarak görünüyordu
		   (ölçüldü: 1440'ta üst/alt dolgu oranı 1920'ye göre +%16 iken
		   zemin kalkınca −%6'ya iniyor). */
		min-height: 0;
	}
	.recipe-hero__media {
		padding: 4.88%;
	}
	.recipe-hero__info {
		padding: 24px 24px 24px 20px;
	}
	/* 3.25vw, uzun tarif adını bandın EN DAR ucunda (1200px) bile iki
	   satırda tutan en büyük katsayı — 3.30vw'de 1250'nin altında üç satıra
	   düşüyor ve boşluk 51 -> 77px'e sıçrıyor (ölçüldü). */
	.recipe-hero__title {
		font-size: clamp(34px, 3.25vw, 48px);
	}
	/* Sağ kolonun boyunu kısaltan üç kalem: malzeme satırları, bölüm
	   aralıkları ve metrik hücreleri. Metrik değeri akışkan olmasaydı
	   1200 civarında iki satıra düşüp kolonu 31px daha uzatıyordu. */
	.recipe-hero__ingredients-list li {
		font-size: 11.5px;
		margin-bottom: 5px;
		line-height: 1.42;
	}
	.recipe-hero__ingredients-title {
		margin-bottom: 8px;
	}
	.recipe-hero__description {
		margin-bottom: 12px;
	}
	.recipe-hero__metrics {
		gap: 10px;
	}
	.recipe-hero__metric {
		padding: 0 8px;
	}
	.recipe-hero__metric-value {
		font-size: clamp(15px, 1.5vw, 26px);
	}
	/* Oran tabanı bu bantta 4/3 yerine ~1.28: kullanıcı %2–5 aralığında
	   kontrollü yatay kırpmaya izin verdi ve bu, kalan boşluğu kapatan son
	   adım (ölçülen yatay kırpma 1440'ta %2.7, 1366/1280'de %3.8 — tabağın
	   kendisi kesilmiyor, kırpma iki yandan ~%1.9). */
	.recipe-hero__photo {
		max-height: 79cqw;
	}
}

/* ---- Öne çıkarılan görseli olmayan tarif ----
   hero.php fotoğraf bloğunu yalnız görsel varsa basıyor; görselsiz
   tariflerde geriye BOŞ bir sarı panel kalıyordu (ölçüldü: 1440'ta
   689×580px kocaman boş blok, 1024'te 976×72px'lik anlamsız şerit).
   Şu an sitede 3 tarifin öne çıkarılan görseli yok. Görsel eklenene
   kadar kart tek kolona düşüp yalnız bilgi panelini gösteriyor;
   görsel yüklendiği anda kural kendiliğinden devre dışı kalır. */
.recipe-hero:not(:has(.recipe-hero__photo)) {
	grid-template-columns: minmax(0, 1fr);
}
.recipe-hero:not(:has(.recipe-hero__photo)) .recipe-hero__media {
	display: none;
}

/* ---- 1101–1199: iki kolon burada fiziksel olarak yetmiyor ----
   Ölçümle belirlendi, tahminle değil. Sağ kolonun içerik yüksekliği bu
   bandda 625–700px'e çıkarken (başlık + açıklama + metrikler + 9 malzeme)
   medya kolonunun iç genişliği 515 -> 460px'e iniyor; 4/3'e yakın bir foto
   o genişlikte bu boyu dolduramıyor. En agresif sıkılaştırmayla bile artan
   boşluk 1180'de 87px, 1152'de 99px, 1101'de 122px'te kalıyordu — kabul
   kriteri 80px. Yukarısı (1200) 73px ile kriteri sağlıyor, bu yüzden gerçek
   kırılma noktası 1200.
   Bu bandda kart, tablet/mobil ile aynı tek kolonlu kompozisyona geçiyor:
   foto 620px tavanıyla ortalanıyor, artan boşluk sıfır. 1199 -> 1200 geçişi
   layout değişimi olduğu için doğal; 1100 -> 1101 sınırında ise iki taraf da
   artık aynı tek kolonlu düzen ve foto ölçüsü birebir aynı (620px). */
@media (min-width: 1101px) and (max-width: 1199px) {
	.recipe-hero {
		grid-template-columns: minmax(0, 1fr);
	}
	.recipe-hero__media {
		padding: 36px 20px;
	}
	.recipe-hero__info {
		padding: 24px 20px 28px;
	}
	.recipe-hero__title {
		font-size: 38px;
	}
	/* Tek kolonda panelin fazla yüksekliği yok; foto kendi oranında dursun. */
	.recipe-hero__photo {
		flex: 0 0 auto;
		max-height: none;
	}
}

/* ---- Tablet: fotoğrafın ölçüsünü GENİŞLİK sınırı belirler ----
   Şikâyet "foto fazla büyük, nefes alanı yok"tu ve ölçüm bunu doğruladı:
   foto viewport'un %88–92'siydi (1024'te 936px), yani mobilden (%81.5) bile
   baskın. Önceki turda oranı 16/10'dan 16/11'e almak fotoyu daha da
   uzatmıştı — yanlış yön. Oran artık her yerde aynı (16/11) kalıyor,
   BOYUTU figürün genişlik tavanı belirliyor. 620px tavan, viewport'a göre
   doğal bir rampa üretiyor: 1100'de %56 -> 1024'te %60 -> 900'de %69 ->
   834'te %74 -> 820'de %76 -> 768'de %81, ve mobildeki %81.5'e pürüzsüz
   bağlanıyor. Yatay kırpma %0 kalır; tavan yalnız ölçüyü küçültür.
   Alt sınır 601px: altında zaten tek kolonlu mobil ritmi geçerli. */
@media (min-width: 601px) and (max-width: 1199px) {
	/* TABLET = MOBİLİN GENİŞ HÂLİ (390 referans).
	   Önceki tur fotoğrafa 620px sabit tavan koymuştu; bu, tabletteki
	   oranları mobilden UZAKLAŞTIRIYORDU (1024'te foto/panel 0.64 iken
	   mobilde 0.888, yan boşluk %18.2 iken mobilde %5.6). Yani tablet
	   ne desktop'a ne mobile benziyordu.
	   Tavan kaldırıldı; nefes alanı mobildeki mantıkla, yani panelin
	   YÜZDE dolgusuyla veriliyor: mobilde 20/358 = %5.59. Aynı yüzde
	   tablette de uygulanınca foto/panel ve yan boşluk oranları mobille
	   birebir aynı aileye giriyor, ölçü ise viewport'la birlikte doğal
	   şekilde büyüyor. */
	.recipe-hero__figure {
		max-width: none;
	}
	.recipe-hero__media {
		padding: 5.59%;
	}
}

@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);
	}

	/* Tablet bandina ozel `aspect-ratio: 16/10` + `object-position: center 57%`
	   ikilisi KALDIRILDI. Tek bir viewport (820px) icin ayarlanmis bir
	   istisnaydi ve fotoyu bandin tamaminda %9.1 kisaltiyordu; 768'de ve
	   mobilde 16/11, 769-1100 arasinda 16/10 oldugu icin tabletteki cerceve
	   sistemin geri kalanindan basik/sikisik gorunuyordu. Artik <=1100'un
	   tamami tek ve ayni 16/11 cercevesini kullaniyor — masaustundeki
	   >=4/3 tabaniyla da tutarli. */

	/* ---- 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;
	}
}