/**
 * Page sections and layout.
 *
 * These are the styles for the templates added in PRD Phase 4 — hero,
 * differentiator strip, Thermowood spotlight, trust band, page/product/archive
 * wrappers. The markup shipped without them, which is why the home page
 * rendered as an unstyled stack.
 *
 * Design intent from PRD Sections 3.1 and 3.4: premium through negative space
 * and restraint, not saturation. Roughly 50% Soft Ivory / 25% Olive / 15% Sand /
 * 10% Wood-Charcoal. Warm light, clean surfaces, controlled contrast, no heavy
 * overlays.
 *
 * Logical properties throughout — every one of these renders on the RTL /ar/
 * site as well.
 */

/* ==========================================================================
   Shared rhythm
   ========================================================================== */

.basaran-main {
	/* The sticky header is opaque, so no offset is needed; this simply stops
	   margin collapse between the header and a section's first child. */
	display: flow-root;
}

.basaran-section--tight { padding-block: var(--basaran-space-4); }

.basaran-section__header {
	max-width: 52ch;
	margin-block-end: var(--basaran-space-4);
}

.basaran-section__header h2 {
	margin-block: 0.25rem 0;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: var(--basaran-tracking-heading);
}

.basaran-section__header .basaran-lede { margin-block-start: var(--basaran-space-2); }

/* Section headers sit centred on the home page's full-width bands, but flush
   on catalog pages where they label a grid. */
.basaran-home .basaran-section__header {
	margin-inline: auto;
	text-align: center;
}

/* ==========================================================================
   Hero — PRD Section 6.1
   ========================================================================== */

.basaran-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(30rem, 72vh, 44rem);
	overflow: hidden;
	background-color: var(--basaran-sand-100);
	isolation: isolate;
}

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

.basaran-hero__media img,
.basaran-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
}

/* A Soft Ivory scrim rather than a dark overlay: Section 3.4 asks for warm light
   and explicitly rules out heavy overlays. The gradient is opaque enough behind
   the text to hold contrast and clears to nothing over the photograph. */
.basaran-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgb(245 241 232 / 0.97) 0%,
		rgb(245 241 232 / 0.93) 34%,
		rgb(245 241 232 / 0.62) 52%,
		rgb(245 241 232 / 0.12) 72%,
		rgb(245 241 232 / 0) 100%
	);
}

.basaran-hero__inner {
	position: relative;
	width: 100%;
	padding-block: var(--basaran-space-5);
}

.basaran-hero__title {
	max-width: 22ch;
	margin: 0;
	font-size: clamp(2.125rem, 1.4rem + 2.9vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--basaran-forest);
	text-wrap: balance;
}

.basaran-hero__lede {
	max-width: 46ch;
	margin-block: var(--basaran-space-2) 0;
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
	line-height: 1.65;
	color: var(--basaran-text);
}

.basaran-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--basaran-space-2);
	margin-block-start: var(--basaran-space-3);
}

/* Below 900px the scrim would have to cover the whole photo to stay legible,
   which wastes the image. Stack instead: photo, then text on ivory. */
@media (max-width: 900px) {
	.basaran-hero {
		min-height: 0;
		display: block;
	}

	.basaran-hero__media {
		position: relative;
		z-index: 0;
		aspect-ratio: 4 / 3;
	}

	.basaran-hero::before { content: none; }

	.basaran-hero__inner {
		padding-block: var(--basaran-space-4);
		background-color: var(--basaran-sand-100);
	}
}

/* ==========================================================================
   Hero — Elementor container variant
   ==========================================================================
   The home page hero exists twice: as the PHP baseline above, and as an
   Elementor container the client can edit. Elementor owns the background image
   and spacing; the scrim and text measure stay here, because Elementor's
   background-overlay controls produced no scrim at all and left the H1
   unreadable over the photograph. */

.basaran-hero-el {
	position: relative;
	isolation: isolate;
}

/* `.e-con.` rather than a bare class: Elementor owns `.e-con::before` for its
   own background-overlay layer and sets `content: var(--background-overlay)`,
   which resolves to `none` when no overlay is configured. That rule has the same
   specificity as a single class and loads after the theme, so it silently won
   and the scrim never drew. Two classes outrank it. */
.e-con.basaran-hero-el::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Two layers rather than one.
	 *
	 * The single ivory wash was tuned against a small, dark board close-up. On
	 * the current hero — a bright deck under an open sky — the same wash bleached
	 * the whole frame, and the photograph stopped reading as a photograph.
	 *
	 * The horizontal layer now clears much earlier, so only the column of text
	 * is covered and the sea and horizon stay saturated. The vertical layer is a
	 * faint bottom-up tint that keeps the buttons legible over pale timber
	 * without touching the sky above them. */
	background:
		linear-gradient(
			to top,
			rgb(245 241 232 / 0.55) 0%,
			rgb(245 241 232 / 0.16) 26%,
			rgb(245 241 232 / 0) 48%
		),
		linear-gradient(
			100deg,
			rgb(245 241 232 / 0.94) 0%,
			rgb(245 241 232 / 0.86) 26%,
			rgb(245 241 232 / 0.42) 44%,
			rgb(245 241 232 / 0.06) 62%,
			rgb(245 241 232 / 0) 78%
		);
}

/* Mirror the scrim on Arabic.
 *
 * The hero text sits on the right in RTL, but the gradient is angular and stays
 * pinned to the left — so the headline landed on the clear side of the image and
 * the scrim covered empty sea. `100deg` mirrors to `260deg` (360 − 100); the
 * vertical layer is direction-agnostic and is repeated unchanged. */
[dir="rtl"] .e-con.basaran-hero-el::before {
	background:
		linear-gradient(
			to top,
			rgb(245 241 232 / 0.55) 0%,
			rgb(245 241 232 / 0.16) 26%,
			rgb(245 241 232 / 0) 48%
		),
		linear-gradient(
			260deg,
			rgb(245 241 232 / 0.94) 0%,
			rgb(245 241 232 / 0.86) 26%,
			rgb(245 241 232 / 0.42) 44%,
			rgb(245 241 232 / 0.06) 62%,
			rgb(245 241 232 / 0) 78%
		);
}

/* Lift the content above the scrim. */
.basaran-hero-el > * {
	position: relative;
	z-index: 1;
}

/* Hold the text to the readable side of the gradient.
 *
 * Two things were wrong with the obvious `.basaran-hero-el > .elementor-widget`.
 *
 * First, a *boxed* container wraps its children in `.e-con-inner`, so the child
 * combinator matched nothing at all.
 *
 * Second, Elementor sets `max-width: 100%` on widgets through
 * `.e-con.e-con > .e-con-inner > .elementor-widget` — four classes. Any
 * two-class selector loses outright, and a four-class one only ties and then
 * depends on load order. So the shape below mirrors Elementor's own and repeats
 * `.e-con` once more: five classes, which wins without `!important`.
 *
 * The home page only ever looked correct because its headline happened to wrap
 * at that size; the Company hub's shorter headline ran straight off the scrim
 * and onto the photograph, which is what exposed this. */
.e-con.e-con.basaran-hero-el > .e-con-inner > .elementor-widget-heading,
.e-con.e-con.basaran-hero-el > .e-con-inner > .elementor-widget-text-editor,
.e-con.e-con.basaran-hero-el > .elementor-widget-heading,
.e-con.e-con.basaran-hero-el > .elementor-widget-text-editor {
	max-width: 34rem;
}

/* A denser scrim for heroes whose photograph has no calm area to sit on.
 *
 * The default wash is tuned for an image with sky or open ground behind the
 * text. Over the mill interior — stacked timber edge to edge — the same wash
 * left the headline competing with vertical lines at every point. */
.e-con.basaran-hero-el--dense::before {
	background:
		linear-gradient(
			to top,
			rgb(245 241 232 / 0.6) 0%,
			rgb(245 241 232 / 0.2) 30%,
			rgb(245 241 232 / 0) 55%
		),
		linear-gradient(
			100deg,
			rgb(245 241 232 / 0.98) 0%,
			rgb(245 241 232 / 0.96) 38%,
			rgb(245 241 232 / 0.7) 56%,
			rgb(245 241 232 / 0.24) 74%,
			rgb(245 241 232 / 0.04) 100%
		);
}

[dir="rtl"] .e-con.basaran-hero-el--dense::before {
	background:
		linear-gradient(
			to top,
			rgb(245 241 232 / 0.6) 0%,
			rgb(245 241 232 / 0.2) 30%,
			rgb(245 241 232 / 0) 55%
		),
		linear-gradient(
			260deg,
			rgb(245 241 232 / 0.98) 0%,
			rgb(245 241 232 / 0.96) 38%,
			rgb(245 241 232 / 0.7) 56%,
			rgb(245 241 232 / 0.24) 74%,
			rgb(245 241 232 / 0.04) 100%
		);
}

.basaran-hero-el .elementor-heading-title {
	text-wrap: balance;
}

@media (max-width: 900px) {
	/* A vertical gradient rather than the desktop's angular one: at 375px the copy
	 * spans the full width, so there is no clear *column* to protect — only a
	 * clear band above and below it. Being vertical also makes it direction
	 * neutral, so Arabic needs no mirrored variant.
	 *
	 * OPACITY
	 * The previous stops ran 0.82–0.88 across the whole frame, which let only
	 * ~13% of the photograph through — the hero read as a blank ivory panel on
	 * every phone. It was set that heavily on the assumption that full-width
	 * copy needs a full-strength wash everywhere, and that is simply more than
	 * the contrast requires.
	 *
	 * The values below were solved rather than guessed: composite the photograph
	 * against ivory row by row, then take the *worst* pixel under each line of
	 * copy. 0.72 is the point where the 32px Deep Forest heading clears 4.2:1 and
	 * the 16px Charcoal paragraph clears 7:1 — comfortably past the 3:1 and 4.5:1
	 * that WCAG AA asks for. That leaves 28% of the image showing where the text
	 * sits and ~90% in the bands above and below it.
	 *
	 * STOP PLACEMENT
	 * Keyed to measured content positions, taking the earliest and latest across
	 * all three languages so one gradient serves them all:
	 *
	 *   heading top     TR 19%   EN 21%   AR 26.9%   -> ramp completes by 18%
	 *   paragraph end   TR 61%   EN 59%   AR 61%     -> and Kurumsal's runs to 67%
	 *
	 * so the wash holds to 66% and only then releases. Releasing at 62% instead
	 * costs Kurumsal's paragraph its margin (5.2:1 rather than 7:1) and buys back
	 * almost no visible photograph, which is why the hold runs this late.
	 *
	 * The buttons need no protection at any stop — they are solid #9A6A43 with
	 * white text and paint above the scrim. */
	.e-con.basaran-hero-el::before {
		background: linear-gradient(
			to bottom,
			rgb(245 241 232 / 0.05) 0%,
			rgb(245 241 232 / 0.10) 11%,
			rgb(245 241 232 / 0.72) 18%,
			rgb(245 241 232 / 0.74) 66%,
			rgb(245 241 232 / 0.42) 78%,
			rgb(245 241 232 / 0.16) 90%,
			rgb(245 241 232 / 0.05) 100%
		);
	}

	/* Give the open bands something to show. Without the extra height the clear
	   strip at each end is too shallow to register as a photograph.
	 *
	 * No `background-position` here: `inc/hero-image.php` pins it to
	 * `center center !important` so one Customizer choice drives all three
	 * languages, and a plain declaration in this file cannot win against that.
	 * Anything set here would read as configuration while doing nothing. */
	.e-con.basaran-hero-el {
		min-height: 82vh;
	}

	.basaran-hero-el > .elementor-widget-heading,
	.basaran-hero-el > .elementor-widget-text-editor {
		max-width: none;
	}
}

/* ==========================================================================
   Differentiators — PRD Section 2.2
   ========================================================================== */

.basaran-differentiators {
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.basaran-differentiator {
	padding: var(--basaran-space-3);
	/* Hairline rules instead of cards: three boxes would fight the restraint
	   the identity guide asks for. */
	border-inline-start: 1px solid var(--basaran-hairline);
}

.basaran-differentiator:first-child { border-inline-start: 0; }

@media (max-width: 700px) {
	.basaran-differentiator {
		border-inline-start: 0;
		border-block-start: 1px solid var(--basaran-hairline);
		padding-inline: 0;
	}

	.basaran-differentiator:first-child { border-block-start: 0; }
}

.basaran-differentiator__num {
	display: block;
	font-family: var(--basaran-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--basaran-tracking-eyebrow);
	color: var(--basaran-wood-700);
}

.basaran-differentiator__title {
	margin-block: var(--basaran-space-1) 0.4rem;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--basaran-heading);
}

.basaran-differentiator__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--basaran-text-muted);
}

/* ==========================================================================
   Thermowood spotlight — PRD Section 6.1 item 4
   ========================================================================== */

.basaran-thermowood { overflow: hidden; }

.basaran-thermowood__inner {
	display: grid;
	gap: var(--basaran-space-4);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
}

.basaran-thermowood__body h2 {
	margin-block: 0.25rem var(--basaran-space-2);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 1.15;
}

/* The media column previously had no rules at all, so an unsized image left a
   tall empty void in the middle of the dark band. */
.basaran-thermowood__media {
	margin: 0;
	border-radius: var(--basaran-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.basaran-thermowood__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.basaran-checklist {
	margin-block: var(--basaran-space-2);
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.basaran-checklist li {
	position: relative;
	padding-inline-start: 1.6rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--basaran-text-muted);
}

.basaran-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.5em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--basaran-olive);
}

/* ==========================================================================
   Wood species band — PRD Section 6.1 item 5
   ========================================================================== */

.basaran-species-band {
	display: grid;
	gap: var(--basaran-space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.basaran-species-card a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.basaran-species-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--basaran-radius);
	background-color: var(--basaran-sand-100);
}

.basaran-species-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--basaran-transition);
}

.basaran-species-card a:hover .basaran-species-card__media img,
.basaran-species-card a:focus-visible .basaran-species-card__media img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.basaran-species-card__media img { transition: none; }
	.basaran-species-card a:hover .basaran-species-card__media img { transform: none; }
}

.basaran-species-card__name {
	display: block;
	margin-block-start: 0.7rem;
	font-family: var(--basaran-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--basaran-heading);
}

.basaran-species-card__count {
	display: block;
	margin-block-start: 0.15rem;
	font-size: 0.8125rem;
	color: var(--basaran-text-muted);
	font-variant-numeric: tabular-nums;
}

.basaran-species-card a:hover .basaran-species-card__name {
	color: var(--basaran-olive-700);
}

/* ==========================================================================
   Feature cards
   ==========================================================================
   Replaces the stacked paragraphs that made the corporate pages read as a
   document rather than a site. Three presentations share one grid so the
   rhythm stays constant down a page. */

.basaran-features {
	display: grid;
	gap: var(--basaran-space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.basaran-features {
		grid-template-columns: repeat(var(--basaran-feature-cols, 3), minmax(0, 1fr));
	}
}

.basaran-feature {
	padding: var(--basaran-space-3);
	background-color: #fff;
	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
	/* A hairline top accent instead of a coloured card: restraint per PRD 3.1. */
	box-shadow: inset 0 2px 0 0 var(--basaran-olive);
}

.basaran-features--plain .basaran-feature {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding-inline: 0;
	border-block-start: 1px solid var(--basaran-hairline);
}

.basaran-feature__num {
	display: block;
	margin-block-end: var(--basaran-space-1);
	font-family: var(--basaran-font-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: var(--basaran-tracking-eyebrow);
	color: var(--basaran-wood-700);
}

.basaran-feature__value {
	display: block;
	margin-block-end: 0.35rem;
	font-family: var(--basaran-font-heading);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--basaran-olive-700);
	font-variant-numeric: tabular-nums;
}

.basaran-feature__title {
	margin-block: 0 0.4rem;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--basaran-heading);
}

.basaran-feature__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--basaran-text-muted);
}

/* On dark bands the cards invert rather than punching white holes. */
.basaran-section--forest .basaran-feature,
.e-con.basaran-section--forest .basaran-feature {
	background-color: rgb(245 241 232 / 0.06);
	border-color: rgb(245 241 232 / 0.16);
}

/* ==========================================================================
   Pull quote
   ========================================================================== */

.basaran-pullquote {
	margin: 0;
	padding-inline-start: var(--basaran-space-3);
	border-inline-start: 3px solid var(--basaran-olive);
}

.basaran-pullquote p {
	margin: 0.35rem 0 0;
	font-family: var(--basaran-font-heading);
	font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--basaran-heading);
	text-wrap: pretty;
}

.basaran-pullquote--dark {
	border-inline-start-color: var(--basaran-sand);
}

.basaran-pullquote--dark p { color: var(--basaran-ivory); }

/* ==========================================================================
   Locations
   ========================================================================== */

.basaran-locations {
	display: grid;
	gap: var(--basaran-space-2);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.basaran-location {
	padding: var(--basaran-space-3);
	background-color: var(--basaran-sand-100);
	border-radius: var(--basaran-radius);
}

.basaran-location__role {
	display: block;
	font-family: var(--basaran-font-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--basaran-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--basaran-wood-700);
}

.basaran-location__city {
	margin-block: 0.4rem 0.6rem;
	font-size: 1.0625rem;
	color: var(--basaran-heading);
}

.basaran-location__address {
	margin: 0;
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--basaran-text-muted);
}

.basaran-location__phone {
	display: inline-block;
	margin-block-start: 0.6rem;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Trust band — PRD Section 6.1 item 7
   ========================================================================== */

.basaran-trust { padding-block: var(--basaran-space-4); }

.basaran-trust__stats {
	display: grid;
	gap: var(--basaran-space-3);
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	margin: 0 0 var(--basaran-space-3);
	padding: 0;
	list-style: none;
}

.basaran-trust__stat { text-align: center; }

.basaran-trust__value {
	display: block;
	font-family: var(--basaran-font-heading);
	font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--basaran-olive-700);
	/* Numerals line up in a row of stats. */
	font-variant-numeric: tabular-nums;
}

.basaran-trust__label {
	display: block;
	margin-block-start: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--basaran-text-muted);
}

.basaran-trust__sectors {
	margin: 0;
	padding-block-start: var(--basaran-space-3);
	border-block-start: 1px solid var(--basaran-hairline);
	text-align: center;
	font-size: 0.9375rem;
	color: var(--basaran-text-muted);
}

.basaran-trust__sectors .basaran-eyebrow {
	display: block;
	margin-block-end: 0.5rem;
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.basaran-cta-band h2 {
	margin: 0;
	max-width: 30ch;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	line-height: 1.2;
}

.basaran-cta-band .basaran-lede {
	margin-block: 0.5rem 0;
	max-width: 52ch;
}

/* ==========================================================================
   Generic page + prose
   ========================================================================== */

/* Bottom padding belongs to the last child, not the wrapper. On pages that end
   with the dark CTA band, wrapper padding sat *after* that band and produced a
   strip of bare Soft Ivory between two dark surfaces. */
.basaran-page { padding-block: var(--basaran-space-4) 0; }

.basaran-page > .basaran-container:last-child {
	padding-block-end: var(--basaran-space-5);
}

.basaran-page__header {
	max-width: var(--basaran-container-narrow);
	margin-block-end: var(--basaran-space-3);
}

.basaran-page__header h1 {
	margin: 0;
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.basaran-page__media {
	margin: 0 0 var(--basaran-space-4);
	border-radius: var(--basaran-radius);
	overflow: hidden;
	aspect-ratio: 21 / 9;
}

.basaran-page__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.basaran-prose {
	max-width: var(--basaran-container-narrow);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.basaran-prose > * + * { margin-block-start: 1.1em; }

.basaran-prose :where(h2) {
	margin-block-start: 2.2em;
	font-size: 1.5rem;
	line-height: 1.25;
}

.basaran-prose :where(h3) {
	margin-block-start: 1.8em;
	font-size: 1.1875rem;
}

.basaran-prose :where(ul, ol) { padding-inline-start: 1.4em; }
.basaran-prose li + li { margin-block-start: 0.5em; }

.basaran-prose :where(strong) { color: var(--basaran-heading); }

/* ==========================================================================
   Product detail — PRD Section 6.3
   ========================================================================== */

.basaran-product { padding-block: var(--basaran-space-3) 0; }

/* Same rule as .basaran-page: the wrapper's bottom padding would land after the
   dark CTA band and show as a stray ivory strip. */
.basaran-product > .basaran-container:last-child {
	padding-block-end: var(--basaran-space-5);
}

.basaran-product__media {
	margin: 0;
	border-radius: var(--basaran-radius);
	overflow: hidden;
	background-color: var(--basaran-sand-100);
}

.basaran-product__datasheet { margin-block-start: var(--basaran-space-2); }

/* Inline enquiry block — the product page's conversion point. Warm Sand sets it
   apart from the spec content above without introducing another dark band so
   soon before the footer. */
.basaran-product__enquiry {
	margin-block-start: var(--basaran-space-5);
	padding-block: var(--basaran-space-4);
	background-color: var(--basaran-sand-100);
	border-radius: var(--basaran-radius);
}

.basaran-product__enquiry-inner {
	display: grid;
	gap: var(--basaran-space-4);
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	padding-inline: var(--basaran-space-3);
}

.basaran-product__enquiry-intro h2 {
	margin-block: 0.25rem var(--basaran-space-2);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	line-height: 1.2;
}

/* The form sits on a card so the input fields read as a distinct surface
   against the sand background. */
.basaran-product__enquiry-form {
	padding: var(--basaran-space-3);
	background-color: #fff;
	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
}

.basaran-product__applications {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   Cards — consistent media boxes
   ========================================================================== */

.basaran-grid--cards { align-items: stretch; }

/* Equal-height cards. Without this, a two-line title in one card and a one-line
   title in its neighbour leave the row with ragged bottoms — the most visible
   sloppiness in an otherwise tidy grid. */
.basaran-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.basaran-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.35rem;
}

/* Titles are clamped to two lines so the card foot stays where the eye expects
   it, and the excerpt starts on the same baseline across the row. */
.basaran-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
}

.basaran-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Push the "Detaylar →" affordance to the foot of every card. */
.basaran-card__meta,
.basaran-card__more { margin-block-start: auto; }

/* Every card media box reserves the same ratio, so a card without an image no
   longer collapses and leaves the row ragged. */
.basaran-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--basaran-sand-100);
}

.basaran-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--basaran-transition);
}

.basaran-card:hover .basaran-card__media img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
	.basaran-card__media img { transition: none; }
	.basaran-card:hover .basaran-card__media img { transform: none; }
}

/* Placeholder for catalog entries the client has not photographed yet. A faint
   diagonal wood-tone hatch reads as "image pending" rather than "broken". */
.basaran-media--empty {
	background-color: var(--basaran-sand-100);
	background-image: repeating-linear-gradient(
		135deg,
		rgb(154 106 67 / 0.05) 0 10px,
		transparent 10px 20px
	);
}

/* ==========================================================================
   Product gallery
   ==========================================================================
   NOTE: `.basaran-gallery` is the *product* gallery (one large image plus a
   thumbnail strip), not a masonry grid. An earlier rule here declared it as a
   `repeat(auto-fill, minmax(16rem, 1fr))` grid, which turned the main product
   image into a 16rem grid item — the product photo appeared shrunken. Any
   gallery-page grid must use a different class. */

.basaran-gallery {
	display: flex;
	flex-direction: column;
	gap: var(--basaran-space-2);
}

.basaran-gallery__main {
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--basaran-radius);
	background-color: var(--basaran-sand-100);
	/* 4:3 matches the source photography and keeps the column height stable
	   while a larger image decodes (CLS, PRD Section 8.2). */
	aspect-ratio: 4 / 3;
}

.basaran-gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.basaran-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.basaran-gallery__thumb {
	display: block;
	width: 5rem;
	aspect-ratio: 1 / 1;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: none;
	border: 2px solid transparent;
	border-radius: var(--basaran-radius);
	transition: border-color var(--basaran-transition);
}

.basaran-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.basaran-gallery__thumb[aria-current="true"] {
	border-color: var(--basaran-olive);
}

.basaran-gallery__thumb:hover { border-color: var(--basaran-olive-700); }

.basaran-gallery__thumb:focus-visible {
	outline: 2px solid var(--basaran-focus);
	outline-offset: 2px;
}

/* Product page two-column layout: gallery beside the spec panel. */
.basaran-product__layout {
	display: grid;
	gap: var(--basaran-space-4);
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/*
 * Above 60rem the two columns are wildly unequal in height: the gallery is one
 * squarish image, while the text column carries the lede, the description, the
 * spec table, the application chips and the species line. `align-items: start`
 * then left a column of dead space taller than the image itself.
 *
 * Two changes: give the text column the larger share, since it holds nearly all
 * the content, and let the gallery stick so it stays beside whatever the reader
 * has scrolled to instead of sliding away and leaving a void.
 */
@media (min-width: 60rem) {
	.basaran-product__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	/* `.basaran-product__media` is the column wrapper, not the image box —
	   the image lives in `.basaran-media` inside it, so sticking the wrapper
	   moves the whole gallery without touching the fill behaviour. */
	.basaran-product__media {
		position: sticky;
		/* Clears the sticky header, plus a little breathing room. */
		top: calc(var(--basaran-header-height, 5rem) + var(--basaran-space-2));
	}
}

/* ==========================================================================
   Gallery page, search, 404
   ========================================================================== */

/* The /galeri/ page grid — deliberately a different class from the product
   gallery above. */
.basaran-gallery-grid {
	display: grid;
	gap: var(--basaran-space-2);
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.basaran-search,
.basaran-404 { padding-block: var(--basaran-space-4) 0; }

.basaran-search > .basaran-container:last-child,
.basaran-404 > .basaran-container:last-child {
	padding-block-end: var(--basaran-space-5);
}

.basaran-404 .basaran-eyebrow {
	display: block;
	font-size: 0.875rem;
}

.basaran-404 h1 {
	margin-block: var(--basaran-space-1) var(--basaran-space-2);
	font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
}

.basaran-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--basaran-space-2);
	margin-block: var(--basaran-space-3);
}

.basaran-404__categories { margin-block-start: var(--basaran-space-5); }

.basaran-404__categories h2 {
	font-size: 1.25rem;
	margin-block-end: var(--basaran-space-2);
}

/* ==========================================================================
   Light button, for dark surfaces
   ========================================================================== */

.basaran-btn--light {
	background-color: var(--basaran-ivory);
	color: var(--basaran-forest);
	border: 1px solid var(--basaran-ivory);
}

.basaran-btn--light:hover,
.basaran-btn--light:focus-visible {
	background-color: var(--basaran-sand);
	border-color: var(--basaran-sand);
	color: var(--basaran-charcoal);
}

/* -------------------------------------------------------------------------- */
/* Linked feature cards                                                        */
/*                                                                             */
/* A feature card with a link is navigation, so it needs to read as clickable  */
/* without becoming a button. The hairline top accent already present on the   */
/* card does the work; hover just deepens it and draws the title underline.    */
/* -------------------------------------------------------------------------- */

.basaran-feature--linked {
	position: relative;
	transition: transform 0.22s ease;
}

.basaran-feature--linked .basaran-feature__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.28s ease;
}

.basaran-feature--linked .basaran-feature__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.basaran-feature--linked:hover .basaran-feature__title a,
.basaran-feature--linked .basaran-feature__title a:focus-visible {
	background-size: 100% 1px;
}

.basaran-feature--linked:hover {
	transform: translateY(-2px);
}

/* The gradient underline is drawn from the inline start, which flips with the
   document direction; the offset origin has to flip with it. */
[dir="rtl"] .basaran-feature--linked .basaran-feature__title a {
	background-position: 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	.basaran-feature--linked,
	.basaran-feature--linked .basaran-feature__title a {
		transition: none;
	}

	.basaran-feature--linked:hover {
		transform: none;
	}
}

/* Profile drawings ---------------------------------------------------------- */

.basaran-profiles {
	margin-block: var(--basaran-space-3);
}

.basaran-profiles__list {
	display: grid;
	/* The drawings are wide and short (roughly 3:1), so two per row reads better
	   than a dense auto-fill that would shrink them past legibility. */
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: var(--basaran-space-1);
	list-style: none;
	margin: var(--basaran-space-1) 0 0;
	padding: 0;
}

.basaran-profiles__item {
	padding: 0.5rem 0.75rem;
	background-color: var(--basaran-sand-100);
	border-radius: var(--basaran-radius);
}

.basaran-profiles__img {
	display: block;
	width: 100%;
	height: auto;
	/* Line art: never upscale past its natural size or it goes soft. */
	max-width: 392px;
	margin-inline: auto;
}

/* The drawings read left-to-right regardless of script — they are technical
   sections, and mirroring them would describe a different board. */
.basaran-rtl .basaran-profiles__img {
	transform: none;
}

/* Location map link -------------------------------------------------------- */

.basaran-location__map {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
	color: var(--basaran-link-on-sand);
	text-decoration: none;
}

.basaran-location__map:hover,
.basaran-location__map:focus-visible {
	text-decoration: underline;
}

/* The pin is decorative; the label carries the meaning. */
.basaran-location__map svg { flex: 0 0 auto; }

/* Contact page: locations beside the form ------------------------------------
   Two stacked full-width sections became one container with two columns.

   SPECIFICITY
   Elementor owns container layout through `.e-con.e-con { display: flex }` —
   two classes. A single-class rule here loses, so `display: grid` silently did
   nothing, the container stayed a flex row and both children sized to their
   content: the form shrank to its fields and left a band of empty ivory. The
   `.e-con` prefix matches Elementor's specificity and wins on source order.

   BOXED CONTAINERS
   A boxed container (`e-con-boxed`) wraps its children in `.e-con-inner`, so
   the two columns are grandchildren, not children. The grid has to go on that
   inner wrapper; putting it on the outer element made a one-cell grid whose
   only item was the wrapper, which changed nothing. */

.e-con.basaran-contact__split > .e-con-inner,
.e-con.e-con-full.basaran-contact__split {
	display: grid;
	/* The form holds paired fields, so it earns slightly more than half. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: var(--basaran-space-4);
	align-items: start;
}

@media (max-width: 60rem) {
	.e-con.basaran-contact__split > .e-con-inner,
	.e-con.e-con-full.basaran-contact__split {
		grid-template-columns: 1fr;
	}
}

/* Undo the width Elementor gives each inner container: the grid already allots
   the share, and applying 50% again inside the cell quartered each column. */
.e-con.basaran-contact__split .basaran-contact__col {
	--width: 100%;
	width: 100%;
	max-width: none;
}

/* The column is itself a flex container; make its widget fill rather than
   shrink to the width of the fields. */
.e-con.basaran-contact__col--form > .elementor-widget,
.e-con.basaran-contact__col--form .elementor-widget-container,
.basaran-contact__col--form .basaran-form {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Exactly two cards per row. `auto-fit` fitted three and orphaned the fourth;
   the count is the design, not a function of width. */
.basaran-contact__col--info .basaran-locations {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 30rem) {
	.basaran-contact__col--info .basaran-locations {
		grid-template-columns: 1fr;
	}
}

/* Equal-height cards so each pair bottom-aligns. */
.basaran-contact__col--info .basaran-location {
	display: flex;
	flex-direction: column;
}

/* Elsewhere — the standalone Teklif Al page — keep the form readable rather
   than stretched across the whole container. */
.basaran-form {
	max-width: 46rem;
	margin-inline: auto;
}

.basaran-product__enquiry .basaran-form {
	max-width: none;
	margin-inline: 0;
}

.basaran-locations {
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* Force the contact form to fill its column ---------------------------------
   DevTools measured `.basaran-form__grid` at 226px inside a column several
   times that width, so something in the Elementor chain between the column and
   the form is sizing to content. Rather than keep guessing which ancestor it
   is — four attempts have now missed — every link in that chain is pinned.

   `!important` is deliberate and narrow: one property pair, scoped to the
   contact split only. Elementor's container utilities have won this cascade
   repeatedly, and matching their specificity selector-by-selector has proved
   less reliable than stating the intent outright. */

.basaran-contact__split .basaran-contact__col--form,
.basaran-contact__split .basaran-contact__col--form > *,
.basaran-contact__split .basaran-contact__col--form .elementor-widget,
.basaran-contact__split .basaran-contact__col--form .elementor-widget-container,
.basaran-contact__split .basaran-contact__col--form .basaran-form,
.basaran-contact__split .basaran-contact__col--form .basaran-form__grid {
	width: 100% !important;
	max-width: none !important;
	flex: 1 1 auto !important;
}