/**
 * Catalog and navigation components.
 *
 * Logical properties (inline-start/end) are used throughout so the Arabic RTL
 * layout mirrors automatically; rtl.css only handles what cannot be expressed
 * logically.
 */

/* Buttons ----------------------------------------------------------------- */

.basaran-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.85em 1.75em;
	font-family: var(--basaran-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--basaran-radius);
	cursor: pointer;
	transition: background-color var(--basaran-transition), color var(--basaran-transition), border-color var(--basaran-transition);
}

.basaran-btn--primary {
	background-color: var(--basaran-cta-bg);
	color: var(--basaran-cta-text);
}

.basaran-btn--primary:hover,
.basaran-btn--primary:focus-visible {
	background-color: var(--basaran-cta-bg-hover);
	color: var(--basaran-cta-text);
}

.basaran-btn--outline {
	background-color: transparent;
	border-color: var(--basaran-olive-700);
	color: var(--basaran-olive-700);
}

.basaran-btn--outline:hover,
.basaran-btn--outline:focus-visible {
	background-color: var(--basaran-olive-700);
	color: var(--basaran-cta-text);
}

.basaran-section--forest .basaran-btn--outline {
	border-color: var(--basaran-sand);
	color: var(--basaran-sand);
}

.basaran-section--forest .basaran-btn--outline:hover {
	background-color: var(--basaran-sand);
	color: var(--basaran-charcoal);
}

/* The arrow is decoration; it must not be announced or shift on hover. */
.basaran-btn__arrow { transition: transform var(--basaran-transition); }
.basaran-btn:hover .basaran-btn__arrow { transform: translateX(2px); }
.basaran-rtl .basaran-btn:hover .basaran-btn__arrow { transform: translateX(-2px); }

/* Cards ------------------------------------------------------------------- */

.basaran-card {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
	overflow: hidden;
	transition: border-color var(--basaran-transition), transform var(--basaran-transition);
}

.basaran-card:hover {
	border-color: var(--basaran-olive);
	transform: translateY(-2px);
}

.basaran-card__media { aspect-ratio: 4 / 3; }

.basaran-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--basaran-space-1);
	padding: var(--basaran-space-2) var(--basaran-space-2) var(--basaran-space-3);
	flex: 1;
}

.basaran-card__title {
	font-size: 1.125rem;
	margin: 0;
}

/* The whole card is clickable but only the title is a link, so screen-reader
   users get one meaningful link rather than three. */
.basaran-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.basaran-card { position: relative; }

.basaran-card__meta {
	font-size: 0.8125rem;
	color: var(--basaran-text-muted);
}

.basaran-card__excerpt {
	font-size: 0.9375rem;
	color: var(--basaran-text-muted);
	margin: 0;
}

/* Spec table -------------------------------------------------------------- */

.basaran-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.basaran-specs caption {
	text-align: start;
	font-family: var(--basaran-font-heading);
	font-weight: 600;
	color: var(--basaran-heading);
	padding-block-end: var(--basaran-space-1);
}

.basaran-specs th,
.basaran-specs td {
	padding: 0.75rem 1rem;
	border-block-end: 1px solid var(--basaran-hairline);
	text-align: start;
	vertical-align: top;
}

.basaran-specs th {
	width: 40%;
	font-weight: 600;
	color: var(--basaran-heading);
	background-color: var(--basaran-sand-100);
}

.basaran-specs tr:last-child th,
.basaran-specs tr:last-child td { border-block-end: 0; }

/* Links on sand surfaces --------------------------------------------------
   The default olive link falls just below the AA contrast floor against Warm
   Sand, so sand-backed sections darken it. Applied by surface rather than by
   component, so any future block placed on sand inherits the fix. */

:where(.basaran-section--sand, .basaran-specs, .basaran-form-notice) a:not(.basaran-btn) {
	color: var(--basaran-link-on-sand);
}

/* Application-area chips -------------------------------------------------- */

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

.basaran-chip {
	display: inline-block;
	padding: 0.35em 0.9em;
	font-size: 0.8125rem;
	background-color: var(--basaran-sand-300);
	color: var(--basaran-charcoal);
	border-radius: 999px;
}

/* Mega menu --------------------------------------------------------------- */

.basaran-mega {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 100%;
	width: 100%;
	background-color: var(--basaran-ivory);
	border-block-start: 1px solid var(--basaran-hairline);
	box-shadow: var(--basaran-shadow);
	padding-block: var(--basaran-space-3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--basaran-transition), transform var(--basaran-transition), visibility var(--basaran-transition);
	z-index: 60;
}

.basaran-mega[data-open="true"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.basaran-mega__grid {
	display: grid;
	gap: var(--basaran-space-2);
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
}

.basaran-mega__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--basaran-heading);
}

.basaran-mega__item .basaran-media { aspect-ratio: 16 / 10; }

.basaran-mega__label {
	font-family: var(--basaran-font-heading);
	font-size: 0.9375rem;
	font-weight: 600;
}

.basaran-mega__item:hover .basaran-mega__label { color: var(--basaran-link-hover); }

/* Language switcher ------------------------------------------------------- */

.basaran-langswitch {
	position: relative;
	display: inline-block;
}

.basaran-langswitch__list {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.basaran-langswitch__link {
	font-family: var(--basaran-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--basaran-text-muted);
}

.basaran-langswitch__item--current .basaran-langswitch__link {
	color: var(--basaran-olive-700);
}

.basaran-langswitch__flag {
	width: 1.25em;
	height: auto;
	vertical-align: -0.15em;
	margin-inline-end: 0.35em;
}

/* Breadcrumbs ------------------------------------------------------------- */

.basaran-breadcrumbs {
	font-size: 0.8125rem;
	color: var(--basaran-text-muted);
	padding-block: var(--basaran-space-2);
}

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

.basaran-breadcrumbs li + li::before {
	content: "›";
	margin-inline-end: 0.5rem;
	color: var(--basaran-hairline);
}

/* Filter bar -------------------------------------------------------------- */

.basaran-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-block: var(--basaran-space-2);
	border-block-end: 1px solid var(--basaran-hairline);
	margin-block-end: var(--basaran-space-3);
}

/* Anchors, not buttons: each chip is a real link to its species archive so the
   filter is complete even when the archive paginates. filters.js upgrades them
   to an instant filter only when the whole result set is on the page. */
.basaran-filter {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;

	padding: 0.5em 1.1em;
	font-size: 0.875rem;
	background: transparent;
	border: 1px solid var(--basaran-hairline);
	border-radius: 999px;
	color: var(--basaran-text-muted);
	text-decoration: none;
	cursor: pointer;
	transition: all var(--basaran-transition);
}

.basaran-filter:hover {
	border-color: var(--basaran-olive);
	color: var(--basaran-heading);
}

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

/* The chips are links to the category archives now. `aria-pressed` is kept as a
   selector so a page still in the CDN from before the change keeps its
   highlight rather than rendering with none. */
.basaran-filter.is-active,
.basaran-filter[aria-current="page"],
.basaran-filter[aria-pressed="true"] {
	background-color: var(--basaran-olive-700);
	border-color: var(--basaran-olive-700);
	color: var(--basaran-ivory);
}

/* The term's own count, which is the number the archive behind the link will
   render — the chip and the result cannot disagree. */
.basaran-filter__count {
	font-size: 0.75em;
	font-variant-numeric: tabular-nums;
	opacity: 0.65;
}

.basaran-filter.is-active .basaran-filter__count { opacity: 0.8; }

/* Columnar spec table ------------------------------------------------------ */

/* The label/value form styles the first cell as a row header. The grid form has
   a real <thead> instead, so that rule has to be undone or every first column
   cell renders as a heading. */
.basaran-specs--grid thead th {
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--basaran-text-muted);
	text-align: start;
	white-space: nowrap;
}

.basaran-specs--grid td {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* FAQ accordion ----------------------------------------------------------- */

.basaran-faq__item {
	border-block-end: 1px solid var(--basaran-hairline);
}

.basaran-faq__q {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-block: var(--basaran-space-2);
	font-family: var(--basaran-font-heading);
	font-weight: 600;
	color: var(--basaran-heading);
	cursor: pointer;
	list-style: none;
}

.basaran-faq__q::-webkit-details-marker { display: none; }

.basaran-faq__q::after {
	content: "+";
	font-size: 1.25rem;
	color: var(--basaran-olive-700);
	flex-shrink: 0;
}

.basaran-faq__item[open] .basaran-faq__q::after { content: "−"; }

.basaran-faq__a { padding-block-end: var(--basaran-space-2); }

/* CTA band ---------------------------------------------------------------- */

.basaran-cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--basaran-space-2);
}

/* Catalog archives -------------------------------------------------------- */

.basaran-catalog {
	padding-block-end: 0;
}

/* The catalogue intro runs the full width of the container.
 *
 * It was capped at 70ch here and the description capped again at 62ch by
 * `.basaran-lede`, so a category description the client wrote wrapped at a bit
 * over half the page and left the right-hand side empty. A measure is the right
 * default for body copy, but this is a single short intro paragraph under a big
 * heading, and the client wants it to fill the line. */

.basaran-catalog__header {
	max-width: none;
	padding-block: var(--basaran-space-3) var(--basaran-space-3);
}

.basaran-catalog__header .basaran-lede {
	max-width: none;
}

.basaran-catalog__header h1 {
	margin-block-end: var(--basaran-space-2);
}

.basaran-catalog__subheading {
	margin-block: var(--basaran-space-4) var(--basaran-space-2);
}

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

.basaran-catalog .pagination,
.basaran-catalog .nav-links {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	padding-block: var(--basaran-space-4);
}

/* Product detail ---------------------------------------------------------- */

.basaran-product__layout {
	display: grid;
	gap: var(--basaran-space-4);
	padding-block: var(--basaran-space-3);
}

@media (min-width: 900px) {
	.basaran-product__layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.basaran-product__info > * + * {
	margin-block-start: var(--basaran-space-3);
}

.basaran-product__species {
	font-size: 0.9375rem;
	color: var(--basaran-text-muted);
}

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

.basaran-gallery__main {
	aspect-ratio: 4 / 3;
}

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

.basaran-gallery__thumb {
	width: 76px;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--basaran-hairline);
	background: none;
	cursor: pointer;
	transition: border-color var(--basaran-transition);
}

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

.basaran-related {
	border-block-start: 1px solid var(--basaran-hairline);
}

/* Breadcrumbs (rendered by BasaranSEO) ------------------------------------ */

.basaran-breadcrumbs {
	margin-block: var(--basaran-space-2);
	font-size: 0.8125rem;
	color: var(--basaran-text-muted);
}

.basaran-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.basaran-breadcrumbs__item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.basaran-breadcrumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.basaran-breadcrumbs a:hover {
	color: var(--basaran-olive-700);
	border-bottom-color: currentColor;
}

.basaran-breadcrumbs__sep {
	color: var(--basaran-hairline);
}

.basaran-breadcrumbs [aria-current="page"] {
	color: var(--basaran-heading);
	font-weight: 500;
}

/* Forms ------------------------------------------------------------------- */

/* Two-column grid; fields declare their own span so the client's width setting
   in Form Ayarları actually does something. */
.basaran-form__grid {
	display: grid;
	gap: 0 var(--basaran-space-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basaran-form__field--full { grid-column: 1 / -1; }

@media (max-width: 640px) {
	.basaran-form__grid { grid-template-columns: 1fr; }
	.basaran-form__field--half { grid-column: 1 / -1; }
}

/* Compact variant, used inline on product pages. */
.basaran-form--compact .basaran-form__grid { grid-template-columns: 1fr; }

.basaran-form__title {
	margin-block: 0 var(--basaran-space-2);
	font-size: 1.25rem;
}

.basaran-form__submit { margin-block-end: 0; }

.basaran-form__checkbox { display: inline-flex; }

.basaran-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 var(--basaran-space-2);
}

.basaran-form__field label {
	font-family: var(--basaran-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--basaran-heading);
}

.basaran-form :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%;
	padding: 0.7em 0.9em;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--basaran-text);
	background-color: #fff;
	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
	transition: border-color var(--basaran-transition);
}

.basaran-form :where(input, select, textarea):focus-visible {
	border-color: var(--basaran-olive-700);
}

.basaran-form textarea {
	resize: vertical;
	min-height: 8rem;
}

.basaran-form__consent {
	font-size: 0.875rem;
	color: var(--basaran-text-muted);
}

.basaran-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	line-height: 1.55;
}

/* Nudge the box onto the first line's optical centre. `align-items: flex-start`
   pins it to the very top of a label that wraps to two or three lines, which
   leaves it visibly floating above the text it belongs to. */
.basaran-form__consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin-block-start: 0.28em;
}

/* Honeypot. Must stay focusable-but-invisible rather than display:none —
   some bots skip hidden fields, which would defeat the trap. */
/* Honeypot, hidden without moving it off-canvas.
 *
 * This was `position: absolute; left: -9999px`, which is the conventional trick
 * and is only safe in one writing direction.
 *
 * In LTR, content pushed past the left edge is not scrollable, so the offset
 * costs nothing. In RTL the scroll origin is the right edge and the overflow
 * direction flips, so the same rule made the document about 10,000px wide.
 * Mobile Safari then zoomed out to fit that width, which is why every Arabic
 * page carrying this form rendered as a narrow strip of content against the
 * right edge with a large empty area beside it, while Turkish and English were
 * unaffected. One physical property, visible only in one language.
 *
 * The clip technique keeps the element at its natural position and takes it out
 * of the visual and layout flow without any offset at all, so it behaves the
 * same in both directions. It mirrors `.screen-reader-text` in base.css; the
 * field stays out of the accessibility tree via its own `aria-hidden`, so bots
 * still find it and people still do not.
 */
.basaran-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.basaran-form-notice {
	padding: var(--basaran-space-2);
	border-inline-start: 3px solid var(--basaran-olive-700);
	background-color: var(--basaran-sand-100);
	margin-block-end: var(--basaran-space-2);
}

.basaran-form-notice--error {
	border-inline-start-color: #b32d2e;
}

/* Differentiators --------------------------------------------------------- */

.basaran-differentiator__title {
	font-size: 1.125rem;
	margin-block: var(--basaran-space-1) 0.35rem;
}

.basaran-differentiator__text {
	color: var(--basaran-text-muted);
	margin: 0;
}

/* Sticky quote CTA on product pages --------------------------------------- */

.basaran-sticky-cta {
	position: sticky;
	inset-block-end: 0;
	display: flex;
	gap: 0.75rem;
	padding: var(--basaran-space-2);
	background-color: var(--basaran-ivory);
	border-block-start: 1px solid var(--basaran-hairline);
	z-index: 40;
}

@media (min-width: 782px) {
	.basaran-sticky-cta {
		position: static;
		border: 0;
		padding-inline: 0;
		background: transparent;
	}
}

/* ==========================================================================
   Privacy-friendly video facade
   See basaran-core/src/Elementor/Widgets/VideoWidget.php — nothing is requested
   from YouTube until the visitor presses play.
   ========================================================================== */

.basaran-video {
	margin: 0;
}

.basaran-video__frame {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;

	background-color: var(--basaran-forest);
	border: 0;
	border-radius: var(--basaran-radius);
	cursor: pointer;

	/* Ratio reserved up front so pressing play cannot shift the page (CLS). */
	aspect-ratio: 16 / 9;
}

.basaran-video--4-3 .basaran-video__frame  { aspect-ratio: 4 / 3; }
.basaran-video--1-1 .basaran-video__frame  { aspect-ratio: 1 / 1; }
.basaran-video--9-16 .basaran-video__frame { aspect-ratio: 9 / 16; max-width: 24rem; margin-inline: auto; }

.basaran-video__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--basaran-transition), filter var(--basaran-transition);
}

.basaran-video__frame:hover .basaran-video__poster,
.basaran-video__frame:focus-visible .basaran-video__poster {
	transform: scale(1.02);
	filter: brightness(0.92);
}

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

/* The play control. Centred over the poster, olive rather than YouTube red —
   the identity guide owns this page, not Google. */
.basaran-video__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 76px;
	height: 76px;
	padding-inline-start: 6px;

	background-color: rgb(245 241 232 / 92%);
	border-radius: 50%;
	color: var(--basaran-olive-700);

	transition: transform var(--basaran-transition), background-color var(--basaran-transition);
}

/* RTL mirrors the whole layout, but a play triangle still points along the
   direction of playback, not of reading — so undo the flip for this glyph. */
[dir="rtl"] .basaran-video__play {
	transform: translate(50%, -50%);
}

.basaran-video__frame:hover .basaran-video__play {
	background-color: var(--basaran-ivory);
	transform: translate(-50%, -50%) scale(1.06);
}

[dir="rtl"] .basaran-video__frame:hover .basaran-video__play {
	transform: translate(50%, -50%) scale(1.06);
}

.basaran-video__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.basaran-video__caption {
	margin-block-start: var(--basaran-space-2);
	font-size: 0.875rem;
	color: var(--basaran-text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.basaran-video__poster,
	.basaran-video__play { transition: none; }
	.basaran-video__frame:hover .basaran-video__poster { transform: none; }
}

/* Filtering in place ------------------------------------------------------- */

/* The grid is fetched, not hidden, so there is a real network wait. Dimming it
   and blocking clicks makes the wait legible instead of looking like a dead
   chip; opacity only, so nothing reflows and the page does not jump. */
.basaran-grid,
.basaran-lede {
	transition: opacity 0.18s ease;
}

[aria-busy="true"] > .basaran-grid,
[aria-busy="true"] > .basaran-lede {
	opacity: 0.45;
	pointer-events: none;
}

/* Respect a reduced-motion preference: keep the dim, drop the fade. */
@media (prefers-reduced-motion: reduce) {
	.basaran-grid,
	.basaran-lede {
		transition: none;
	}
}

/* Product page: colour caveat (client note 9) --------------------------------
   Sits under the spec table. Deliberately quiet — it is a caveat, not a selling
   point — but --basaran-text-muted is a contrast-checked token, not a guess at
   "grey enough". The top margin is negative against the table's own bottom
   margin so the note reads as attached to the table rather than floating
   between it and the next heading. */

.basaran-product__colour-note {
	margin-block: calc(var(--basaran-space-2) * -1) var(--basaran-space-3);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--basaran-text-muted);
}