/**
 * SakaryaPansiyon glass navigation system.
 */

:root {
	--nav-bg: rgba(18, 18, 22, 0.58);
	--nav-text: rgba(255, 255, 255, 0.96);
	--nav-muted: rgba(255, 255, 255, 0.68);
	--nav-border: rgba(255, 255, 255, 0.14);
	--nav-shadow: 0 18px 60px rgba(0, 0, 0, 0.14);
	--nav-glow: rgba(255, 255, 255, 0.18);
	--nav-blur: 18px;
	--nav-saturation: 180%;
	--nav-height: 54px;
	--nav-radius: 0;
	--nav-ease-open: cubic-bezier(0.16, 1, 0.3, 1);
	--nav-ease-close: cubic-bezier(0.4, 0, 0.2, 1);
	--sp-whatsapp: #1bd66f;
	--sp-whatsapp-deep: #0c8f4d;
}

body.sp-theme.sp-has-mobile-contact {
	padding-bottom: 0 !important;
}

.sp-mobile-contact {
	display: none !important;
}

.sp-glass-header {
	--nav-line-opacity: 0;
	--nav-progress: 0;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 9999;
	padding-top: env(safe-area-inset-top);
	color: var(--nav-text);
	pointer-events: none;
	transition:
		color 240ms var(--nav-ease-open),
		transform 260ms var(--nav-ease-open);
}

.admin-bar .sp-glass-header {
	top: 46px;
}

.sp-glass-header.nav-theme-dark {
	--nav-bg: rgba(16, 16, 20, 0.58);
	--nav-text: rgba(255, 255, 255, 0.96);
	--nav-muted: rgba(255, 255, 255, 0.66);
	--nav-border: rgba(255, 255, 255, 0.15);
	--nav-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
	--nav-glow: rgba(255, 255, 255, 0.2);
}

.sp-glass-header.nav-theme-light {
	--nav-bg: rgba(248, 248, 250, 0.72);
	--nav-text: rgba(22, 22, 25, 0.94);
	--nav-muted: rgba(52, 52, 58, 0.64);
	--nav-border: rgba(0, 0, 0, 0.1);
	--nav-shadow: 0 18px 54px rgba(20, 22, 28, 0.1);
	--nav-glow: rgba(255, 255, 255, 0.72);
}

.sp-glass-header.nav-theme-warm {
	--nav-bg: rgba(255, 250, 239, 0.74);
	--nav-text: rgba(26, 24, 20, 0.94);
	--nav-muted: rgba(72, 62, 48, 0.66);
	--nav-border: rgba(95, 78, 48, 0.13);
	--nav-shadow: 0 18px 54px rgba(70, 54, 30, 0.1);
	--nav-glow: rgba(255, 255, 255, 0.78);
}

.sp-glass-header.is-scrolled {
	--nav-blur: 30px;
	--nav-saturation: 190%;
	--nav-line-opacity: 1;
	--nav-height: 50px;
}

.sp-glass-header.is-at-top {
	--nav-line-opacity: 0;
}

.sp-glass-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--nav-height);
	min-height: var(--nav-height);
	margin: 0;
	padding: 0 max(18px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
	overflow: hidden;
	border-radius: var(--nav-radius);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
		var(--nav-bg);
	backdrop-filter: saturate(var(--nav-saturation)) blur(var(--nav-blur));
	-webkit-backdrop-filter: saturate(var(--nav-saturation)) blur(var(--nav-blur));
	box-shadow: var(--nav-shadow);
	pointer-events: auto;
	transition:
		height 280ms var(--nav-ease-open),
		min-height 280ms var(--nav-ease-open),
		background-color 220ms var(--nav-ease-open),
		box-shadow 260ms var(--nav-ease-open),
		backdrop-filter 260ms var(--nav-ease-open),
		-webkit-backdrop-filter 260ms var(--nav-ease-open);
}

.sp-glass-header__inner::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	pointer-events: none;
	background:
		radial-gradient(circle at 86% 10%, var(--nav-glow), transparent 28%),
		linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 28%, transparent 72%, rgba(255, 255, 255, 0.1));
	opacity: 0.42;
	mix-blend-mode: screen;
}

.sp-glass-header__inner::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	content: "";
	background:
		linear-gradient(90deg, transparent, var(--nav-border), transparent),
		linear-gradient(90deg, color-mix(in srgb, var(--nav-text) 42%, transparent) calc(var(--nav-progress) * 100%), transparent 0);
	opacity: var(--nav-line-opacity);
	transform: translateZ(0);
	transition: opacity 220ms var(--nav-ease-open);
}

.sp-glass-header.is-at-top .sp-glass-header__inner {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01)),
		color-mix(in srgb, var(--nav-bg) 72%, transparent);
	box-shadow: none;
}

.sp-glass-header.is-menu-open .sp-glass-header__inner {
	color: rgba(255, 255, 255, 0.98);
	background: rgba(16, 16, 20, 0.7);
	box-shadow: none;
}

.sp-brand,
.sp-menu-toggle {
	position: relative;
	z-index: 1;
}

.sp-brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

.sp-brand a,
.sp-brand .custom-logo-link {
	color: var(--nav-text);
	text-decoration: none;
	transition: color 220ms var(--nav-ease-open), opacity 220ms var(--nav-ease-open);
}

.sp-brand .custom-logo {
	display: block;
	width: auto;
	max-width: 128px;
	max-height: 28px;
	object-fit: contain;
	filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.1));
}

.sp-brand .sp-theme-brand__text {
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1;
}

.sp-brand a::before,
.sp-brand .sp-theme-brand__text::before {
	display: none;
	content: none;
}

.sp-brand .sp-theme-brand__text strong {
	color: var(--nav-text);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
}

.sp-brand .sp-theme-brand__text span {
	margin-top: 4px;
	color: var(--nav-muted);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

.sp-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	color: var(--nav-text);
	background:
		radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.28), transparent 35%),
		rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-border) 82%, transparent);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition:
		background 260ms var(--nav-ease-open),
		box-shadow 260ms var(--nav-ease-open),
		transform 260ms var(--nav-ease-open);
}

.sp-menu-toggle::before {
	position: absolute;
	inset: 4px;
	z-index: -1;
	content: "";
	border-radius: inherit;
	background:
		radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--nav-text) 18%, transparent), transparent 64%);
	opacity: 0;
	transform: scale(0.72);
	transition:
		opacity 560ms var(--nav-ease-open),
		transform 640ms var(--nav-ease-open);
}

.sp-menu-toggle:hover,
.sp-menu-toggle:focus-visible {
	background:
		radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.38), transparent 38%),
		rgba(255, 255, 255, 0.13);
}

.sp-menu-toggle:focus-visible,
.sp-mobile-menu a:focus-visible,
.sp-floating-whatsapp:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--nav-text) 72%, #0071e3);
	outline-offset: 4px;
}

.sp-menu-line {
	position: absolute;
	left: 13px;
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 999px;
	background:
		linear-gradient(90deg, color-mix(in srgb, currentColor 72%, transparent), currentColor 48%, color-mix(in srgb, currentColor 64%, transparent));
	box-shadow:
		0 0 0 0.5px rgba(255, 255, 255, 0.12),
		0 1px 8px color-mix(in srgb, currentColor 22%, transparent);
	opacity: 0.92;
	transform-origin: center;
	transition:
		transform 620ms var(--nav-ease-open),
		opacity 420ms var(--nav-ease-open),
		top 620ms var(--nav-ease-open),
		width 520ms var(--nav-ease-open);
}

.sp-menu-line-1 {
	top: 15px;
}

.sp-menu-line-2 {
	top: 21px;
	width: 15px;
}

.sp-menu-line-3 {
	top: 27px;
}

.sp-glass-header.is-menu-open .sp-menu-toggle {
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent 58%),
		rgba(255, 255, 255, 0.12);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.16),
		0 10px 30px rgba(0, 0, 0, 0.22);
}

.sp-glass-header.is-menu-open .sp-menu-toggle::before {
	opacity: 1;
	transform: scale(1.18);
}

.sp-glass-header.is-menu-open .sp-menu-line {
	transition:
		transform 620ms var(--nav-ease-open),
		opacity 360ms var(--nav-ease-open),
		top 620ms var(--nav-ease-open),
		width 480ms var(--nav-ease-open);
}

.sp-glass-header.is-menu-open .sp-menu-line-1 {
	top: 21px;
	transform: rotate(45deg);
}

.sp-glass-header.is-menu-open .sp-menu-line-2 {
	width: 2px;
	opacity: 0;
	transform: scaleX(0.2);
}

.sp-glass-header.is-menu-open .sp-menu-line-3 {
	top: 21px;
	transform: rotate(-45deg);
}

.sp-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: block;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.96);
	background: rgba(12, 12, 16, 0.78);
	backdrop-filter: blur(28px) saturate(170%);
	-webkit-backdrop-filter: blur(28px) saturate(170%);
	clip-path: circle(0 at calc(100% - 34px) 34px);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition:
		clip-path 640ms var(--nav-ease-open),
		opacity 300ms linear,
		visibility 0s linear 640ms;
}

.admin-bar .sp-mobile-menu {
	inset-block-start: 46px;
}

.sp-mobile-menu[hidden] {
	display: block;
}

.sp-mobile-menu.is-open {
	clip-path: circle(150vmax at calc(100% - 34px) 34px);
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition:
		clip-path 640ms var(--nav-ease-open),
		opacity 220ms linear,
		visibility 0s;
}

.sp-mobile-menu.is-closing {
	transition:
		clip-path 320ms var(--nav-ease-close),
		opacity 220ms linear,
		visibility 0s linear 320ms;
}

.sp-mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at calc(100% - 42px) 42px, rgba(255, 255, 255, 0.18), transparent 19rem),
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%);
}

.sp-mobile-menu__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	padding:
		calc(env(safe-area-inset-top) + 82px)
		max(28px, env(safe-area-inset-right))
		calc(env(safe-area-inset-bottom) + 34px)
		max(28px, env(safe-area-inset-left));
	overflow-y: auto;
}

.sp-mobile-menu__panel::before,
.sp-mobile-menu__panel::after {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
}

.sp-mobile-menu__panel::before {
	background:
		radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.18), transparent 21rem),
		radial-gradient(circle at 18% 78%, rgba(67, 145, 255, 0.13), transparent 24rem);
	opacity: 0.72;
}

.sp-mobile-menu__panel::after {
	background:
		conic-gradient(from 120deg at 84% 14%, rgba(255, 255, 255, 0.09), transparent 18%, rgba(58, 196, 126, 0.08), transparent 42%, rgba(255, 255, 255, 0.06), transparent 70%);
	filter: blur(10px);
	opacity: 0.46;
}

.sp-mobile-menu__brand,
.sp-mobile-menu__list,
.sp-mobile-menu__actions {
	position: relative;
	z-index: 1;
}

.sp-mobile-menu__brand {
	margin-bottom: clamp(24px, 8vh, 58px);
	color: rgba(255, 255, 255, 0.56);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

.sp-mobile-menu__list {
	display: grid;
	gap: clamp(18px, 4.8vh, 34px);
	padding: 0;
	margin: 0;
	list-style: none;
}

.sp-mobile-menu__list li {
	opacity: 0;
	transform: translateY(18px) scale(0.992);
	transition:
		opacity 520ms var(--nav-ease-open),
		transform 620ms var(--nav-ease-open);
}

.sp-mobile-menu.is-open .sp-mobile-menu__list li {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.sp-mobile-menu.is-open .sp-mobile-menu__list li:nth-child(1) { transition-delay: 80ms; }
.sp-mobile-menu.is-open .sp-mobile-menu__list li:nth-child(2) { transition-delay: 130ms; }
.sp-mobile-menu.is-open .sp-mobile-menu__list li:nth-child(3) { transition-delay: 180ms; }
.sp-mobile-menu.is-open .sp-mobile-menu__list li:nth-child(4) { transition-delay: 230ms; }
.sp-mobile-menu.is-open .sp-mobile-menu__list li:nth-child(5) { transition-delay: 280ms; }
.sp-mobile-menu.is-open .sp-mobile-menu__list li:nth-child(6) { transition-delay: 330ms; }
.sp-mobile-menu.is-open .sp-mobile-menu__list li:nth-child(n+7) { transition-delay: 380ms; }

.sp-mobile-menu__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	color: rgba(255, 255, 255, 0.96);
	font-size: clamp(32px, 10vw, 58px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: 0;
	text-decoration: none;
	text-wrap: balance;
}

.sp-mobile-menu__list a::after {
	position: absolute;
	right: 0;
	bottom: -8px;
	left: 0;
	height: 2px;
	content: "";
	border-radius: 999px;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(27, 214, 111, 0.78), transparent);
	opacity: 0;
	transform: scaleX(0.24);
	transform-origin: left;
	transition:
		opacity 260ms var(--nav-ease-open),
		transform 420ms var(--nav-ease-open);
}

.sp-mobile-menu__list a:hover::after,
.sp-mobile-menu__list a:focus-visible::after {
	opacity: 0.72;
	transform: scaleX(1);
}

.sp-mobile-menu__actions {
	margin-top: auto;
	padding-top: clamp(32px, 9vh, 74px);
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity 500ms var(--nav-ease-open) 380ms,
		transform 560ms var(--nav-ease-open) 380ms;
}

.sp-mobile-menu.is-open .sp-mobile-menu__actions {
	opacity: 1;
	transform: translateY(0);
}

.sp-mobile-menu__actions .sp-theme-header-actions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.sp-mobile-menu__actions .sp-theme-compact-cta:only-child {
	width: 46px;
}

.sp-mobile-menu__actions .sp-theme-compact-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	width: 46px;
	height: 46px;
	min-height: 46px;
	gap: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.96);
	background: rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 8px 22px rgba(0, 0, 0, 0.2);
	text-decoration: none;
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	overflow: hidden;
	transition:
		border-color 240ms var(--nav-ease-open),
		background-color 240ms var(--nav-ease-open),
		box-shadow 240ms var(--nav-ease-open),
		transform 240ms var(--nav-ease-open);
}

.sp-mobile-menu__actions .sp-theme-compact-cta::before {
	position: absolute;
	inset: 0;
	content: "";
	border-radius: inherit;
	background:
		radial-gradient(circle at 68% 18%, rgba(255, 255, 255, 0.34), transparent 28%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 58%);
	opacity: 0.62;
	pointer-events: none;
}

.sp-mobile-menu__actions .sp-theme-compact-cta:hover,
.sp-mobile-menu__actions .sp-theme-compact-cta:focus-visible {
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.26),
		0 10px 26px rgba(0, 0, 0, 0.24);
}

.sp-mobile-menu__actions .sp-theme-cta-icon {
	position: relative;
	z-index: 1;
	display: inline-grid !important;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	place-items: center;
	border-radius: inherit;
	color: #fff;
	font-size: 0;
	background: transparent;
	box-shadow: none;
}

.sp-mobile-menu__actions .sp-theme-cta-icon::before {
	display: none;
	content: none;
}

.sp-mobile-menu__actions .sp-theme-cta-icon svg {
	position: relative;
	z-index: 1;
	display: block;
	width: 23px;
	height: 23px;
	fill: currentColor;
}

.sp-mobile-menu__actions .sp-theme-phone-cta {
	background:
		radial-gradient(circle at 64% 18%, rgba(255, 255, 255, 0.36), transparent 30%),
		linear-gradient(145deg, #4ea2ff, #006edb);
}

.sp-mobile-menu__actions .sp-theme-whatsapp-cta {
	border-color: rgba(27, 214, 111, 0.28);
	background:
		radial-gradient(circle at 64% 18%, rgba(255, 255, 255, 0.34), transparent 30%),
		linear-gradient(145deg, var(--sp-whatsapp), var(--sp-whatsapp-deep));
}

.sp-mobile-menu__actions .sp-theme-whatsapp-cta .sp-theme-cta-icon {
	background: transparent;
}

.sp-mobile-menu__actions .sp-theme-compact-cta > span:not(.sp-theme-cta-icon) {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

body.sp-menu-open {
	overflow: hidden;
	touch-action: none;
}

.sp-floating-whatsapp {
	position: fixed;
	right: max(14px, env(safe-area-inset-right));
	bottom: calc(88px + env(safe-area-inset-bottom));
	z-index: 9997;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	color: #fff;
	background:
		radial-gradient(circle at 66% 18%, rgba(255, 255, 255, 0.42), transparent 30%),
		linear-gradient(145deg, var(--sp-whatsapp), var(--sp-whatsapp-deep));
	box-shadow:
		0 20px 48px rgba(0, 0, 0, 0.22),
		0 8px 22px rgba(12, 143, 77, 0.28),
		inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	text-decoration: none;
	transform: translate3d(0, 0, 0);
	transition:
		opacity 220ms var(--nav-ease-open),
		transform 260ms var(--nav-ease-open),
		box-shadow 260ms var(--nav-ease-open);
}

.sp-floating-whatsapp__ring {
	position: absolute;
	inset: -6px;
	border: 1px solid rgba(27, 214, 111, 0.34);
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(12px) saturate(160%);
	-webkit-backdrop-filter: blur(12px) saturate(160%);
	z-index: -1;
}

.sp-floating-whatsapp__icon {
	display: block;
	fill: currentColor;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.18));
}

.sp-floating-whatsapp:hover,
.sp-floating-whatsapp:focus-visible {
	transform: translate3d(0, -2px, 0);
	box-shadow:
		0 24px 58px rgba(0, 0, 0, 0.26),
		0 10px 26px rgba(12, 143, 77, 0.32),
		inset 0 0 0 1px rgba(255, 255, 255, 0.38);
}

body.sp-menu-open .sp-floating-whatsapp {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(10px, 8px, 0) scale(0.94);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sp-glass-header__inner {
		background: color-mix(in srgb, var(--nav-bg) 92%, #fff 8%);
	}

	.sp-mobile-menu {
		background: rgba(12, 12, 16, 0.96);
	}
}

@media (min-width: 783px) {
	.admin-bar .sp-glass-header {
		top: 32px;
	}

	.admin-bar .sp-mobile-menu {
		inset-block-start: 32px;
	}
}

@media (min-width: 900px) {
	:root {
		--nav-height: 56px;
	}

	.sp-glass-header__inner {
		padding-right: max(28px, env(safe-area-inset-right));
		padding-left: max(28px, env(safe-area-inset-left));
	}

	.sp-brand .sp-theme-brand__text strong {
		font-size: 19px;
	}

	.sp-mobile-menu__panel {
		padding-right: clamp(52px, 9vw, 132px);
		padding-left: clamp(52px, 9vw, 132px);
	}

	.sp-mobile-menu__list a {
		font-size: clamp(42px, 6vw, 72px);
	}

	.sp-floating-whatsapp {
		right: max(22px, env(safe-area-inset-right));
		bottom: calc(34px + env(safe-area-inset-bottom));
	}
}

@media (max-width: 420px) {
	.sp-mobile-menu__actions .sp-theme-header-actions {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-glass-header,
	.sp-glass-header__inner,
	.sp-menu-toggle,
	.sp-menu-toggle::before,
	.sp-menu-line,
	.sp-mobile-menu,
	.sp-mobile-menu__list li,
	.sp-mobile-menu__list a::after,
	.sp-mobile-menu__actions,
	.sp-floating-whatsapp {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
		scroll-behavior: auto !important;
	}

	.sp-mobile-menu,
	.sp-mobile-menu.is-open {
		clip-path: none;
	}
}