/**
 * Structural polish that theme.json cannot express (pseudo-elements, hover states,
 * transitions). Colours are read only from the theme.json palette custom properties,
 * so this file re-skins automatically for any business reusing this theme.
 */

/* WordPress puts its default ~19px blockGap between every top-level section on the
   page. Each section already has its own generous top/bottom padding, so that extra
   margin is pure redundant space — and since the page background (cream) shows
   through it, every section boundary got a thin pale seam, however well the two
   sections' own colours were matched. Zero it out; padding alone spaces sections. */
.entry-content > .wp-block-group,
.entry-content > .wp-block-cover {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* The same default blockGap also lands one level up — between the header
   template part and <main> itself — which the rule above doesn't reach since
   <main> isn't inside .entry-content. Same fix, same reason. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Sticky header (client feedback, 2026-09): stays pinned while scrolling instead
   of disappearing with the rest of the page. WordPress wraps the header template
   part in its own <header class="wp-block-template-part">, which is only as tall as
   the header itself — position:sticky on the inner element has nowhere to stick, so
   the wrapper has to be the sticky one. The inner header's own background (set on the
   block) keeps it opaque over scrolling content. z-index sits above the shop
   sidebar's sticky z-index:2 but below the cookie banner's 9999; the admin-bar offset
   keeps it from sliding under the toolbar when a logged-in user has it showing. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* Header layout: a flex row with justify-content:space-between distributes the
   3 groups (brand / nav / utility) with equal GAPS, but since the nav block is
   much wider than the other two, that still lands it visually left-of-center —
   it reads as "bunched near the logo" rather than centered. A 3-column grid
   (edges auto-width, nav in a true center column) fixes that regardless of how
   wide the brand/utility groups are.
   The threshold matters: measured at full size, brand (224px) + nav's full
   8-item menu (608px) + utility (321px) + header's own 48px padding need
   ~1201px total to render without compromise. Below that, something has to
   give — and unlike the flex+wrap fallback (which properly drops a group to
   its own row when it doesn't fit), a fixed-column grid has no such escape:
   it can only shrink the "1fr" tracks, which crushed the utility column (the
   CTA button) down to a 46px sliver, wrapping "Ücretsiz Ön Görüşme" one
   character per line. 900px, the old threshold, sat right in the middle of
   that broken zone. Moved to 1360px — checked empirically across the whole
   900–1400px range: the CTA button still wrapped to two lines as late as
   1320px, only landing back on one line at 1340px, so 1360px leaves real
   margin rather than sitting right back on another knife-edge. Below this,
   the flex+wrap fallback carries the whole range down to the nav's own
   hamburger breakpoint (~910px) and beyond, confirmed clean at 700–899px. */
@media (min-width: 1360px) {
	.consultancy-header-grid {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.consultancy-header-brand {
		justify-self: start;
	}

	.consultancy-header-nav {
		justify-self: center;
	}

	.consultancy-header-utility {
		justify-self: end;
	}
}

/* Header nav: small letter-spaced caps with more breathing room between items,
   instead of default-weight text sitting close together. */
header.wp-block-group .wp-block-navigation-item__label {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

header.wp-block-group .wp-block-navigation {
	gap: 8px;
}

header.wp-block-group .wp-block-navigation-item {
	margin-right: 8px;
}

/* Client feedback (2026-09): menu items should change colour on hover, like
   the buttons do. */
header.wp-block-group .wp-block-navigation-item > a:hover {
	color: var(--wp--preset--color--olive);
}

/* Hero photo: a taller, more dynamic crop instead of the source photo's plain
   square, so it carries similar visual weight to the text column beside it. */
.consultancy-hero-photo img {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Soften the photo's boundary: fade it gently into the surrounding background
   instead of a hard rectangular cut, so the edge feels soft rather than sharp. */
.consultancy-hero-photo img {
	mask-image: radial-gradient(ellipse 85% 85% at center, black 40%, transparent 92%);
	-webkit-mask-image: radial-gradient(ellipse 85% 85% at center, black 40%, transparent 92%);
}

/* Recurring heading accent: a short underline bar beneath every H1/H2, tying every
   section header together as one system — including the hero, which otherwise reads
   as a visually disconnected "photo banner" bolted onto the rest of the page. */
.entry-content h1.wp-block-heading,
.entry-content h2.wp-block-heading {
	position: relative;
	padding-bottom: 16px;
}

.entry-content h1.wp-block-heading::after,
.entry-content h2.wp-block-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--terracotta);
}

.entry-content h1.wp-block-heading::after {
	width: 72px;
	height: 4px;
}

.entry-content h1.wp-block-heading.has-text-align-center::after,
.entry-content h2.wp-block-heading.has-text-align-center::after {
	left: 50%;
	transform: translateX(-50%);
}

/* The core Table block otherwise keeps plain black borders and square corners —
   a jarring "default browser table" look next to the rest of the page's soft,
   shadowed, rounded card language. Re-skin it into the same family. */
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.wp-block-table th,
.wp-block-table td {
	border: none;
	border-bottom: 1px solid rgba(46, 46, 43, 0.08);
	padding: 14px 20px;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: none;
}

.wp-block-table thead th {
	background-color: var(--wp--preset--color--warm-beige);
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-weight: 600;
	font-size: 1.05rem;
}

.wp-block-table tbody {
	background-color: var(--wp--preset--color--cream);
}

/* On narrow screens the comparison table is often wider than the viewport.
   It already scrolls horizontally (core's default .wp-block-table overflow),
   but nothing signalled that to the visitor — text just looked cut off at
   the edge. Tighten cell spacing so more fits without scrolling, and add a
   fade + hint so the remaining overflow reads as "swipe", not "broken". */
@media (max-width: 600px) {
	.wp-block-table th,
	.wp-block-table td {
		padding: 10px 14px;
		font-size: 0.9rem;
	}

	.wp-block-table {
		position: relative;
	}

	.wp-block-table::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 28px;
		background: linear-gradient(to right, transparent, var(--wp--preset--color--cream, #fff));
		pointer-events: none;
	}
}

/* Shared card language: give every "card" surface (packages, testimonials) the same
   shadow/radius/hover so they read as one family instead of flat coloured boxes. */
.consultancy-card {
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.consultancy-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

/* Cards with a closing CTA (package cards): stretch to equal height and pin the
   button to the bottom so CTAs line up across a row regardless of copy length. */
.consultancy-card {
	display: flex;
	flex-direction: column;
}

.consultancy-card-cta {
	margin-top: auto;
	padding-top: 8px;
}

/* The package cards are rendered as hand-authored PHP markup (not through the
   block editor's Columns block), so they never get core's automatic
   `is-layout-flex` gap class/inline style — without this they touch edge to
   edge, worst of all when they stack on mobile. Also bypasses core's
   .wp-block-columns single non-wrapping flex row (which would otherwise
   squeeze all 5 cards into one shrinking row instead of wrapping).
   Explicit column counts per breakpoint, not auto-fit: client feedback
   (2026-09) — auto-fit's minmax(240px,1fr) fit only 4 across at this card
   width/gap, dropping the 5th (now that there are 5 packages) onto its own
   half-empty row. Fixed counts also make the featured card's grid-column
   below reliable, which an auto-fit column count (varying with viewport)
   would not. */
/* Doubled with .wp-block-columns: when the cards are a real Columns block (the EN/SV
   home pages), core's `body .is-layout-flex { display: flex }` otherwise wins and
   squeezes all five into one row at any width. */
.wp-block-columns.consultancy-package-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 640px) {
	.wp-block-columns.consultancy-package-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.wp-block-columns.consultancy-package-columns {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.wp-block-columns.consultancy-package-columns {
		grid-template-columns: repeat(5, 1fr);
		/* Client feedback (2026-09): 5 equal columns inside the page's normal
		   1100px constrained width left each card only ~200px. Break out to the
		   theme's own wideSize (theme.json) at this breakpoint only. The home page's
		   cards are the owner's own markup (five of them, 2026-10). */
		max-width: 1400px;
		width: 100vw;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}

.consultancy-package-columns > .wp-block-column {
	flex: none;
}

/* Testimonials: the "devamını oku" clamp/expand toggle asked for in client
   feedback (2026-09) for longer quotes. Grid layout for the columns
   themselves (fixing the "too many testimonials broke the layout" bug) is
   defined further down, next to the pre-existing gap rule. */
.consultancy-testimonial-quote {
	/* ~5 lines at the base 1.05rem/1.6 line-height. First shipped at 3 lines
	   (4.8em), which clipped nearly every existing quote at the narrow card
	   widths the grid produces — the button showed up almost everywhere
	   instead of only for genuinely long quotes. 5 lines comfortably fits the
	   current 2-sentence quotes uncut while still clamping a much longer one. */
	max-height: 8em;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.consultancy-testimonial-quote.is-expanded {
	max-height: 999px;
}

.consultancy-testimonial-more {
	display: block;
	margin: 4px 0 12px;
	padding: 0;
	background: none;
	border: none;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--olive);
	cursor: pointer;
	text-decoration: underline;
}

.consultancy-testimonial-more:hover {
	color: var(--wp--preset--color--terracotta);
}

/* Dedicated contact page (client feedback, 2026-09): a back-to-home link, a
   WhatsApp quick-contact banner, info cards, and the contact form — replacing
   the header/hero "get a free consultation" CTAs, which previously jumped to
   Instagram or an on-page anchor. */
.consultancy-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--wp--preset--color--charcoal);
}

.consultancy-back-link:hover {
	color: var(--wp--preset--color--terracotta);
}

.consultancy-whatsapp-banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--wp--preset--color--warm-beige);
	border-radius: 10px;
	padding: 20px 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.15s ease;
}

/* The banner reads as a WhatsApp CTA but had no href at all (client feedback,
   2026-09: "whatsapp linki çalışmıyor") — a stretched link covering the whole
   card makes it clickable without restructuring the wp:group markup into an
   <a>, which would break the block editor's ability to recognise it. Margin:0
   keeps the <p> wrapper from adding its own default block spacing; position:
   absolute takes both the wrapper and the link out of the flex row entirely
   (per spec, an absolutely positioned flex item isn't part of flex layout). */
.consultancy-whatsapp-banner-link-wrap {
	margin: 0;
}

.consultancy-whatsapp-banner-link {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.consultancy-whatsapp-banner:has(.consultancy-whatsapp-banner-link:hover) {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Chevron: the only visual cue (besides cursor) that this whole card is a link,
   not just a status blurb — client feedback (2026-09) noted it didn't read as
   clickable. Sits at the row's trailing edge via margin-left:auto and nudges
   right on hover for a small "go" cue. */
.consultancy-whatsapp-chevron {
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--terracotta);
	transition: transform 0.15s ease;
}

.consultancy-whatsapp-banner:has(.consultancy-whatsapp-banner-link:hover) .consultancy-whatsapp-chevron {
	transform: translateX(3px);
}

.consultancy-whatsapp-banner .consultancy-whatsapp-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--olive);
	flex-shrink: 0;
}

.consultancy-contact-info-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background-color: var(--wp--preset--color--cream);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	padding: 16px 20px;
	margin-bottom: 12px;
}

.consultancy-contact-info-card .consultancy-contact-info-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--warm-beige);
	color: var(--wp--preset--color--terracotta);
	flex-shrink: 0;
}

/* Contact form: unstyled by default (it's hand-authored PHP markup from the
   plugin, not block editor content), so every field/label/button gets its
   spacing and the site's own type/colour language here. Card is warm-beige,
   one step darker than the page's own cream background (theme.json's global
   styles.color.background) — on cream-on-cream the card only read via its
   box-shadow, hard to see. See the field colours below for the matching fix. */
.consultancy-contact-form-wrap {
	background-color: var(--wp--preset--color--warm-beige);
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	padding: 28px;
}

.consultancy-contact-form p {
	margin-bottom: 16px;
}

.consultancy-contact-form label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 6px;
}

.consultancy-contact-form-optional {
	font-weight: 400;
	color: rgba(46, 46, 43, 0.55);
}

.consultancy-contact-form input[type="text"],
.consultancy-contact-form input[type="email"],
.consultancy-contact-form input[type="tel"],
.consultancy-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border: 1px solid rgba(46, 46, 43, 0.18);
	border-radius: 8px;
	background-color: var(--wp--preset--color--cream);
	box-shadow: inset 0 1px 2px rgba(46, 46, 43, 0.06);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease;
}

.consultancy-contact-form input:focus,
.consultancy-contact-form textarea:focus {
	border-color: var(--wp--preset--color--olive);
	outline: 2px solid var(--wp--preset--color--olive);
	outline-offset: 1px;
}

.consultancy-contact-form-submit {
	border: none;
	cursor: pointer;
	font-size: 1rem;
}

/* Honeypot field: visually and structurally hidden from sighted and
   screen-reader users alike, but still present in the DOM/tab order-excluded
   for a bot that fills every input it can find. */
.consultancy-contact-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.consultancy-contact-form-notice {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 16px;
	font-weight: 600;
}

.consultancy-contact-form-notice--success {
	background-color: rgba(111, 119, 91, 0.15);
	color: var(--wp--preset--color--olive);
}

.consultancy-contact-form-notice--error {
	background-color: rgba(201, 120, 82, 0.15);
	color: var(--wp--preset--color--terracotta);
}

/* Waitlist on a full package's page: the contact form's card; the consent line reads as
   body text next to its checkbox rather than as a bold field label. */
.consultant-flow-waitlist {
	margin-top: 24px;
}

.consultant-flow-waitlist__title {
	margin-top: 0;
	font-size: clamp(24px, 2.4vw, 28px);
}

.consultancy-contact-form .consultant-flow-waitlist__consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	line-height: 1.5;
}

.consultant-flow-waitlist__consent input {
	flex: none;
	margin-top: 4px;
}

/* Footer social icons. Client feedback (2026-09) asked for Instagram + YouTube;
   only Instagram has a known URL so far (used elsewhere on the site) — YouTube
   is added once the client provides their channel link, see project notes. */
.consultancy-social-links a {
	display: inline-flex;
	color: var(--wp--preset--color--charcoal);
	transition: color 0.2s ease, transform 0.2s ease;
}

.consultancy-social-links a:hover {
	color: var(--wp--preset--color--terracotta);
	transform: translateY(-2px);
}

/* Client feedback (2026-09): the contact line (email/WhatsApp under the final
   CTA) should be bigger, and the middle dot between the two should go —
   replaced with plain spacing instead of a visible separator character. */
.consultancy-contact-line {
	font-size: 1.05rem;
	font-weight: 500;
}

.consultancy-contact-sep {
	display: inline-block;
	width: 1.5em;
}

/* Package cards: a common pricing-table convention adapted for duration-based
   (rather than $-priced) tiers — a small duration pill instead of plain inline
   text, a thin divider before the CTA, and a full-width button so every card's
   action bar lines up as one continuous row across the grid. */
.consultancy-package-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 12px;
}

.consultancy-package-icon svg {
	width: 22px;
	height: 22px;
}

/* Illustrated package icons carry their own soft blob background, so the card
   shows them larger and without the small cream circle used for line icons. */
.consultancy-package-icon--image,
.consultancy-package-featured .consultancy-package-icon--image {
	width: 72px;
	height: 72px;
	background-color: transparent;
	border-radius: 0;
}

.consultancy-package-icon--image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Client feedback (2026-09): package card copy read as too vertical/cramped
   at 5-across. A touch smaller and tighter than the site's base body copy
   (already applied via the widened row above) keeps descriptions closer to
   2-3 lines instead of 5-6. */
.consultancy-package-columns .wp-block-column > p:not(.consultancy-package-duration):not(.consultancy-package-price) {
	font-size: 0.92rem;
	line-height: 1.45;
}

.consultancy-package-featured .consultancy-package-icon:not(.consultancy-package-icon--image) {
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--cream);
}

.consultancy-package-duration {
	display: inline-block;
	align-self: flex-start;
	background-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--cream);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

/* A single-session package (Soru-Cevap) has no duration to show — see
   class-package-cards-shortcode.php — but still renders this pill with
   "&nbsp;" so every card's title sits at the same height. Keep the size,
   drop the colour/background so it doesn't show as a blank olive bar. */
.consultancy-package-duration--empty {
	background-color: transparent;
	color: transparent;
}

/* Package price: client feedback (2026-09) asked for the price to show on the
   card itself rather than only after clicking through to the product page. */
.consultancy-package-price {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 4px;
}

.consultancy-package-price .woocommerce-Price-currencySymbol {
	font-size: 0.75em;
	font-weight: 600;
}

/* Approximate EUR conversion shown alongside the regular price for Eurozone
   visitors (see class-regional-pricing.php) — visually secondary since it's
   a computed estimate, not the real listed price. */
.consultancy-price-eur-approx {
	font-size: 0.7em;
	font-weight: 400;
	color: rgba(46, 46, 43, 0.6);
}

/* Client feedback (2026-09): the "emin değil misiniz?" comparison link read as
   too plain against the surrounding table. Bold + underline plus a hover
   colour swap gives it more visual weight without turning it into a full
   button, which would compete with the package cards' own CTAs right below. */
.consultancy-emin-degil-misiniz {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(201, 120, 82, 0.4);
	text-underline-offset: 3px;
}

.consultancy-emin-degil-misiniz:hover {
	color: var(--wp--preset--color--olive);
	text-decoration-color: currentColor;
}

/* Client feedback (2026-09): "süreci daha detaylı oku" should stand out more
   on hover — colour change plus a small type-size grow. */
.consultancy-detay-link {
	display: inline-block;
	transition: color 0.2s ease, font-size 0.2s ease;
}

.consultancy-detay-link:hover {
	color: var(--wp--preset--color--terracotta);
	font-size: 1.05em;
}

.consultancy-package-divider {
	border: none;
	border-top: 1px solid rgba(46, 46, 43, 0.12);
	margin: 16px 0;
}

.consultancy-card-cta .wp-block-button {
	width: 100%;
}

.consultancy-card-cta .wp-block-button__link {
	width: 100%;
	text-align: center;
	justify-content: center;
}

/* The featured package (WooCommerce's own "featured" star) comes first, with a
   coloured top edge and a "Popular" ribbon rendered by the package cards shortcode. */
.consultancy-package-featured {
	position: relative;
	border-top: 3px solid var(--wp--preset--color--terracotta);
}

.consultancy-package-badge {
	position: absolute;
	top: 0;
	right: 20px;
	transform: translateY(-50%);
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--cream);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: 999px;
}

/* Hero eyebrow label: small letter-spaced caps above the H1, the way an editorial
   hero signs its category before the headline. */
.consultancy-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 4px;
}

/* Hero trust row: small circular badge icons + small caps labels, left-aligned under the
   CTA buttons. */
.consultancy-trust-row {
	margin-top: 40px;
	gap: 24px;
}

.consultancy-trust-row .wp-block-column {
	flex: 0 0 auto;
}

/* Client-supplied circular icon set (2026-09) standing in for the trust row's earlier
   hand-drawn outline icons — pre-rendered on a transparent background, so no extra border
   or fill is needed here beyond sizing. */
.consultancy-trust-icon-image {
	width: 40px;
	height: 40px;
	margin: 0 auto 8px;
}

.consultancy-trust-icon-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.consultancy-trust-label {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
	margin: 0;
}

/* Numbered step badges (Süreç section): a small circle instead of a bare digit. */
.consultancy-step-num {
	width: 44px;
	height: 44px;
	margin: 0 auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.4rem;
	font-weight: 600;
}

/* FAQ: replace the bare browser <details> triangle with a styled, shadowed card that
   matches the same card language, plus a rotating custom marker. */
.wp-block-details {
	border-radius: 10px;
	background-color: var(--wp--preset--color--warm-beige);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	padding: 4px 24px;
	margin-bottom: 16px;
	transition: box-shadow 0.25s ease;
}

.wp-block-details:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.wp-block-details summary {
	padding: 16px 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

/* Client feedback (2026-09): clicking a question drew the browser's default
   black focus rectangle around it, and asked for the answer to read in the
   same colour as the question rather than default body text. A visible focus
   state stays for keyboard users, just not the harsh default outline. */
.wp-block-details summary:focus {
	outline: none;
}

.wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--olive);
	outline-offset: 4px;
	border-radius: 4px;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	float: right;
	font-size: 1.3em;
	line-height: 1;
	color: var(--wp--preset--color--terracotta);
	transition: transform 0.25s ease;
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > :not(summary) {
	padding-bottom: 20px;
	/* Client feedback (2026-09): the answer should read in the same colour as
	   the question, not the default charcoal body text. */
	color: var(--wp--preset--color--charcoal);
}

/* The language-switcher <select> otherwise keeps the browser's native white box —
   a stark white rectangle sitting on the hero photo (or anywhere else on the warm
   palette). Re-skin it to match the outline-button language (transparent fill,
   thin dark border) instead of leaving it unstyled. */
.pll-switcher-select,
.wp-block-polylang-language-switcher select {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	border: 1.5px solid var(--wp--preset--color--charcoal);
	border-radius: 6px;
	padding: 6px 28px 6px 12px;
	color: var(--wp--preset--color--charcoal);
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232E2E2B'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 14px;
}

/* Same problem, same fix, for every other native <select> WooCommerce prints on the
   front end that isn't already covered by a more specific rule elsewhere (cart/checkout
   inputs have their own wc-block-components-* rules) — the shop archive's "sort by"
   dropdown chief among them, still the browser's stark default white box otherwise. */
.woocommerce-ordering select,
.wc-block-catalog-sorting select,
.woocommerce select:not(.wc-blocks-components-select__select) {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--wp--preset--color--cream);
	border: 1.5px solid rgba(46, 46, 43, 0.2);
	border-radius: 6px;
	padding: 8px 32px 8px 14px;
	color: var(--wp--preset--color--charcoal);
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232E2E2B'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px;
}

.woocommerce-ordering select:focus,
.wc-block-catalog-sorting select:focus,
.woocommerce select:focus {
	border-color: var(--wp--preset--color--terracotta);
	outline: none;
}

/* The core Navigation block only switches to its hamburger overlay below 600px,
   but our header (logo + 6 links + language switcher + CTA button, all inline) runs
   out of room well before that — the CTA button was wrapping onto its own orphan
   line at tablet/small-laptop widths. Force the hamburger earlier instead. */
@media (max-width: 900px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* Give the language-switcher + CTA pair their own full-width row instead of
	   floating in the middle of the header — logo + hamburger stay on the first
	   line, this pair gets a clean second line, centered. */
	header.wp-block-group .consultancy-header-utility {
		flex-basis: 100%;
		justify-content: center;
		margin-top: 12px;
	}
}

/* A fixed pixel height on the hero cover, combined with object-fit:cover on a
   (near-)square photo, crops MORE of the image the WIDER the viewport gets — a
   wider box needs more upscaling to cover its width, which pushes proportionally
   more of the image's height out of frame, cropping into the subjects' faces on
   wide screens even though the same fixed height looked fine on a laptop. An
   aspect-ratio keeps height proportional to width instead, so the same fraction
   of the photo stays visible at any viewport width. min/max-height only guard the
   extremes (very narrow phones, very wide monitors). */
.consultancy-hero-cover {
	aspect-ratio: 1.85 / 1;
	min-height: 600px;
	max-height: 900px;
}

/* Buttons: a small lift on hover so every call-to-action feels responsive, on top of
   the background-colour swap theme.json already defines. */
.wp-block-button__link {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Client feedback (2026-09): every button on the site should read as either the
   orange (terracotta) primary action or the green (olive) secondary one — never
   a neutral outline. "Paketleri İnceleyin" and the other is-style-outline CTAs
   (previously a plain bordered/transparent button) become solid olive, subtle
   at rest and filling in further on hover — the same weight-shift pattern the
   terracotta buttons already had. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--olive);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--charcoal);
}

/* ==========================================================================
   E-commerce sub-flows (single product, cart, checkout) and 404.
   These pages come from WooCommerce's own bundled block templates (or
   Twenty Twenty-Four's), styled only by core/global defaults out of the box —
   next to the rest of the site's warm, card-based language they read as bare
   "generic WordPress/WooCommerce". Re-skin every one so no page in the visitor
   journey drops back to the default look.
   ========================================================================== */

/* Single product: wrap gallery + summary in the same card language as
   package cards, replace the plain emoji zoom trigger, calm the breadcrumb. */
/* A blanket opacity on the whole nav (previous approach) dimmed the link
   along with the trail text, leaving both looking washed out — a permanent
   underline on top of that read as plain/dated rather than refined. Mute
   only the trail text (the "/" separator and current page, neither of
   which are interactive) directly, keep the link at full brand strength
   with no resting underline — closer to how Trendyol/Hepsiburada-style
   breadcrumbs read: a quiet trail, one confident, unmistakably clickable
   step back. */
.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: rgba(46, 46, 43, 0.55);
	letter-spacing: 0.01em;
	margin-bottom: 24px;
}

.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--terracotta);
	font-weight: 500;
	text-decoration: none;
}

/* theme.json defines olive-no-underline as the sitewide link hover, but the
   breadcrumb sets its own resting color above, which blocks inheriting that
   global style — matched by hand, plus an underline-on-hover since the link
   has none at rest now. */
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--olive);
	text-decoration: underline;
	text-decoration-color: rgba(90, 107, 74, 0.4);
	text-underline-offset: 2px;
}

.wp-block-woocommerce-product-image-gallery {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.woocommerce-product-gallery__trigger {
	background-color: var(--wp--preset--color--cream);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 16px;
	right: 16px;
}

div.product .summary .price {
	color: var(--wp--preset--color--terracotta);
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.8rem;
}

div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid rgba(46, 46, 43, 0.12);
	padding-left: 0;
}

div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: none;
	margin-right: 8px;
}

div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--wp--preset--color--terracotta);
}

div.product .woocommerce-tabs ul.tabs li a {
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.1rem;
}

/* Cart + Checkout (WooCommerce Blocks): these ship their own component
   classes (wc-block-components-*), untouched by theme.json defaults, so
   every input/panel/button needs an explicit rule to pick up the palette. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var(--wp--preset--font-family--montserrat);
}

.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-panel .wc-block-components-panel__button {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-cart-items,
.wc-block-components-checkout-order-summary,
.wc-block-components-totals-wrapper {
	background-color: var(--wp--preset--color--cream);
	border-radius: 14px;
	padding: 20px 24px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.wc-block-cart-items {
	background: none;
	box-shadow: none;
	padding: 0;
}

.wc-block-cart-item {
	background-color: var(--wp--preset--color--cream);
	border-radius: 14px;
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
	border: none !important;
}

.wc-block-components-text-input input,
.wc-block-components-text-input.is-active input,
.wc-blocks-components-select select,
.wc-block-components-address-form select {
	border-radius: 8px !important;
	border-color: rgba(46, 46, 43, 0.2) !important;
	background-color: var(--wp--preset--color--cream);
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select select:focus {
	border-color: var(--wp--preset--color--terracotta) !important;
	box-shadow: 0 0 0 1px var(--wp--preset--color--terracotta) !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select label {
	color: var(--wp--preset--color--charcoal) !important;
}

.wc-block-components-button,
.wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--terracotta) !important;
	color: var(--wp--preset--color--cream) !important;
	border-radius: 6px !important;
	font-family: var(--wp--preset--font-family--montserrat) !important;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.85rem !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--terracotta);
	font-weight: 700;
}

/* The distraction-free checkout header (WooCommerce's own minimal template
   part, no main nav — an intentional pattern to reduce exit points during
   payment) still needs the site's own type/colour so it reads as the same
   brand, not a generic Woo default. */
/* Scoped to the checkout page specifically (body.woocommerce-checkout) — an earlier,
   unscoped version of this selector matched .wp-block-group.has-global-padding inside
   ANY template part, which put an unwanted warm-beige patch behind the site's own
   header/footer content wherever a nested group happened to get that core-added class. */
body.woocommerce-checkout .wp-block-template-part .wp-block-group.has-global-padding {
	background-color: var(--wp--preset--color--warm-beige);
	padding-top: 16px;
	padding-bottom: 16px;
}

.wc-block-cart-link svg,
.wc-block-mini-cart__button svg {
	color: var(--wp--preset--color--terracotta);
}

/* 404: match the site's centred, editorial-quiet language instead of the
   bare default heading + search field. */
.error404 main {
	text-align: center;
	padding-top: 64px;
	padding-bottom: 96px;
}

.error404 main .wp-block-search__input {
	border-radius: 8px;
	border-color: rgba(46, 46, 43, 0.2);
}

.error404 main .wp-block-search__button {
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--cream);
	border-radius: 6px;
}

.error404 main form.wp-block-search {
	justify-content: center;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* The default link colour (terracotta) is tuned for the site's light cream/warm-beige
   backgrounds — on a dark olive section (e.g. the closing CTA band) it reads as a dim,
   low-contrast orange. Any link sitting directly on olive gets a light, readable colour
   instead, with an underline so it stays visually a link rather than plain emphasis. */
.has-olive-background-color a:not(.wp-element-button) {
	color: var(--wp--preset--color--cream);
	text-decoration: underline;
}

.has-olive-background-color a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--warm-beige);
}

/* WooCommerce's product review form is WordPress's classic #respond/#commentform
   markup (not the core/post-comments-form block single.html uses for blog comments,
   which already gets rounded inputs from theme.json) — a completely separate template
   with its own plain, unstyled default text inputs/textarea. Bring it in line. */
#review_form #respond input[type="text"],
#review_form #respond input[type="email"],
#review_form #respond input[type="url"],
#review_form #respond textarea {
	border-radius: 6px;
	border: 1px solid rgba(46, 46, 43, 0.25);
	padding: 8px 12px;
	font-family: inherit;
	background-color: var(--wp--preset--color--cream);
}

#review_form #respond input[type="text"]:focus,
#review_form #respond input[type="email"]:focus,
#review_form #respond input[type="url"]:focus,
#review_form #respond textarea:focus {
	border-color: var(--wp--preset--color--terracotta);
	outline: none;
	box-shadow: 0 0 0 1px var(--wp--preset--color--terracotta);
}

#review_form #respond .stars a {
	color: var(--wp--preset--color--terracotta);
}

/* Testimonial cards were plain wp:columns with no gap class (same gap-less issue
   package cards had before .consultancy-package-columns was introduced) — they sat
   edge to edge, worst on mobile where they stack directly on top of each other.
   Bug found in client feedback (2026-09): core's .wp-block-columns is a single
   non-wrapping flex row above the 781px mobile-stack breakpoint, sized only for
   a small, fixed number of columns. [consultant_flow_testimonials] renders one
   column per published testimonial with no upper limit, so once a handful more
   were added, every card in that one endless row got squeezed to a sliver.
   Grid with auto-fit lets cards wrap onto as many rows as needed at a readable
   minimum width, at any testimonial count — and neutralizes core's per-column
   flex-grow, which would otherwise fight the grid track sizing. */
.consultancy-testimonial-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}

.consultancy-testimonial-columns > .wp-block-column {
	flex: none;
}

/* "Hakkımda" bio photo: a portrait crop so it holds its own next to the text column,
   same treatment family as the hero photo (cover + rounded corners). */
.consultancy-about-photo img {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* The ICF trust badge is a real accreditation-mark image, sized slightly larger than its
   siblings in the trust row to match its visual weight. */
.consultancy-trust-icon-badge {
	width: 48px;
	height: 48px;
	margin: 0 auto 8px;
	border-radius: 8px;
	overflow: hidden;
}

.consultancy-trust-icon-badge img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Cookie-consent banner: fixed to the bottom, above everything else, using the
   theme's own card language (cream card, radius/shadow) rather than a bare
   browser alert or a harsh black bar. */
.consultancy-cookie-banner {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 640px;
	margin: 0 auto;
	padding: 18px 22px;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	border: 1px solid rgba(46, 46, 43, 0.12);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(46, 46, 43, 0.16);
	font-size: 0.9rem;
}

/* The `hidden` attribute alone can't win against the display:flex above — the UA
   stylesheet's [hidden]{display:none} loses to any author rule. Without this the
   banner stayed visible after "Accept" (and showed before the script decided). */
.consultancy-cookie-banner[hidden] {
	display: none;
}

/* One notice at a time: fx8 Lingua's "also available in …" box sits in the same spot and
   used to cover the Accept button, so a visitor whose browser is not in Turkish could not
   accept. It waits until the cookie notice is answered. */
body:has(.consultancy-cookie-banner:not([hidden])) .fx8-lingua-suggest {
	display: none;
}

.consultancy-cookie-banner__text {
	margin: 0;
	flex: 1 1 260px;
}

.consultancy-cookie-banner__text a {
	color: var(--wp--preset--color--terracotta);
	text-decoration: underline;
}

.consultancy-cookie-banner__accept {
	flex: 0 0 auto;
	background-color: var(--wp--preset--color--terracotta) !important;
	color: var(--wp--preset--color--cream) !important;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-weight: 600;
	cursor: pointer;
}

.consultancy-cookie-banner__accept:hover {
	background-color: var(--wp--preset--color--olive) !important;
}

/* Results-count + sort-dropdown row: was authored with flexWrap:"nowrap" in
   the template (fixed there — this is the fallback, not the fix). On a
   narrow phone the "Varsayılan Sıralama" <select> keeps most of its natural
   width, squeezing the count text into a sliver; combined with core's
   overflow-wrap: break-word this fragmented "5 sonucun tümü gösteriliyor"
   into one character per line. Even with wrapping now allowed, keep the
   count text safe from ever being squeezed narrower than its own words. */
.consultancy-shop-main > .wp-block-group {
	row-gap: 10px;
}

.wc-block-product-results-count {
	overflow-wrap: normal;
	word-break: normal;
	min-width: max-content;
}

/* Same blockGap/default-margin seam as the two fixes at the top of this file
   (.entry-content > .wp-block-group and .wp-site-blocks > header/main/footer),
   recurring here because archive-product.html's <main> isn't wrapped in
   .entry-content — WooCommerce archive templates render straight into <main>.
   Left unfixed, the theme's 1.2rem blockGap (see theme.json styles.spacing.blockGap)
   plus core's own ~1.75em default Columns-block margin compound across every
   nesting level (breadcrumbs → title → columns → sidebar/results → count row →
   product grid), which is what turned a 5-product page into ~5000px of mostly
   blank cream-on-cream space. */
/* The header template part has its own background colour, and this <main>
   sits flush against it with zero gap — the breadcrumb (its first child)
   starts at the exact pixel row where that background ends, so the text
   visually begins right on the colour seam instead of clearly inside the
   page below it. Give the whole shop page some breathing room from that
   edge, independent of the blockGap reset below. */
.consultancy-shop-main {
	padding-top: 2rem;
}

.consultancy-shop-main > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.consultancy-shop-main > * + * {
	margin-top: 1.2rem !important;
}

/* At least one shop product's image is genuinely broken server-side (traced via
   Playwright/CDP: naturalWidth/naturalHeight both 0 despite the <img> reporting
   complete=true — a 404 or corrupt file, not a caching or CSS issue). Broken,
   the image has no intrinsic ratio for the browser to size against, WooCommerce's
   own `height:auto` and inline `aspect-ratio:1/1` both fail to produce a sane
   box, and percentage-height overrides (height:100%) don't help either since
   they resolve against this container's own auto height — a circular case
   percentages can't escape. A fixed pixel cap sidesteps that circularity
   entirely and keeps a broken image from blowing out the whole grid row,
   which is what actually happened (1500px tall at a 443px-wide column). This
   is a safety net, not a fix for the missing image itself — see the product's
   real photo being a separate, outstanding content gap. */
.wc-block-components-product-image--aspect-ratio-1-1 {
	aspect-ratio: 1 / 1;
	max-height: 320px;
	/* The aspect-ratio + max-height combination above gives this div a fixed
	   320px width, but it's still a left-anchored block inside its (wider)
	   grid column — nothing centers it. The title below it IS centered
	   across the full column, so the two visual centers disagreed by ~100px+,
	   reading as "shifted" titles. Confirmed via getBoundingClientRect: image
	   center at column-left+160, title center at column-center. */
	margin-left: auto;
	margin-right: auto;
}

.wc-block-components-product-image--aspect-ratio-1-1 img {
	width: 100% !important;
	height: 100% !important;
	max-height: 320px !important;
	object-fit: cover;
}

/* The overlay's own "Kapat" close control had no button treatment at all —
   transparent background, no border, tiny inherited text size — just a
   floating word + icon with no visual weight in the corner of the drawer.
   Give it the same circular icon-button language as the search submit
   button. The "Kapat" label stays for screen readers, visually hidden the
   same way .screen-reader-text does (an icon-only close is a standard,
   understood pattern and matches the more compact, app-like toolbar above). */
.wc-block-product-filters__close-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: var(--wp--preset--color--warm-beige);
	color: var(--wp--preset--color--charcoal);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wc-block-product-filters__close-overlay:hover {
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--cream);
}

.wc-block-product-filters__close-overlay span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wc-block-product-filters__close-overlay svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* ==========================================================================
   Shop filters: full visual pass. The card wrapper (background/radius/shadow)
   was already on-brand; everything INSIDE it was still rendering with
   WooCommerce/browser defaults, for three separate reasons found by
   comparing computed styles against WooCommerce's own source CSS rather than
   guessing:
   1. WordPress's standard `.screen-reader-text` utility class is not defined
      anywhere in this theme. The "Kategori" legend uses that exact class,
      intending to be invisible (the checkbox list speaks for itself) — with
      the class doing nothing, it rendered as plain 20px body text instead.
   2. The price filter's own heading ("Fiyat Aralığı") is never rendered as
      an element at all — only as a `data-heading` attribute, presumably for
      exactly this use case (CSS-generated content).
   3. WooCommerce's own stylesheet for the ₺ text inputs targets
      `.wc-block-product-filter-price-slider .text input[type=text]` — a
      class name (`wc-block-product-filter-price-slider`, no `wp-block-`
      prefix) that does not exist anywhere in the actual rendered markup
      here (only `wp-block-woocommerce-product-filter-price-slider` does).
      That rule silently never matches, so the inputs kept zero border/
      padding/background — not a caching issue, a genuine selector/markup
      mismatch in this WooCommerce version.
   ========================================================================== */

/* (1) Restore the standard WP utility globally — a real gap independent of
   the shop page, anything else relying on it was equally broken. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* My Account: WooCommerce prints its navigation as a plain vertical link list above
   the content, which on a phone pushes the client's program a full screen down.
   Mobile: one horizontally scrollable row of pills. Desktop: a quiet sidebar. */
.woocommerce-account.logged-in .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.woocommerce-account.logged-in .woocommerce > * {
	/* The page template is a constrained layout, which centres and narrows every
	   direct child (with !important margins) — that put the menu mid-page and the
	   content in a sliver. The two columns are laid out by the grid instead. */
	max-width: none !important;
	width: auto;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 0;
	min-width: 0;
}

.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
	/* WooCommerce's stock stylesheet floats the menu left and the content right at
	   fixed percentages — inside our grid that flipped the two columns. */
	float: none !important;
	width: auto !important;
}

.woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0 0 4px;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
	display: none;
}

.woocommerce-MyAccount-navigation li {
	flex: none;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	padding: 8px 14px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--warm-beige);
	color: var(--wp--preset--color--charcoal);
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

.woocommerce-MyAccount-navigation .is-active a {
	background-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--cream);
}

@media (min-width: 900px) {
	.woocommerce-account.logged-in .woocommerce {
		grid-template-columns: 220px minmax(0, 1fr);
		align-items: start;
		gap: 40px;
	}

	.woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 1;
	}

	.woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		overflow: visible;
		position: sticky;
		top: 120px;
	}

	.woocommerce-MyAccount-navigation a {
		border-radius: 10px;
		background-color: transparent;
	}

	.woocommerce-MyAccount-navigation a:hover {
		background-color: var(--wp--preset--color--warm-beige);
	}
}

.woocommerce-MyAccount-navigation a,
.woocommerce-MyAccount-navigation a[aria-current] {
	text-decoration: none;
}

/* Header sign-in / account link: a round badge (same height as the CTA button beside
   it) that reads as a deliberate control rather than a loose icon; the label appears
   next to it only when there is room. */
.consultancy-account-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--olive);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.consultancy-account-link:hover {
	background-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--cream);
}

.consultancy-account-link.is-logged-in {
	background-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--cream);
}

.consultancy-account-link.is-logged-in:hover {
	background-color: var(--wp--preset--color--terracotta);
}

.consultancy-header-utility .wp-block-shortcode {
	margin: 0;
}

@media (min-width: 1500px) {
	.consultancy-account-link {
		padding: 0 16px 0 12px;
	}
}

@media (max-width: 1499px) {
	.consultancy-account-link__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.consultancy-header-utility .wp-block-button__link {
	white-space: nowrap;
}

/* Compact sticky header: as soon as the page scrolls, the logo and padding shrink and,
   on phones, the wrapped second row (CTA + account) folds away, so the pinned header
   takes a fraction of the screen instead of a quarter of it. */
.wp-site-blocks > header.wp-block-template-part .consultancy-header-grid,
.wp-site-blocks > header.wp-block-template-part .wp-block-site-logo img,
.consultancy-header-utility {
	transition: padding 0.2s ease, width 0.2s ease, max-height 0.2s ease, opacity 0.2s ease;
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled .consultancy-header-grid {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}

.wp-site-blocks > header.wp-block-template-part.is-scrolled .wp-block-site-logo img {
	width: 96px !important;
	height: auto !important;
}

@media (max-width: 1359px) {
	.consultancy-header-utility {
		max-height: 60px;
		overflow: hidden;
	}

	.wp-site-blocks > header.wp-block-template-part.is-scrolled .consultancy-header-utility {
		max-height: 0;
		opacity: 0;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part .consultancy-header-grid,
	.wp-site-blocks > header.wp-block-template-part .wp-block-site-logo img,
	.consultancy-header-utility {
		transition: none;
	}
}

/* Without this, shrinking the header makes the browser "anchor" the content by scrolling
   up by the height that was lost — which drops scrollY back to 0, un-shrinks the header,
   and the two flip-flop at the top of the page. */
html {
	overflow-anchor: none;
}

/* Account dropdown + pending-task badge */
.consultancy-account {
	position: relative;
	display: flex;
	align-items: center;
	height: 44px;
}

.consultancy-account > br,
.consultancy-account > p:empty {
	display: none;
}

.consultancy-account-link {
	position: relative;
}

.consultancy-account-link__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 999px;
	background-color: var(--wp--preset--color--terracotta);
	color: #fff;
	border: 2px solid var(--wp--preset--color--warm-beige);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.consultancy-account-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 110;
	min-width: 220px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Invisible bridge so the menu doesn't close while the pointer crosses the gap. */
.consultancy-account.has-menu::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height: 10px;
}

.consultancy-account-menu li {
	margin: 0;
}

.consultancy-account-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
}

.consultancy-account-menu a:hover,
.consultancy-account-menu a:focus-visible {
	background-color: var(--wp--preset--color--warm-beige);
}

.consultancy-account-menu .is-customer-logout {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.consultancy-account-menu__count {
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--terracotta);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.consultancy-account.has-menu:hover .consultancy-account-menu,
.consultancy-account.has-menu:focus-within .consultancy-account-menu,
.consultancy-account.has-menu.is-open .consultancy-account-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Blog category pills */
.consultancy-category-nav { margin-top: 1.5rem; margin-bottom: 2.5rem; }
.consultancy-category-nav ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.consultancy-category-nav li { margin: 0; }
.consultancy-category-nav__link {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--charcoal);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.consultancy-category-nav__link:hover { border-color: var(--wp--preset--color--olive); color: var(--wp--preset--color--olive); }
.consultancy-category-nav__link.is-active,
.consultancy-category-nav__link.is-active:hover { background-color: var(--wp--preset--color--olive); border-color: var(--wp--preset--color--olive); color: var(--wp--preset--color--cream); }
@media (max-width: 600px) {
	.consultancy-category-nav ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
	.consultancy-category-nav ul::-webkit-scrollbar { display: none; }
}

/* Footer credit line */
footer .consultancy-footer-credit { flex-basis: 100%; width: 100%; }
.consultancy-footer-credit { margin: 8px 0 0; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.08); font-size: 0.8rem; color: var(--wp--preset--color--olive); text-align: center; }
.consultancy-footer-credit a { color: inherit; font-weight: 600; text-decoration: none; }
.consultancy-footer-credit a:hover { text-decoration: underline; }

/* Testimonials as a horizontally scrolling row: every quote in full, no "read more". */
.consultancy-testimonial-carousel { position: relative; }
.consultancy-testimonial-carousel .consultancy-testimonial-columns {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(360px, 85%);
	grid-template-columns: none;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 4px;
	padding: 4px 4px 12px;
	scrollbar-width: none;
}
.consultancy-testimonial-carousel .consultancy-testimonial-columns::-webkit-scrollbar { display: none; }
.consultancy-testimonial-carousel .consultancy-testimonial-columns > .wp-block-column { scroll-snap-align: start; margin: 0; }
.consultancy-testimonial-carousel .consultancy-testimonial-quote { max-height: none; overflow: visible; }
.consultancy-testimonial-nav { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.consultancy-testimonial-nav button {
	width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--olive);
	font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.consultancy-testimonial-nav button:hover:not(:disabled) { background: var(--wp--preset--color--olive); color: var(--wp--preset--color--cream); }
.consultancy-testimonial-nav button:disabled { opacity: 0.35; cursor: default; }
.consultancy-testimonial-carousel.is-static .consultancy-testimonial-nav { display: none; }

/* Blog post template (owner's list, 2026-10): cover, category label, title and text
   share one centred 760px column (layout set in templates/single.html). */
.single-post .consultancy-post-cover {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.single-post .consultancy-post-cover img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

@media (max-width: 781px) {
	.single-post .consultancy-post-cover {
		max-width: 100%;
	}
}

.consultancy-post-category {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

.consultancy-post-category a {
	color: var(--wp--preset--color--terracotta);
	text-decoration: none;
}

.consultancy-post-category a:hover {
	text-decoration: underline;
}

/* Previous / next post as two cards, side by side; stacked on phones. */
.consultancy-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding: var(--wp--preset--spacing--40) 0;
}

.consultancy-post-nav > * {
	margin: 0 !important;
}

.consultancy-post-nav__item--next {
	grid-column: 2;
	text-align: right;
}

.consultancy-post-nav__item a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	box-sizing: border-box;
	padding: 18px 22px;
	background-color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--warm-beige);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.consultancy-post-nav__item a:hover {
	border-color: var(--wp--preset--color--terracotta);
}

.consultancy-post-nav .post-navigation-link__label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

.consultancy-post-nav .post-navigation-link__title {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 20px;
	line-height: 1.3;
	color: var(--wp--preset--color--olive);
}

@media (max-width: 640px) {
	.consultancy-post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.consultancy-post-nav__item--next {
		grid-column: auto;
	}
}

/* An open FAQ question in a post gets the same terracotta edge as the "Kısa cevap" box.
   !important because the owner styles each card's border inline in the post. */
.single-post .wp-block-details[open] {
	border-left: 4px solid var(--wp--preset--color--terracotta) !important;
}

/* Blog and category pages (owner's list, 2026-10): equal-height post cards, three
   across on desktop, two on tablets, one on phones; numbered pagination below. */
.consultancy-post-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1023px) {
	.consultancy-post-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.consultancy-post-cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

.consultancy-post-cards > li {
	display: flex;
	margin: 0 !important;
}

.consultancy-post-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	border: 1px solid var(--wp--preset--color--warm-beige);
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.consultancy-post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(46, 46, 43, 0.08);
}

.consultancy-post-card > * {
	margin: 0 !important;
}

.consultancy-post-card__image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.consultancy-post-card__body {
	padding: 20px 22px 0;
	flex: 1;
}

.consultancy-post-card__body > * {
	margin-top: 0 !important;
	margin-bottom: 10px !important;
}

.consultancy-post-card__category {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.consultancy-post-card__category a {
	color: var(--wp--preset--color--terracotta);
	text-decoration: none;
}

.consultancy-post-card__title {
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 26px;
	line-height: 1.2;
}

.consultancy-post-card__title a {
	color: var(--wp--preset--color--olive);
	text-decoration: none;
}

@media (max-width: 639px) {
	.consultancy-post-card__title {
		font-size: 24px;
	}
}

.consultancy-post-card__excerpt p {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--charcoal);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.consultancy-post-card__footer {
	align-items: center;
	gap: 12px;
	margin: 16px 22px 0 !important;
	padding: 14px 0 18px;
	border-top: 1px solid var(--wp--preset--color--warm-beige);
	font-size: 14px;
}

.consultancy-reading-time {
	color: #8a8a85;
}

.consultancy-post-card__more {
	color: var(--wp--preset--color--terracotta);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.consultancy-post-card__more:hover {
	text-decoration: underline;
}

.consultancy-pagination {
	margin-top: var(--wp--preset--spacing--50) !important;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 15px;
}

.consultancy-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 8px;
	align-items: center;
}

.consultancy-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--warm-beige);
	color: var(--wp--preset--color--olive);
	text-decoration: none;
	box-sizing: border-box;
}

.consultancy-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--olive);
	border-color: var(--wp--preset--color--olive);
	color: #fff;
}

.consultancy-pagination .page-numbers.dots {
	border: 0;
	min-width: 0;
}

.consultancy-pagination .wp-block-query-pagination-previous,
.consultancy-pagination .wp-block-query-pagination-next {
	color: var(--wp--preset--color--terracotta);
	font-weight: 600;
	text-decoration: none;
}

/* Owner's list item 15 (2026-10): clicking or tapping a button left a dark ring and turned
   it olive (and it stayed after coming back from a new tab). Focus now shows only when it
   helps — keyboard navigation — as an olive ring; a click changes nothing. */
.wp-site-blocks *:focus:not(:focus-visible) {
	outline: none;
}

.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible,
.wp-site-blocks .wp-element-button:focus-visible,
.wp-site-blocks .wp-block-button__link:focus-visible,
.wp-site-blocks summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--olive);
	outline-offset: 2px;
}

/* Owner's list item 17 (2026-10): a small TR · EN · SV switcher left of the CTA on
   desktop only — the phone header stays exactly as it was. */
.consultancy-header-utility .fx8-lingua-switcher {
	display: none;
}

@media (min-width: 1024px) {
	.consultancy-header-utility .fx8-lingua-switcher {
		display: block;
	}
}

.consultancy-header-utility .fx8-lingua-switcher__list {
	gap: 0;
	align-items: center;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.consultancy-header-utility .fx8-lingua-switcher__item + .fx8-lingua-switcher__item::before {
	content: "·";
	margin: 0 0.5em;
	color: var(--wp--preset--color--olive);
}

.consultancy-header-utility .fx8-lingua-switcher a {
	color: var(--wp--preset--color--olive);
	text-decoration: none;
}

.consultancy-header-utility .fx8-lingua-switcher .is-current a {
	color: var(--wp--preset--color--terracotta);
	font-weight: 700;
}

/* With ANASAYFA gone the logo is the way home, so it stays above the open phone
   menu instead of disappearing under the overlay. */
header:has(.wp-block-navigation__responsive-container.is-menu-open) .consultancy-header-brand {
	position: relative;
	z-index: 100001;
}

header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 140px;
}

/* Owner's list item 18 (2026-10): brand column + three link columns, then a thin rule
   with the copyright line and the languages as plain text. On phones the columns stack
   and every link stays visible (the navigation blocks never collapse into ≡). */
.consultancy-footer {
	border-top: 2px solid var(--wp--preset--color--olive);
}

.consultancy-footer-main {
	display: grid;
	/* Contact gets the wider share: the e-mail address is one long word. */
	grid-template-columns: minmax(6.5em, 1fr) minmax(0, 2fr);
	gap: 32px 20px;
}

/* Phones (the owner's mockup): brand on top, Pages and Contact side by side, Legal
   below, copyright and languages centred. */
@media (max-width: 781px) {
	.consultancy-footer-brand,
	.consultancy-footer-column:last-child {
		grid-column: 1 / -1;
	}

	.consultancy-footer-column .wp-block-navigation {
		font-size: 0.85rem;
	}

	.consultancy-footer-bottom {
		flex-direction: column;
		justify-content: center !important;
		text-align: center;
	}
}

@media (min-width: 782px) {
	.consultancy-footer-main {
		grid-template-columns: 1.6fr 1fr 1.3fr 1fr;
		gap: 40px;
	}
}

.consultancy-footer-main > * {
	margin-block: 0 !important;
}

.consultancy-footer-brand > * + * {
	margin-top: 16px;
}

.consultancy-footer-slogan {
	max-width: 300px;
	font-family: var(--wp--preset--font-family--cormorant-garamond);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--wp--preset--color--olive);
}

.consultancy-footer .consultancy-social-links p {
	display: flex;
	gap: 10px;
	margin: 0;
}

.consultancy-footer .consultancy-social-links a {
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--olive);
	color: var(--wp--preset--color--cream);
}

.consultancy-footer .consultancy-social-links a:hover {
	color: var(--wp--preset--color--cream);
	background-color: var(--wp--preset--color--terracotta);
}

.consultancy-footer-heading {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

.consultancy-footer-column .wp-block-navigation {
	gap: 10px;
	font-size: 0.95rem;
}

/* Core sets the item links to color:inherit with a doubled class, so colours go on the
   items and the links inherit them. */
.consultancy-footer-column .wp-block-navigation {
	color: var(--wp--preset--color--charcoal);
}

.consultancy-footer-column .wp-block-navigation,
.consultancy-footer-column .wp-block-navigation__container,
.consultancy-footer-column .wp-block-navigation-item {
	min-width: 0;
	max-width: 100%;
}

.consultancy-footer-column .wp-block-navigation a {
	min-width: 0;
	text-decoration: none;
}

.consultancy-footer-column .wp-block-navigation-item__label {
	overflow-wrap: anywhere;
}

.consultancy-footer-column .wp-block-navigation a:hover {
	color: var(--wp--preset--color--terracotta);
}

.consultancy-footer-column .consultancy-footer-cta {
	color: var(--wp--preset--color--terracotta);
}

.consultancy-footer-column .consultancy-footer-cta a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.consultancy-footer-bottom {
	margin-top: 40px !important;
	padding-top: 20px;
	border-top: 1px solid rgba(46, 46, 43, 0.12);
	gap: 12px 24px;
	font-size: 0.85rem;
}

.consultancy-footer-bottom .consultancy-copyright {
	margin: 0;
}

.consultancy-footer-bottom .fx8-lingua-switcher__list {
	gap: 0;
}

.consultancy-footer-bottom .fx8-lingua-switcher__item + .fx8-lingua-switcher__item::before {
	content: "·";
	margin: 0 0.5em;
	color: var(--wp--preset--color--olive);
}

.consultancy-footer-bottom .fx8-lingua-switcher a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
}

.consultancy-footer-bottom .fx8-lingua-switcher .is-current a {
	color: var(--wp--preset--color--terracotta);
	font-weight: 700;
}

.consultancy-footer .consultancy-footer-credit {
	margin-top: 16px;
	padding-top: 0;
	border-top: 0;
}

/* Owner's list item 13 (2026-10): cards in one row line up part by part — duration,
   name, price, list and button start on the same line in every card — without fixed
   heights. Each card spans the same rows of its grid as a subgrid, and every kind of
   part has its own row, so a card without an icon or a duration leaves that row empty
   instead of shifting the rest up. A single column (phones) gives every card its own
   rows, so nothing is padded there. */
.consultancy-package-columns > .wp-block-column {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 8;
	row-gap: 0;
	align-content: start;
}

/* The space between card rows is the cards' own margin, not the grid's row gap:
   Chrome puts the parent's row gap around a subgrid's empty rows too, which opened
   48px above the button of every card without a second or third list. The negative
   margin takes the last row's margin back so the section ends where it did. */
.wp-block-columns.consultancy-package-columns {
	row-gap: 0;
	margin-block-end: -24px;
}

.consultancy-package-columns > .wp-block-column {
	margin-block-end: 24px;
}

.consultancy-package-columns > .wp-block-column > :not(.consultancy-package-badge) {
	grid-column: 1;
}

.consultancy-package-columns > .wp-block-column > .consultancy-package-icon { grid-row: 1; }
.consultancy-package-columns > .wp-block-column > .consultancy-package-duration { grid-row: 2; }
.consultancy-package-columns > .wp-block-column > :is(h2, h3, h4) { grid-row: 3; }
.consultancy-package-columns > .wp-block-column > .consultancy-package-price { grid-row: 4; }
.consultancy-package-columns > .wp-block-column > :not(.consultancy-package-icon, .consultancy-package-duration, h2, h3, h4, .consultancy-package-price, .consultancy-card-cta, .consultancy-package-badge) { grid-row: 5; }
.consultancy-package-columns > .wp-block-column > :not(.consultancy-package-icon, .consultancy-package-duration, h2, h3, h4, .consultancy-package-price, .consultancy-card-cta, .consultancy-package-badge) ~ :not(.consultancy-package-icon, .consultancy-package-duration, h2, h3, h4, .consultancy-package-price, .consultancy-card-cta, .consultancy-package-badge) { grid-row: 6; }
.consultancy-package-columns > .wp-block-column > :not(.consultancy-package-icon, .consultancy-package-duration, h2, h3, h4, .consultancy-package-price, .consultancy-card-cta, .consultancy-package-badge) ~ :not(.consultancy-package-icon, .consultancy-package-duration, h2, h3, h4, .consultancy-package-price, .consultancy-card-cta, .consultancy-package-badge) ~ :not(.consultancy-package-icon, .consultancy-package-duration, h2, h3, h4, .consultancy-package-price, .consultancy-card-cta, .consultancy-package-badge) { grid-row: 7; }
.consultancy-package-columns > .wp-block-column > .consultancy-card-cta { grid-row: 8; align-self: end; margin-top: 0; }

/* In a Columns-block card the first child loses its top margin; when that child sits
   below an empty duration row it would start higher than its neighbours. */
.consultancy-package-columns > .wp-block-column.is-layout-flow > :first-child:not(.consultancy-package-icon, .consultancy-package-duration, .consultancy-package-badge) {
	margin-block-start: var(--wp--style--block-gap, 1.2rem);
}

/* Step cards (Süreç): number, title, text. Side by side from the columns block's own
   stacking breakpoint up; below it they stack as before. */
@media (min-width: 782px) {
	.wp-block-columns:has(> .consultancy-step-card) {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		grid-template-rows: repeat(3, auto);
	}

	.wp-block-columns > .consultancy-step-card {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
		row-gap: 0;
	}

	.wp-block-columns > .consultancy-step-card > .consultancy-step-num { grid-row: 1; }
	.wp-block-columns > .consultancy-step-card > :is(h2, h3, h4) { grid-row: 2; }
	.wp-block-columns > .consultancy-step-card > :not(.consultancy-step-num, h2, h3, h4) { grid-row: 3; }
}

/* Owner's list item 16 (2026-10): the [consultant_flow_faq] list looks exactly like the
   FAQ the owner builds from Details blocks on the home page and in posts — white card,
   1px warm-beige border, 14px corners, terracotta question, charcoal answer, and the
   same space between cards as a flow layout gives those blocks. */
.consultant-flow-faq__item {
	background-color: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--warm-beige);
	border-radius: 14px;
}

.consultant-flow-faq__item + .consultant-flow-faq__item {
	margin-block-start: var(--wp--style--block-gap, 1.2rem);
}

.consultant-flow-faq__item summary {
	color: var(--wp--preset--color--terracotta);
}

/* Owner's list item 14 (2026-10): .consultancy-lift-link lifts a text link on hover the
   way buttons do — no shadow, colour and underline unchanged. Works on the link itself
   or on the paragraph/block around it (where the editor's "Additional CSS class" goes). */
a.consultancy-lift-link,
.consultancy-lift-link a {
	display: inline-block;
	transition: transform 0.2s ease;
}

a.consultancy-lift-link:hover,
.consultancy-lift-link a:hover {
	transform: translateY(-2px);
	/* Undo the theme's link hover (olive, no underline); a colour set on the link
	   itself in the editor wins over both anyway. */
	color: var(--wp--preset--color--terracotta);
	text-decoration-line: underline;
}

@media (prefers-reduced-motion: reduce) {
	a.consultancy-lift-link,
	.consultancy-lift-link a {
		transition: none;
	}
}

/* Package cards from [consultant_flow_packages] with the look the owner gave her
   hand-written home page cards (2026-10): name, feature list and note. */
.consultancy-package-name {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
}

.consultancy-package-features {
	margin-top: 0;
	padding-left: 1.1em;
	font-size: 0.92rem;
}

.consultancy-package-note {
	margin-top: 0;
	font-size: 0.92rem;
}

/* Testimonials (owner, 16 Oct): smaller cards in the scrolling row; a long quote is clamped
   to four lines and opens in place when the card is tapped (a disclosure, see
   consultant-flow's Consultant_Flow_Post_Type_Testimonial::render()). -webkit-line-clamp is
   the form every engine supports; the unprefixed line-clamp is not Baseline yet. */
.consultancy-testimonial-carousel .consultancy-testimonial-columns {
	grid-auto-columns: min(280px, 82%);
	align-items: start;
}

.consultancy-testimonial-card {
	padding: 18px 18px 16px;
	font-size: 0.95rem;
}

.consultancy-testimonial-carousel .consultancy-testimonial-card .consultancy-testimonial-quote {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	max-height: none;
	overflow: hidden;
}

.consultancy-testimonial-card.is-clamped {
	cursor: pointer;
}

.consultancy-testimonial-carousel .consultancy-testimonial-card.is-expanded .consultancy-testimonial-quote {
	display: block;
	-webkit-line-clamp: unset;
}

.consultancy-testimonial-card .consultancy-testimonial-quote p {
	margin: 0;
}

.consultancy-testimonial-card .consultancy-testimonial-more {
	margin: 8px 0 0;
}

.consultancy-testimonial-card .consultancy-testimonial-author {
	margin: 12px 0 0;
}