/**
 * Site header and footer.
 *
 * PRD Section 5.2. Kept separate from components.css because a Theme Part can
 * replace this chrome entirely — when the client builds a header in Elementor,
 * none of these rules apply, and keeping them in their own file makes that
 * boundary obvious.
 */

/* Skip link -------------------------------------------------------------- */

.basaran-skip-link:focus {
	position: fixed;
	inset-block-start: var(--basaran-space-1);
	inset-inline-start: var(--basaran-space-1);
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 0.75em 1.25em;
	clip: auto;
	clip-path: none;
	background: var(--basaran-cta-bg);
	color: var(--basaran-cta-text);
	border-radius: var(--basaran-radius);
	font-family: var(--basaran-font-heading);
	font-weight: 600;
}

/* Header ----------------------------------------------------------------- */

.basaran-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;

	background-color: var(--basaran-ivory);
	border-block-end: 1px solid var(--basaran-hairline);

	/* Restraint over decoration (PRD 3.1): a hairline, not a drop shadow. */
}

/* Undo the inherited Forestra header rule.
 *
 * inherited.css carries `#header { display: flex; flex-wrap: wrap;
 * justify-content: space-between; gap: 16px; align-items: center;
 * padding: 20px 0 }` — written for Forestra's own header markup, which this
 * theme does not use. Our `<header>` has `id="header"`, so it matched.
 *
 * The damage was invisible on desktop and severe on mobile. `__inner` became a
 * flex *item*, so instead of filling the bar and being centred by its own
 * `max-width` + `margin-inline: auto`, it shrank to its content. With the nav
 * hidden below 1024px only the logo and the hamburger were left, so the inner
 * measured 226px inside a 375px viewport and its auto margins centred that
 * 226px box — putting the hamburger immediately beside the logo with 90px of
 * dead space to its right. That is the "menu stuck next to the logo" report.
 *
 * `#header.basaran-header` is (1,1,0) and beats the inherited (1,0,0) without
 * `!important`. Padding is reset too: the inner supplies its own, and the extra
 * 20px block padding was stacking on top of it.
 */
#header.basaran-header {
	display: block;
	padding: 0;
}

.basaran-header__inner {
	display: flex;
	align-items: center;
	gap: var(--basaran-space-3);

	max-width: var(--basaran-container);
	margin-inline: auto;
	padding: var(--basaran-space-2) var(--basaran-space-3);
}

.basaran-header__brand {
	flex: 0 0 auto;
}

/* Reserve the lockup's box so a late-loading logo cannot shift the header.
   The height comes from Appearance → Customize as a custom property, with the
   original 44px kept as the fallback so the header still reserves its box if the
   inline <style> is ever stripped by an optimiser. */
.basaran-logo {
	display: inline-flex;
	align-items: center;
	min-height: var(--basaran-logo-h, 44px);
	text-decoration: none;
}

.basaran-logo img {
	display: block;
	max-height: var(--basaran-logo-h, 44px);
	width: auto;
}

/* The footer carries its own height: the negative lockup sits on a dark band at
   a different scale from the header, and tying them together made one of the two
   wrong whenever the other was right. */
.basaran-footer .basaran-logo {
	min-height: var(--basaran-footer-logo-h, 40px);
}

.basaran-footer .basaran-logo img {
	max-height: var(--basaran-footer-logo-h, 40px);
}

.basaran-logo__text {
	font-family: var(--basaran-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: var(--basaran-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--basaran-heading);
}

.basaran-footer .basaran-logo__text {
	color: var(--basaran-text-inverse);
}

.basaran-header__nav {
	flex: 1 1 auto;
}

.basaran-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--basaran-space-3);

	margin: 0;
	padding: 0;
	list-style: none;
}

.basaran-menu a {
	font-family: var(--basaran-font-heading);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--basaran-heading);
	text-decoration: none;
	padding-block: 0.25rem;
	border-block-end: 2px solid transparent;
	transition: color var(--basaran-transition), border-color var(--basaran-transition);
}

.basaran-menu a:hover,
.basaran-menu .current-menu-item > a {
	color: var(--basaran-olive-700);
	border-block-end-color: currentColor;
}

/* Dropdown submenus (Kurumsal) --------------------------------------------
   CSS-only, opening on hover and on keyboard focus. `:focus-within` is what
   makes it tab-navigable without JavaScript. */

.basaran-menu > .menu-item-has-children {
	position: relative;
}

/* Chevron so the parent reads as a disclosure rather than a plain link. */
.basaran-menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-inline-start: 0.45em;
	vertical-align: 0.15em;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--basaran-transition);
}

.basaran-menu > .menu-item-has-children:hover > a::after,
.basaran-menu > .menu-item-has-children:focus-within > a::after {
	transform: rotate(-135deg);
}

.basaran-menu .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 0.6rem);
	inset-inline-start: -0.6rem;
	z-index: 150;

	min-width: 14rem;
	margin: 0;
	padding: 0.35rem;
	list-style: none;

	background-color: var(--basaran-ivory);
	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
	box-shadow: 0 8px 28px rgb(37 39 33 / 0.12);

	/* Hidden via opacity rather than display:none so the transition works and
	   the links stay reachable to assistive tech during the fade. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--basaran-transition), transform var(--basaran-transition), visibility var(--basaran-transition);
}

.basaran-menu > .menu-item-has-children:hover > .sub-menu,
.basaran-menu > .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Bridges the gap between the parent link and the panel so the pointer does not
   cross dead space and close the menu. */
.basaran-menu > .menu-item-has-children > .sub-menu::before {
	content: "";
	position: absolute;
	inset-block-start: -0.6rem;
	inset-inline: 0;
	height: 0.6rem;
}

.basaran-menu .sub-menu a {
	display: block;
	padding: 0.5rem 0.6rem;
	border-radius: calc(var(--basaran-radius) - 2px);
	border-block-end: 0;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--basaran-text);
}

.basaran-menu .sub-menu a:hover,
.basaran-menu .sub-menu a:focus-visible {
	background-color: var(--basaran-sand-100);
	color: var(--basaran-heading);
}

@media (prefers-reduced-motion: reduce) {
	.basaran-menu .sub-menu,
	.basaran-menu > .menu-item-has-children > a::after { transition: none; }
}

.basaran-header__actions {
	display: flex;
	align-items: center;
	gap: var(--basaran-space-2);
	flex: 0 0 auto;
}

/* Language switcher — disclosure dropdown -------------------------------- */

.basaran-langswitch--dropdown {
	position: relative;
}

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

	padding: 0.45rem 0.65rem;
	cursor: pointer;
	list-style: none;

	font-family: var(--basaran-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--basaran-heading);

	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
	transition: border-color var(--basaran-transition), background-color var(--basaran-transition);
}

/* Suppress the native disclosure triangle — we draw our own chevron. */
.basaran-langswitch__toggle::-webkit-details-marker { display: none; }
.basaran-langswitch__toggle::marker { content: ""; }

.basaran-langswitch__toggle:hover {
	border-color: var(--basaran-olive);
	background-color: var(--basaran-sand-100);
}

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

.basaran-langswitch__chevron {
	transition: transform var(--basaran-transition);
	color: var(--basaran-text-muted);
}

.basaran-langswitch--dropdown[open] .basaran-langswitch__chevron {
	transform: rotate(180deg);
}

.basaran-langswitch__menu {
	position: absolute;
	inset-block-start: calc(100% + 0.35rem);
	/* Anchored to the inline-end so it never overflows the viewport edge, and
	   mirrors correctly under RTL. */
	inset-inline-end: 0;
	z-index: 200;

	min-width: 11rem;
	margin: 0;
	padding: 0.35rem;
	list-style: none;

	background-color: var(--basaran-ivory);
	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
	box-shadow: 0 8px 28px rgb(37 39 33 / 0.12);
}

.basaran-langswitch__menu .basaran-langswitch__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;

	padding: 0.5rem 0.6rem;
	border-radius: calc(var(--basaran-radius) - 2px);

	font-family: var(--basaran-font-body);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--basaran-text);
	text-decoration: none;
}

.basaran-langswitch__menu .basaran-langswitch__link:hover {
	background-color: var(--basaran-sand-100);
	color: var(--basaran-heading);
}

.basaran-langswitch__menu .basaran-langswitch__link.is-current {
	font-weight: 600;
	color: var(--basaran-olive-700);
}

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

/* Mobile nav toggle ------------------------------------------------------- */

.basaran-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
	cursor: pointer;
}

.basaran-nav-toggle__bar,
.basaran-nav-toggle__bar::before,
.basaran-nav-toggle__bar::after {
	display: block;
	width: 18px;
	height: 2px;
	margin-inline: auto;
	background-color: var(--basaran-heading);
	transition: transform var(--basaran-transition);
}

.basaran-nav-toggle__bar::before,
.basaran-nav-toggle__bar::after {
	content: "";
	position: relative;
}

.basaran-nav-toggle__bar::before { inset-block-start: -6px; }
.basaran-nav-toggle__bar::after  { inset-block-start: 4px; }

/* Footer ----------------------------------------------------------------- */

.basaran-footer {
	/* Deep Forest, per PRD 5.2 — the one large dark surface on the site. */
	background-color: var(--basaran-bg-inverse);
	color: var(--basaran-text-inverse);
}

/* No margin. Every section and page wrapper already carries its own generous
   bottom padding, so a margin here only added a strip of bare Soft Ivory
   between the dark CTA band and the dark footer — which read as a rendering
   fault rather than as space. */

.basaran-footer__inner {
	display: grid;
	gap: var(--basaran-space-4);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));

	max-width: var(--basaran-container);
	margin-inline: auto;
	padding: var(--basaran-space-4) var(--basaran-space-3);
}

.basaran-footer__col--brand {
	/* The blurb column reads better slightly wider than the link columns. */
	grid-column: span 1;
	max-width: 34ch;
}

.basaran-footer__heading {
	font-family: var(--basaran-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--basaran-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--basaran-sand);
	margin: 0 0 var(--basaran-space-2);
}

.basaran-footer__blurb {
	margin-block: var(--basaran-space-2) 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--basaran-sand);
}

.basaran-footer__menu,
.basaran-footer__legal,
.basaran-social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.basaran-footer__menu li + li {
	margin-block-start: 0.5rem;
}

.basaran-footer a {
	color: var(--basaran-text-inverse);
	text-decoration: none;
	font-size: 0.9375rem;
	border-block-end: 1px solid transparent;
}

.basaran-footer a:hover {
	border-block-end-color: currentColor;
}

.basaran-footer__contact {
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--basaran-sand);
}

.basaran-footer__contact p {
	margin: 0 0 0.5rem;
}

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

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

	max-width: var(--basaran-container);
	margin-inline: auto;
	padding: var(--basaran-space-2) var(--basaran-space-3);
	border-block-start: 1px solid rgba(245, 241, 232, 0.14);
}

.basaran-footer__copy {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--basaran-sand);
}

/* Developer credit, sitting on the copyright line behind a middot. The
   separator is generated rather than typed into the template so it is absent
   when the credit is, and `margin-inline` keeps it on the correct side on /ar/
   without a mirrored rule. */
.basaran-footer__credit::before {
	content: "·";
	margin-inline: 0.4rem;
	opacity: 0.55;
}

/* `.basaran-footer a` above sets 0.9375rem, which would make the credit larger
   than the copyright it sits beside; inherit instead. */
.basaran-footer__credit a {
	font-size: inherit;
	color: inherit;
	border-block-end-color: color-mix(in srgb, currentColor 45%, transparent);
}

.basaran-footer__credit a:hover,
.basaran-footer__credit a:focus-visible {
	color: var(--basaran-ivory);
	border-block-end-color: currentColor;
}

.basaran-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--basaran-space-2);
}

.basaran-footer__legal a,
.basaran-consent-link {
	font-size: 0.8125rem;
}

.basaran-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--basaran-space-2);
}

.basaran-consent-link {
	color: var(--basaran-sand);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.basaran-consent-link:hover {
	border-block-end-color: currentColor;
}

/* Mobile ----------------------------------------------------------------- */

@media (max-width: 1024px) {
	.basaran-header__inner {
		gap: var(--basaran-space-2);
		padding-inline: var(--basaran-space-2);
	}

	.basaran-nav-toggle {
		display: block;
	}

	/* The desktop menu collapses into the mega-menu panel, which already has
	   its own mobile presentation and toggle wiring. */
	.basaran-header__nav {
		display: none;
	}
}

/* Below 640px the logo, switcher, CTA and toggle cannot share a row: measured
   at 360px they forced the document to 594px wide, so the whole page scrolled
   sideways. The switcher and CTA both live in the mobile menu panel, so hiding
   them here loses no functionality.

   Note the class is `.basaran-langswitch` — an earlier rule targeted
   `.basaran-lang-switcher`, which matches nothing, so this never applied. */
@media (max-width: 640px) {
	.basaran-header__actions .basaran-langswitch,
	.basaran-header__actions .basaran-btn {
		display: none;
	}

	.basaran-header__inner {
		justify-content: space-between;
	}

	/* `min()` rather than a flat 36px: the cap exists to stop a large logo eating
	   a phone's viewport, so it must not *enlarge* a lockup the client has
	   deliberately set smaller than the cap. */
	.basaran-logo img,
	.basaran-logo {
		max-height: min(var(--basaran-logo-h, 44px), 36px);
	}

	.basaran-footer .basaran-logo img,
	.basaran-footer .basaran-logo {
		max-height: min(var(--basaran-footer-logo-h, 40px), 36px);
	}
}

/* Between 641 and 1024 there is room for the CTA but not the switcher. */
@media (min-width: 641px) and (max-width: 1024px) {
	.basaran-header__actions .basaran-langswitch {
		display: none;
	}
}

/* ==========================================================================
   Header layout options and widget areas
   (Appearance → Customize → Başlık ve Altbilgi)
   ========================================================================== */

/* Sticky is the default in the base rule above; this is the opt-out. */
.basaran-header--static {
	position: relative;
}

/* The alternative layouts apply from 1025px up only.
   Below that the header collapses to the brand plus the hamburger and the
   mobile nav takes over, so re-ordering or centring there would fight the
   existing responsive rules for no visible gain. */
@media (min-width: 1025px) {

	/* Logo at the end of the line. `row-reverse` on a logical axis, so Arabic
	   mirrors it without a second rule — see basaran_header_layout_choices(). */
	.basaran-header--end .basaran-header__inner {
		flex-direction: row-reverse;
	}

	/* Logo centred, menu on its own row beneath.
	   Grid rather than wrapped flex: the actions have to stay on the logo's row
	   while the nav spans the full width, which flex-wrap cannot express without
	   a fixed-width spacer element in the markup. */
	.basaran-header--center .basaran-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas:
			". brand actions"
			"nav nav nav";
		row-gap: var(--basaran-space-2);
		align-items: center;
	}

	.basaran-header--center .basaran-header__brand {
		grid-area: brand;
	}

	.basaran-header--center .basaran-header__nav {
		grid-area: nav;
	}

	.basaran-header--center .basaran-header__actions {
		grid-area: actions;
		justify-self: end;
	}

	.basaran-header--center .basaran-menu {
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Widget areas
   -------------------------------------------------------------------------- */

/* Announcement strip. Olive rather than ivory so it reads as a distinct band
   above the header instead of looking like a taller header. */
.basaran-header-notice {
	background-color: var(--basaran-olive);
	color: var(--basaran-text-inverse);
	font-size: 0.875rem;
	text-align: center;
}

.basaran-header-notice .basaran-widget {
	max-width: var(--basaran-container);
	margin-inline: auto;
	padding: 0.5rem var(--basaran-space-3);
}

.basaran-header-notice a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.basaran-header-notice .basaran-widget__title {
	font-size: inherit;
	margin: 0;
	display: inline;
}

/* Fifth footer column. It inherits .basaran-footer__col, so it picks up the
   grid track and column spacing already defined for the other four. */
.basaran-footer__col--widgets .basaran-widget + .basaran-widget {
	margin-block-start: var(--basaran-space-2);
}

.basaran-footer__col--widgets .basaran-widget__title,
.basaran-footer__wide .basaran-widget__title {
	font-family: var(--basaran-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: var(--basaran-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--basaran-sand);
	margin: 0 0 var(--basaran-space-1);
}

/* Full-width band under the columns, above the copyright line. */
.basaran-footer__wide {
	max-width: var(--basaran-container);
	margin-inline: auto;
	padding: var(--basaran-space-3) var(--basaran-space-3) 0;
	border-block-start: 1px solid rgb(255 255 255 / 12%);
}

.basaran-footer__wide ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Footer logo in the bottom bar
   -------------------------------------------------------------------------- */

/* The bar is `justify-content: space-between` with two children; a third would
   push the legal links to the middle. Giving the logo the full basis and the
   copyright the remainder keeps the legal row hard against the far edge. */
.basaran-footer__bar > .basaran-logo {
	flex: 0 0 auto;
	margin-inline-end: var(--basaran-space-2);
}

/* ==========================================================================
   Mobile navigation panel
   See template-parts/mobile-nav.php — the hamburger previously had no target.
   ========================================================================== */

/* Locks the page behind the overlay. `position: fixed` on <body> would jump the
   scroll position to the top; `overflow: hidden` on the root does not. */
.basaran-nav-open {
	overflow: hidden;
}

.basaran-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 300;

	display: flex;
	justify-content: flex-end;

	background-color: rgb(37 39 33 / 45%);

	opacity: 0;
	transition: opacity 200ms ease;
}

.basaran-mobile-nav[data-open="true"] {
	opacity: 1;
}

.basaran-mobile-nav__panel {
	display: flex;
	flex-direction: column;
	gap: var(--basaran-space-3);

	width: min(21rem, 88vw);
	height: 100%;
	padding: var(--basaran-space-3) var(--basaran-space-3) var(--basaran-space-4);

	background-color: var(--basaran-ivory);
	overflow-y: auto;
	overscroll-behavior: contain;

	/* Slides in from the inline end, so it enters from the right in Turkish and
	   English and from the left on /ar/ with no mirrored rule. */
	transform: translateX(100%);
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

[dir="rtl"] .basaran-mobile-nav__panel {
	transform: translateX(-100%);
}

.basaran-mobile-nav[data-open="true"] .basaran-mobile-nav__panel {
	transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.basaran-mobile-nav,
	.basaran-mobile-nav__panel {
		transition: none;
	}
}

.basaran-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--basaran-space-2);
	padding-block-end: var(--basaran-space-2);
	border-block-end: 1px solid var(--basaran-hairline);
}

.basaran-mobile-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* 44px, the minimum comfortable touch target (WCAG 2.5.5). */
	width: 44px;
	height: 44px;
	flex: 0 0 auto;

	padding: 0;
	background: none;
	border: 1px solid var(--basaran-hairline);
	border-radius: var(--basaran-radius);
	color: var(--basaran-heading);
	cursor: pointer;
}

.basaran-mobile-nav__close:hover {
	border-color: var(--basaran-olive);
	background-color: var(--basaran-sand-100);
}

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

.basaran-mobile-menu,
.basaran-mobile-menu .sub-menu,
.basaran-mobile-menu__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Parent row: link on one side, disclosure chevron on the other. The link keeps
   its own hit area so Kurumsal and Ürünler stay reachable as destinations. */
.basaran-mobile-menu__item--parent {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
}

.basaran-mobile-menu__item--parent > .basaran-mobile-menu__sub {
	grid-column: 1 / -1;
}

.basaran-mobile-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px: the smallest comfortable touch target. */
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--basaran-text-muted);
	cursor: pointer;
}

.basaran-mobile-menu__toggle svg {
	transition: transform var(--basaran-transition);
}

.basaran-mobile-menu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.basaran-mobile-menu__toggle:focus-visible {
	outline: 2px solid var(--basaran-olive-700);
	outline-offset: -4px;
	border-radius: 6px;
}

.basaran-mobile-menu > li + li {
	border-block-start: 1px solid var(--basaran-hairline);
}

.basaran-mobile-menu a {
	display: block;
	padding-block: 0.85rem;

	font-family: var(--basaran-font-heading);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--basaran-heading);
	text-decoration: none;
}

.basaran-mobile-menu a:hover,
.basaran-mobile-menu .current-menu-item > a {
	color: var(--basaran-olive-700);
}

/* Children behind a disclosure, matching the desktop dropdown.
   They were rendered permanently expanded on the reasoning that a hover
   dropdown has no touch equivalent — true, but the fix was the chevron, not
   leaving them open: four Kurumsal children pushed Blog and İletişim off the
   first glance and hid the shape of the menu. */
.basaran-mobile-menu .sub-menu,
.basaran-mobile-menu__sub {
	padding-inline-start: var(--basaran-space-2);
	padding-block-end: 0.5rem;
	border-inline-start: 2px solid var(--basaran-sand);
}

.basaran-mobile-menu .sub-menu a,
.basaran-mobile-menu__sub a {
	padding-block: 0.55rem;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--basaran-text);
}

/* `hidden` loses to the display rule on menu links without this. */
.basaran-mobile-menu__sub[hidden] {
	display: none;
}

.basaran-mobile-nav__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--basaran-space-2);
	margin-block-start: auto;
}

.basaran-mobile-nav__actions .basaran-btn {
	justify-content: center;
	text-align: center;
}

/* The switcher renders as a details/summary disclosure in the header; inside the
   panel there is room to show it open and inline. */
.basaran-mobile-nav__actions .basaran-langswitch__menu {
	position: static;
	box-shadow: none;
	min-width: 0;
}

/* The panel is the mobile presentation, so it must never appear on desktop even
   if a stale `data-open` survives a resize. */
@media (min-width: 1025px) {
	.basaran-mobile-nav {
		display: none;
	}
}

/* Social icons -------------------------------------------------------------
   The list itself is already laid out with the footer blocks above. Only the
   gap changes: these are 40px circles rather than words, so they need less
   space between them to read as a set. */

.basaran-social {
	gap: 0.75rem;
}

.basaran-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40px: comfortable to tap, and the icon keeps air around it. */
	inline-size: 40px;
	block-size: 40px;
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 50%;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--basaran-transition), border-color var(--basaran-transition);
}

.basaran-social__link:hover,
.basaran-social__link:focus-visible {
	background-color: rgb(255 255 255 / 0.12);
	border-color: rgb(255 255 255 / 0.5);
}