/* ==========================================================
   GÜVENCEM MOBİLYA — STORE LOCATOR v3
   Apple Light Interface
   ----------------------------------------------------------
   PART 1-A
   Design Tokens • Local Reset • Floating Trigger • Overlay
   ========================================================== */


/* ==========================================================
   01. DESIGN TOKENS
   ========================================================== */

.gm-store-locator {
	--gm-sl-accent: var(--gm-color-brand-amber);
	--gm-sl-accent-hover: var(--gm-color-brand-amber-hover);
	--gm-sl-accent-soft:
		color-mix(
			in srgb,
			var(--gm-color-brand-amber) 10%,
			transparent
		);

	--gm-sl-ink: #17191c;
	--gm-sl-text: #30343a;
	--gm-sl-text-soft: #626971;
	--gm-sl-text-muted: #818891;
	--gm-sl-text-faint: #9ca2aa;

	--gm-sl-surface: #ffffff;
	--gm-sl-surface-soft: #f5f5f7;
	--gm-sl-surface-muted: #efeff1;
	--gm-sl-surface-hover: #f9f9fa;

	--gm-sl-border: rgba(23, 25, 28, 0.10);
	--gm-sl-border-strong: rgba(23, 25, 28, 0.16);

	--gm-sl-open: #2f7d4b;
	--gm-sl-open-bg: #edf7f0;

	--gm-sl-closed: #b64242;
	--gm-sl-closed-bg: #fbefef;

	--gm-sl-warning: #9a6518;
	--gm-sl-warning-bg: #fff6e6;

	--gm-sl-radius-sm: 14px;
	--gm-sl-radius-md: 18px;
	--gm-sl-radius-lg: 24px;
	--gm-sl-radius-xl: 30px;

	--gm-sl-shadow-sm:
		0 6px 20px rgba(16, 24, 40, 0.06);

	--gm-sl-shadow-md:
		0 18px 50px rgba(16, 24, 40, 0.10);

	--gm-sl-shadow-lg:
		0 28px 80px rgba(16, 24, 40, 0.14);

	--gm-sl-fast: 180ms ease;
	--gm-sl-motion: 340ms cubic-bezier(0.22, 1, 0.36, 1);

	--gm-sl-z-overlay: 10000;
	--gm-sl-z-store: 10010;
	--gm-sl-z-route-backdrop: 10020;
	--gm-sl-z-route-panel: 10021;
	--gm-sl-z-trigger: 10030;

	position: relative;
	z-index: var(--gm-sl-z-overlay);

	font-family:
		"Poppins",
		"Avenir Next",
		"Helvetica Neue",
		Arial,
		sans-serif;

	color: var(--gm-sl-text);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   02. LOCAL RESET
   ========================================================== */

.gm-store-locator,
.gm-store-locator *,
.gm-store-locator *::before,
.gm-store-locator *::after {
	box-sizing: border-box;
}

.gm-store-locator button,
.gm-store-locator a {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.gm-store-locator button {
	margin: 0;
	font: inherit;
}

.gm-store-locator a {
	color: inherit;
	text-decoration: none;
}

.gm-store-locator svg {
	display: block;
	flex: 0 0 auto;

	stroke-linecap: round;
	stroke-linejoin: round;
}

body.gm-store-modal-open,
body.gm-route-modal-open {
	overflow: hidden;
}


/* ==========================================================
   03. FLOATING STORE TRIGGER
   ========================================================== */

.gm-store-trigger {
	position: fixed;

	left: 50%;
	right: auto;
	bottom: max(20px, env(safe-area-inset-bottom));

	z-index: var(--gm-sl-z-trigger);

	width: 62px;
	height: 62px;

	transform: translateX(-50%);

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

	padding: 0;

	border: 1px solid rgba(23, 25, 28, 0.10);
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.94);

	color: var(--gm-sl-accent);

	box-shadow:
		0 10px 28px rgba(16, 24, 40, 0.10),
		0 2px 8px rgba(16, 24, 40, 0.05);

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);

	cursor: pointer;

	transition:
		transform var(--gm-sl-fast),
		box-shadow var(--gm-sl-fast),
		border-color var(--gm-sl-fast),
		background-color var(--gm-sl-fast),
		opacity var(--gm-sl-fast),
		visibility var(--gm-sl-fast);
}

.gm-store-trigger::before {
	content: "";

	position: absolute;
	inset: 5px;

	border: 1px solid rgba(244, 123, 32, 0.10);
	border-radius: inherit;

	pointer-events: none;
}

.gm-store-trigger:hover {
		transform:
		translateX(-50%)
		translateY(-3px);

	border-color: rgba(244, 123, 32, 0.26);

	background: #ffffff;

	box-shadow:
		0 16px 36px rgba(16, 24, 40, 0.13),
		0 3px 10px rgba(16, 24, 40, 0.05);
}

.gm-store-trigger:active {
	transform:
		translateX(-50%)
		scale(0.96);
}

.gm-store-trigger:focus-visible {
	outline: 2px solid rgba(244, 123, 32, 0.50);
	outline-offset: 4px;
}

.gm-store-trigger-icon {
	position: relative;
	z-index: 1;

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

	width: 48px;
	height: 48px;
}

.gm-store-trigger-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gm-store-locator.is-open .gm-store-trigger {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transform:
		translateX(-50%)
		scale(0.90);
}


/* ==========================================================
   04. NEAREST STORE CONTROL
   ========================================================== */

.gm-store-nearest {
	margin: 0 24px 18px;
	padding: 16px;

	border: 1px solid var(--gm-sl-border);
	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 2px 8px rgba(16, 24, 40, 0.035);
}

.gm-store-nearest-button {
	width: 100%;

	display: flex;
	align-items: center;
	gap: 10px;

	padding: 0;

	border: 0;

	background: transparent;
	color: var(--gm-sl-ink);

	cursor: pointer;

	text-align: left;
}

.gm-store-nearest-button > span {
	flex: 0 0 auto;

	display: grid;
	place-items: center;

	width: 34px;
	height: 34px;

	border-radius: 50%;

	background: var(--gm-sl-accent-soft);
	color: var(--gm-sl-accent);

	font-size: 19px;
	line-height: 1;
}

.gm-store-nearest-button strong {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.gm-store-nearest-button.is-loading {
	opacity: 0.58;
	cursor: progress;
}

.gm-store-nearest-button.is-complete > span {
	background: var(--gm-sl-open-bg);
	color: var(--gm-sl-open);
}

.gm-store-nearest-message {
	margin: 8px 0 0 44px;

	color: var(--gm-sl-text-muted);

	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;
}

.gm-store-distance {
	display: inline-flex;
	align-items: center;

	margin: 10px 0 0;
	padding: 6px 10px;

	border-radius: 999px;

	background: var(--gm-sl-accent-soft);

	color: #a95617;

	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
}

.gm-store-distance[hidden] {
	display: none;
}

.gm-store-card.is-nearest {
	border-color: rgba(244, 123, 32, 0.28);
}

.gm-store-card.is-nearest .gm-store-distance::before {
	content: "En yakın · ";
}


/* ==========================================================
   05. MAIN PAGE OVERLAY
   ========================================================== */

.gm-store-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--gm-sl-z-overlay);

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	background: rgba(28, 31, 36, 0.18);

	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);

	transition:
		visibility 0s linear 260ms,
		opacity 240ms ease;
}

.gm-store-locator.is-open .gm-store-overlay {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;

	transition-delay: 0s;
}


/* ==========================================================
   06. MOBILE TRIGGER POSITION
   ========================================================== */

@media (max-width: 600px) {

	.gm-store-trigger {
		right: auto;
		left: 50%;

		bottom: max(
			24px,
			calc(18px + env(safe-area-inset-bottom))
		);

		width: 58px;
		height: 58px;

		transform: translateX(-50%);
	}

	.gm-store-trigger:hover {
		transform:
			translateX(-50%)
			translateY(-2px);
	}

	.gm-store-trigger:active {
		transform:
			translateX(-50%)
			scale(0.96);
	}

	.gm-store-locator.is-open .gm-store-trigger {
		transform:
			translateX(-50%)
			scale(0.90);
	}

}


/* ==========================================================
   07. TABLET TRIGGER
   ========================================================== */

@media (min-width: 601px) and (max-width: 820px) {

	.gm-store-trigger {
		right: max(18px, env(safe-area-inset-right));
		bottom: max(18px, env(safe-area-inset-bottom));
	}

}


/* ==========================================================
   08. ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.gm-store-trigger,
	.gm-store-overlay,
	.gm-store-nearest-button {
		transition: none !important;
	}

}

@media (prefers-contrast: more) {

	.gm-store-trigger,
	.gm-store-nearest {
		border-width: 2px;
	}

}

/* ==========================================================
   GÜVENCEM MOBİLYA — STORE LOCATOR v3
   Apple Light Interface
   ----------------------------------------------------------
   PART 1-B
   Store Panel • Header • Close • Scroll • Responsive
   ========================================================== */


/* ==========================================================
   09. STORE PANEL
   ========================================================== */

.gm-store-sheet {
	position: fixed;

	right: 24px;
	bottom: 24px;
	z-index: var(--gm-sl-z-store);

	width: min(580px, calc(100vw - 48px));
	max-height: min(86vh, 860px);

	display: flex;
	flex-direction: column;

	padding: 0;

	overflow: hidden;

	border: 1px solid var(--gm-sl-border);
	border-radius: var(--gm-sl-radius-xl);

	background: var(--gm-sl-surface-soft);

	box-shadow: var(--gm-sl-shadow-lg);

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transform:
		translateY(18px)
		scale(0.985);

	transform-origin: bottom right;

	transition:
		visibility 0s linear 340ms,
		opacity 220ms ease,
		transform var(--gm-sl-motion);

	isolation: isolate;
}

.gm-store-sheet::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 0;

	border-radius: inherit;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.92) 0%,
			rgba(248, 248, 250, 0.96) 100%
		);

	pointer-events: none;
}

.gm-store-sheet::after {
	content: "";

	position: absolute;
	inset: 1px;
	z-index: 0;

	border-radius:
		calc(var(--gm-sl-radius-xl) - 1px);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.96);

	pointer-events: none;
}

.gm-store-sheet > * {
	position: relative;
	z-index: 1;
}

.gm-store-locator.is-open .gm-store-sheet {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;

	transform:
		translateY(0)
		scale(1);

	transition-delay: 0s;
}


/* ==========================================================
   10. STORE PANEL HEADER
   ========================================================== */

.gm-store-sheet-header {
	position: relative;
	z-index: 4;

	flex: 0 0 auto;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;

	min-height: 102px;

	padding:
		26px
		28px
		22px;

	border-bottom: 1px solid var(--gm-sl-border);

	background: rgba(255, 255, 255, 0.88);

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.gm-store-sheet-header h2 {
	margin: 0;

	color: var(--gm-sl-ink);

	font-size: clamp(28px, 2.5vw, 32px);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.15;
}


/* ==========================================================
   11. STORE PANEL CLOSE BUTTON
   ========================================================== */

.gm-store-close {
	flex: 0 0 auto;

	width: 48px;
	height: 48px;

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

	padding: 0;

	border: 1px solid var(--gm-sl-border);
	border-radius: 50%;

	background: #ffffff;

	color: var(--gm-sl-text);

	box-shadow: var(--gm-sl-shadow-sm);

	cursor: pointer;

	transition:
		color var(--gm-sl-fast),
		background-color var(--gm-sl-fast),
		border-color var(--gm-sl-fast),
		box-shadow var(--gm-sl-fast),
		transform var(--gm-sl-fast);
}

.gm-store-close:hover {
	border-color: rgba(244, 123, 32, 0.24);

	background: #fff8f2;

	color: var(--gm-sl-accent);

	box-shadow:
		0 8px 22px rgba(16, 24, 40, 0.08);

	transform: translateY(-1px);
}

.gm-store-close:active {
	transform: scale(0.96);
}

.gm-store-close:focus-visible {
	outline: 2px solid rgba(244, 123, 32, 0.48);
	outline-offset: 3px;
}

.gm-store-close svg {
	width: 18px;
	height: 18px;

	pointer-events: none;
}


/* ==========================================================
   12. STORE LIST SCROLL AREA
   ========================================================== */

.gm-store-list {
	position: relative;
	z-index: 2;

	flex: 1 1 auto;

	display: block;

	min-height: 0;

	padding:
		6px
		24px
		28px;

	overflow-x: hidden;
	overflow-y: auto;

	background: transparent;

	scroll-behavior: smooth;
	scroll-padding-top: 14px;

	scrollbar-width: thin;
	scrollbar-color:
		rgba(23, 25, 28, 0.18)
		transparent;

	-webkit-overflow-scrolling: touch;

	overscroll-behavior: contain;
}

.gm-store-list::-webkit-scrollbar {
	width: 6px;
}

.gm-store-list::-webkit-scrollbar-track {
	background: transparent;
}

.gm-store-list::-webkit-scrollbar-thumb {
	border: 1px solid transparent;
	border-radius: 999px;

	background:
		rgba(23, 25, 28, 0.16);

	background-clip: padding-box;
}

.gm-store-list::-webkit-scrollbar-thumb:hover {
	background:
		rgba(23, 25, 28, 0.26);

	background-clip: padding-box;
}


/* ==========================================================
   13. MOBILE PANEL HANDLE
   ========================================================== */

.gm-sheet-handle {
	display: none;
}


/* ==========================================================
   14. EMPTY STATE
   ========================================================== */

.gm-store-empty {
	margin: 16px 0 0;
	padding: 28px 22px;

	border: 1px solid var(--gm-sl-border);
	border-radius: var(--gm-sl-radius-md);

	background: #ffffff;

	color: var(--gm-sl-text-muted);

	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;

	text-align: center;
}


/* ==========================================================
   15. TABLET FOUNDATION
   ========================================================== */

@media (max-width: 820px) {

	.gm-store-sheet {
		right: 16px;
		bottom: 16px;

		width: min(560px, calc(100vw - 32px));
		max-height: min(89vh, 860px);
	}

}


/* ==========================================================
   16. MOBILE FOUNDATION
   ========================================================== */

@media (max-width: 600px) {

	.gm-store-sheet {
		right: 0;
		bottom: 0;
		left: 0;

		width: 100%;
		max-height: min(92dvh, 900px);

		border-right: 0;
		border-bottom: 0;
		border-left: 0;

		border-radius:
			28px
			28px
			0
			0;

		transform:
			translateY(105%);
	}

	.gm-store-locator.is-open .gm-store-sheet {
		transform: translateY(0);
	}

	.gm-sheet-handle {
		position: absolute;

		top: 10px;
		left: 50%;
		z-index: 7;

		width: 42px;
		height: 4px;

		display: block;

		border-radius: 999px;

		background: rgba(23, 25, 28, 0.18);

		transform: translateX(-50%);
	}

	.gm-store-sheet-header {
		min-height: 92px;

		padding:
			30px
			20px
			18px;
	}

	.gm-store-sheet-header h2 {
		font-size: 28px;
	}

	.gm-store-close {
		width: 44px;
		height: 44px;
	}

	.gm-store-list {
		padding:
			4px
			16px
			calc(28px + env(safe-area-inset-bottom));
	}

}


/* ==========================================================
   17. SMALL MOBILE
   ========================================================== */

@media (max-width: 390px) {

	.gm-store-sheet-header h2 {
		font-size: 26px;
	}

	.gm-store-list {
		padding-right: 14px;
		padding-left: 14px;
	}

}


/* ==========================================================
   18. SHORT VIEWPORT
   ========================================================== */

@media (max-height: 720px) {

	.gm-store-sheet {
		max-height: min(94vh, 760px);
	}

	.gm-store-sheet-header {
		min-height: 82px;

		padding-top: 22px;
		padding-bottom: 16px;
	}

	.gm-store-list {
		padding-bottom:
			calc(22px + env(safe-area-inset-bottom));
	}

}


/* ==========================================================
   19. MOBILE LANDSCAPE
   ========================================================== */

@media
	(max-width: 900px)
	and (max-height: 520px)
	and (orientation: landscape) {

	.gm-store-sheet {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;

		width: min(720px, calc(100vw - 32px));
		max-height: calc(100dvh - 24px);

		border: 1px solid var(--gm-sl-border);
		border-radius: 24px;

		transform:
			translate(-50%, -50%)
			scale(0.98);

		transform-origin: center;
	}

	.gm-store-locator.is-open .gm-store-sheet {
		transform:
			translate(-50%, -50%)
			scale(1);
	}

	.gm-sheet-handle {
		display: none;
	}

	.gm-store-sheet-header {
		min-height: 74px;

		padding:
			14px
			20px;
	}

	.gm-store-sheet-header h2 {
		font-size: 24px;
	}

	.gm-store-list {
		padding:
			4px
			20px
			18px;
	}

}


/* ==========================================================
   20. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.gm-store-sheet,
	.gm-store-close {
		transition: none !important;
	}

}


/* ==========================================================
   21. HIGH CONTRAST
   ========================================================== */

@media (prefers-contrast: more) {

	.gm-store-sheet,
	.gm-store-close,
	.gm-store-empty {
		border-width: 2px;
	}

}

/* ==========================================================
   GÜVENCEM MOBİLYA — STORE LOCATOR v3
   Apple Light Interface
   ----------------------------------------------------------
   PART 2-A
   Store Cards • Status • Address • Actions • Mobile Readability
   ========================================================== */


/* ==========================================================
   22. STORE CARD
   ========================================================== */

.gm-store-card {
	position: relative;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"distance"
		"address"
		"meta"
		"actions";

	gap: 0;

	margin: 14px 0 0;
	padding: 24px;

	border: 1px solid var(--gm-sl-border);
	border-radius: 24px;

	background: #ffffff;

	box-shadow:
		0 6px 22px rgba(16, 24, 40, 0.045);

	transition:
		transform var(--gm-sl-fast),
		box-shadow var(--gm-sl-fast),
		border-color var(--gm-sl-fast),
		background-color var(--gm-sl-fast);
}

.gm-store-card:first-child {
	margin-top: 8px;
}

.gm-store-card:last-child {
	margin-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {

	.gm-store-card:hover {
		transform: translateY(-2px);

		border-color: rgba(23, 25, 28, 0.14);

		box-shadow:
			0 12px 30px rgba(16, 24, 40, 0.075);
	}

}


/* ==========================================================
   23. STORE CARD HEADER
   ========================================================== */

.gm-store-card-head {
	grid-area: head;

	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 18px;

	min-width: 0;
}

.gm-store-card-head h3 {
	min-width: 0;

	margin: 0;

	color: var(--gm-sl-ink);

	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.25;

	text-wrap: balance;
}


/* ==========================================================
   24. STORE STATUS
   ========================================================== */

.gm-store-status {
	flex: 0 0 auto;

	display: inline-flex;
	align-items: center;

	gap: 7px;

	max-width: 210px;
	min-height: 32px;

	padding: 7px 11px;

	border-radius: 999px;

	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;

	text-transform: none;
	white-space: nowrap;

	overflow: hidden;
	text-overflow: ellipsis;
}

.gm-store-status::before {
	content: "";

	flex: 0 0 auto;

	width: 7px;
	height: 7px;

	border-radius: 50%;
}

.gm-store-status > span {
	display: block;

	min-width: 0;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* Open */

.gm-store-status.is-open {
	border: 1px solid rgba(47, 125, 75, 0.12);

	background: var(--gm-sl-open-bg);

	color: var(--gm-sl-open);
}

.gm-store-status.is-open::before {
	background: var(--gm-sl-open);

	box-shadow:
		0 0 0 4px rgba(47, 125, 75, 0.08);
}


/* Closed */

.gm-store-status.is-closed {
	border: 1px solid rgba(182, 66, 66, 0.12);

	background: var(--gm-sl-closed-bg);

	color: var(--gm-sl-closed);
}

.gm-store-status.is-closed::before {
	background: var(--gm-sl-closed);

	box-shadow:
		0 0 0 4px rgba(182, 66, 66, 0.08);
}


/* Closing soon */

.gm-store-status.is-closing-soon {
	border: 1px solid rgba(154, 101, 24, 0.12);

	background: var(--gm-sl-warning-bg);

	color: var(--gm-sl-warning);
}

.gm-store-status.is-closing-soon::before {
	background: var(--gm-sl-warning);

	box-shadow:
		0 0 0 4px rgba(154, 101, 24, 0.08);
}


/* ==========================================================
   25. STORE DISTANCE
   ========================================================== */

.gm-store-card .gm-store-distance {
	grid-area: distance;

	justify-self: start;

	margin-top: 12px;
}


/* ==========================================================
   26. STORE ADDRESS
   ========================================================== */

.gm-store-address {
	grid-area: address;

	max-width: 100%;

	margin: 16px 0 0;

	color: var(--gm-sl-text-soft);

	font-size: 15px;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.75;
}


/* ==========================================================
   27. STORE META
   ========================================================== */

.gm-store-meta {
	grid-area: meta;

	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 10px;

	margin: 14px 0 0;
}

.gm-store-hours {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	color: var(--gm-sl-text-muted);

	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.5;
}

.gm-store-hours::before {
	content: "";

	flex: 0 0 auto;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background: var(--gm-sl-accent);
}


/* ==========================================================
   28. STORE ACTION AREA
   ========================================================== */

.gm-store-actions {
	grid-area: actions;

	position: relative;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 10px;

	margin-top: 20px;
	padding-top: 18px;

	border-top: 1px solid var(--gm-sl-border);
}


/* ==========================================================
   29. SHARED ACTION BUTTON
   ========================================================== */

.gm-store-call-button,
.gm-route-button {
	position: relative;

	min-width: 0;
	min-height: 66px;

	display: flex;
	align-items: center;

	gap: 13px;

	padding: 11px 14px;

	overflow: hidden;

	border: 1px solid var(--gm-sl-border);
	border-radius: 18px;

	background: #f8f8fa;

	color: var(--gm-sl-text);

	box-shadow:
		0 2px 8px rgba(16, 24, 40, 0.025);

	text-align: left;

	cursor: pointer;

	transition:
		transform var(--gm-sl-fast),
		box-shadow var(--gm-sl-fast),
		border-color var(--gm-sl-fast),
		background-color var(--gm-sl-fast),
		color var(--gm-sl-fast);
}

.gm-store-call-button:hover,
.gm-route-button:hover {
	transform: translateY(-1px);

	border-color: rgba(244, 123, 32, 0.22);

	background: #ffffff;

	box-shadow:
		0 8px 20px rgba(16, 24, 40, 0.065);
}

.gm-store-call-button:active,
.gm-route-button:active {
	transform: scale(0.985);
}

.gm-store-call-button:focus-visible,
.gm-route-button:focus-visible {
	outline: 2px solid rgba(244, 123, 32, 0.46);
	outline-offset: 3px;
}


/* ==========================================================
   30. ACTION ICON
   ========================================================== */

.gm-store-action-icon {
	position: relative;
	z-index: 1;

	flex: 0 0 auto;

	width: 42px;
	height: 42px;

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

	border: 1px solid rgba(244, 123, 32, 0.14);
	border-radius: 14px;

	background: #fff7f0;

	color: var(--gm-sl-accent);

	transition:
		transform var(--gm-sl-fast),
		border-color var(--gm-sl-fast),
		background-color var(--gm-sl-fast);
}

.gm-store-action-icon svg {
	width: 19px;
	height: 19px;

	pointer-events: none;
}

.gm-store-call-button:hover .gm-store-action-icon,
.gm-route-button:hover .gm-store-action-icon {
	transform: scale(1.035);

	border-color: rgba(244, 123, 32, 0.22);

	background: #fff2e8;
}


/* ==========================================================
   31. ACTION CONTENT
   ========================================================== */

.gm-store-action-content {
	position: relative;
	z-index: 1;

	min-width: 0;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	gap: 3px;
}

.gm-store-action-content small {
	display: block;

	margin: 0;

	color: var(--gm-sl-text-muted);

	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;

	text-transform: none;
}

.gm-store-action-content strong {
	display: block;

	max-width: 100%;

	overflow: hidden;

	color: var(--gm-sl-ink);

	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.35;

	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ==========================================================
   32. CALL BUTTON
   ========================================================== */

.gm-store-call-button {
	text-decoration: none;
}


/* ==========================================================
   33. ROUTE BUTTON
   ========================================================== */

.gm-route-button {
	width: 100%;

	appearance: none;
	-webkit-appearance: none;
}

.gm-route-button::after {
	content: "→";

	flex: 0 0 auto;

	margin-left: auto;

	color: var(--gm-sl-accent);

	font-size: 18px;
	font-weight: 500;
	line-height: 1;

	transition:
		transform var(--gm-sl-fast),
		color var(--gm-sl-fast);
}

.gm-route-button:hover::after {
	transform: translateX(3px);

	color: var(--gm-sl-accent-hover);
}


/* ==========================================================
   34. TABLET STORE CARD
   ========================================================== */

@media (max-width: 820px) {

	.gm-store-card {
		padding: 22px;
	}

	.gm-store-actions {
		gap: 9px;
	}

	.gm-store-call-button,
	.gm-route-button {
		min-height: 64px;
	}

}


/* ==========================================================
   35. MOBILE STORE CARD
   ========================================================== */

@media (max-width: 600px) {

	.gm-store-card {
		margin-top: 12px;
		padding: 20px;

		border-radius: 22px;
	}

	.gm-store-card-head {
		flex-direction: column;
		align-items: flex-start;

		gap: 10px;
	}

	.gm-store-card-head h3 {
		font-size: 24px;
		line-height: 1.22;
	}

	.gm-store-status {
		max-width: 100%;
		min-height: 34px;

		padding: 8px 12px;

		font-size: 13px;
	}

	.gm-store-address {
		margin-top: 14px;

		font-size: 16px;
		line-height: 1.75;
	}

	.gm-store-hours {
		font-size: 15px;
	}

	.gm-store-actions {
		grid-template-columns: 1fr;

		gap: 9px;

		margin-top: 18px;
		padding-top: 16px;
	}

	.gm-store-call-button,
	.gm-route-button {
		min-height: 70px;

		padding: 12px 14px;

		border-radius: 18px;
	}

	.gm-store-action-icon {
		width: 44px;
		height: 44px;
	}

	.gm-store-action-content small {
		font-size: 12px;
	}

	.gm-store-action-content strong {
		font-size: 17px;
	}

}


/* ==========================================================
   36. NARROW MOBILE
   ========================================================== */

@media (max-width: 390px) {

	.gm-store-card {
		padding: 18px;
	}

	.gm-store-card-head h3 {
		font-size: 22px;
	}

	.gm-store-address {
		font-size: 15px;
	}

	.gm-store-hours {
		font-size: 14px;
	}

	.gm-store-action-content strong {
		font-size: 16px;
	}

}


/* ==========================================================
   37. SHORT VIEWPORT
   ========================================================== */

@media (max-height: 720px) {

	.gm-store-card {
		padding-top: 18px;
		padding-bottom: 18px;
	}

	.gm-store-actions {
		margin-top: 16px;
		padding-top: 14px;
	}

	.gm-store-call-button,
	.gm-route-button {
		min-height: 62px;
	}

}


/* ==========================================================
   38. ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.gm-store-card,
	.gm-store-call-button,
	.gm-route-button,
	.gm-store-action-icon,
	.gm-route-button::after {
		transition: none !important;
	}

}

@media (prefers-contrast: more) {

	.gm-store-card,
	.gm-store-call-button,
	.gm-route-button,
	.gm-store-status {
		border-width: 2px;
	}

}

/* ==========================================================
   GÜVENCEM MOBİLYA — STORE LOCATOR v3
   Apple Light Interface
   ----------------------------------------------------------
   PART 2-B
   Route Sheet • App Options • Responsive
   ========================================================== */


/* ==========================================================
   39. ROUTE SHEET ROOT
   ========================================================== */

.gm-route-sheet {
	position: fixed;
	inset: 0;
	z-index: var(--gm-sl-z-route-backdrop);

	visibility: hidden;
	opacity: 0;
	pointer-events: none;

	transition:
		opacity 240ms ease,
		visibility 0s linear 240ms;
}

.gm-route-sheet.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;

	transition-delay: 0s;
}


/* ==========================================================
   40. ROUTE BACKDROP
   ========================================================== */

.gm-route-sheet-backdrop {
	position: absolute;
	inset: 0;

	background: rgba(28, 31, 36, 0.18);

	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);

	opacity: 0;

	transition: opacity 240ms ease;

	cursor: zoom-out;
}

.gm-route-sheet.is-open
.gm-route-sheet-backdrop {
	opacity: 1;
}


/* ==========================================================
   41. ROUTE PANEL
   ========================================================== */

.gm-route-sheet-panel {
	position: absolute;

	top: 50%;
	left: 50%;

	width: min(560px, calc(100vw - 36px));
	max-height: min(90vh, 820px);

	display: flex;
	flex-direction: column;

	overflow: hidden;

	border: 1px solid var(--gm-sl-border);
	border-radius: 30px;

	background: var(--gm-sl-surface-soft);

	box-shadow: var(--gm-sl-shadow-lg);

	transform:
		translate(-50%, -50%)
		scale(0.985);

	opacity: 0;

	transition:
		transform var(--gm-sl-motion),
		opacity 220ms ease;

	isolation: isolate;
}

.gm-route-sheet-panel::before {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 0;

	border-radius: inherit;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.98) 0%,
			rgba(247, 247, 249, 0.97) 100%
		);

	pointer-events: none;
}

.gm-route-sheet-panel > * {
	position: relative;
	z-index: 1;
}

.gm-route-sheet.is-open
.gm-route-sheet-panel {
	transform:
		translate(-50%, -50%)
		scale(1);

	opacity: 1;
}


/* ==========================================================
   42. ROUTE SHEET HANDLE
   ========================================================== */

.gm-route-sheet-handle {
	display: none;
}


/* ==========================================================
   43. ROUTE CLOSE BUTTON
   ========================================================== */

.gm-route-cancel {
	position: absolute;

	top: 18px;
	right: 18px;

	z-index: 5;

	width: 46px;
	height: 46px;

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

	padding: 0;

	border: 1px solid var(--gm-sl-border);
	border-radius: 50%;

	background: #ffffff;

	color: var(--gm-sl-text);

	box-shadow: var(--gm-sl-shadow-sm);

	cursor: pointer;

	transition:
		transform var(--gm-sl-fast),
		border-color var(--gm-sl-fast),
		background-color var(--gm-sl-fast),
		color var(--gm-sl-fast),
		box-shadow var(--gm-sl-fast);
}

.gm-route-cancel:hover {
	transform: translateY(-1px);

	border-color: rgba(244, 123, 32, 0.22);

	background: #fff8f2;

	color: var(--gm-sl-accent);

	box-shadow:
		0 8px 22px rgba(16, 24, 40, 0.08);
}

.gm-route-cancel:active {
	transform: scale(0.96);
}

.gm-route-cancel:focus-visible {
	outline: 2px solid rgba(244, 123, 32, 0.48);
	outline-offset: 3px;
}

.gm-route-cancel svg {
	width: 18px;
	height: 18px;
}


/* ==========================================================
   44. ROUTE INTRO
   ========================================================== */

.gm-route-sheet-intro {
	position: relative;

	flex: 0 0 auto;

	display: flex;
	flex-direction: column;
	align-items: center;

	padding:
		40px
		78px
		26px;

	text-align: center;

	border-bottom: 1px solid var(--gm-sl-border);

	background: rgba(255, 255, 255, 0.82);
}


/* ==========================================================
   45. ROUTE LOCATION ICON
   ========================================================== */

.gm-route-sheet-location-icon {
	width: 66px;
	height: 66px;

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

	margin-bottom: 18px;

	border: 1px solid rgba(244, 123, 32, 0.16);
	border-radius: 22px;

	background: #fff7f0;

	color: var(--gm-sl-accent);

	box-shadow:
		0 8px 20px rgba(16, 24, 40, 0.055);
}

.gm-route-sheet-location-icon svg {
	width: 30px;
	height: 30px;
}


/* ==========================================================
   46. ROUTE TITLE
   ========================================================== */

.gm-route-sheet-intro h3 {
	max-width: 350px;

	margin: 0 auto;

	color: var(--gm-sl-ink);

	font-size: clamp(26px, 2.5vw, 30px);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.2;

	text-wrap: balance;
}


/* ==========================================================
   47. ROUTE DESCRIPTION
   ========================================================== */

.gm-route-sheet-intro p {
	max-width: 360px;

	margin:
		12px
		auto
		0;

	color: var(--gm-sl-text-muted);

	font-size: 14px;
	font-weight: 400;
	line-height: 1.65;

	text-wrap: balance;
}

.gm-route-sheet-intro p strong,
.gm-route-store-name {
	color: var(--gm-sl-ink);

	font-weight: 600;
}


/* ==========================================================
   48. ROUTE OPTIONS
   ========================================================== */

.gm-route-options {
	flex: 1 1 auto;

	display: grid;
	grid-template-columns: 1fr;

	gap: 10px;

	min-height: 0;

	padding:
		22px
		24px
		18px;

	overflow-x: hidden;
	overflow-y: auto;

	scrollbar-width: thin;
	scrollbar-color:
		rgba(23, 25, 28, 0.16)
		transparent;

	-webkit-overflow-scrolling: touch;

	overscroll-behavior: contain;
}

.gm-route-options::-webkit-scrollbar {
	width: 6px;
}

.gm-route-options::-webkit-scrollbar-track {
	background: transparent;
}

.gm-route-options::-webkit-scrollbar-thumb {
	border-radius: 999px;

	background: rgba(23, 25, 28, 0.14);
}


/* ==========================================================
   49. ROUTE OPTION
   ========================================================== */

.gm-route-option {
	position: relative;

	width: 100%;
	min-height: 78px;

	display: grid;
	grid-template-columns:
		50px
		minmax(0, 1fr)
		auto;

	align-items: center;

	gap: 14px;

	padding:
		13px
		16px;

	border: 1px solid var(--gm-sl-border);
	border-radius: 20px;

	background: #ffffff;

	color: var(--gm-sl-text);

	box-shadow:
		0 2px 8px rgba(16, 24, 40, 0.025);

	text-align: left;

	appearance: none;
	-webkit-appearance: none;

	cursor: pointer;

	transition:
		transform var(--gm-sl-fast),
		border-color var(--gm-sl-fast),
		background-color var(--gm-sl-fast),
		box-shadow var(--gm-sl-fast);
}

.gm-route-option:hover {
	transform: translateY(-2px);

	border-color: rgba(23, 25, 28, 0.14);

	background: #ffffff;

	box-shadow:
		0 10px 24px rgba(16, 24, 40, 0.07);
}

.gm-route-option:active {
	transform: scale(0.987);
}

.gm-route-option:focus-visible {
	outline: 2px solid rgba(244, 123, 32, 0.46);
	outline-offset: 3px;
}


/* ==========================================================
   50. ROUTE APP ICON
   ========================================================== */

.gm-route-app-icon {
	width: 50px;
	height: 50px;

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

	overflow: hidden;

	border: 1px solid var(--gm-sl-border);
	border-radius: 16px;

	background: #f7f7f9;

	box-shadow:
		0 2px 8px rgba(16, 24, 40, 0.035);

	transition:
		transform var(--gm-sl-fast),
		box-shadow var(--gm-sl-fast);
}

.gm-route-app-icon svg {
	width: 30px;
	height: 30px;
}

.gm-route-option:hover
.gm-route-app-icon {
	transform: scale(1.035);

	box-shadow:
		0 5px 14px rgba(16, 24, 40, 0.055);
}


/* ==========================================================
   51. ROUTE CONTENT
   ========================================================== */

.gm-route-option-content {
	min-width: 0;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	gap: 4px;
}

.gm-route-option-content strong {
	display: block;

	max-width: 100%;

	overflow: hidden;

	color: var(--gm-sl-ink);

	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.gm-route-option-content small {
	display: block;

	max-width: 100%;

	overflow: hidden;

	color: var(--gm-sl-text-muted);

	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;

	text-overflow: ellipsis;
	white-space: nowrap;
}


/* ==========================================================
   52. ROUTE ARROW
   ========================================================== */

.gm-route-option-arrow {
	min-width: 24px;

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

	color: #a1a5ab;

	font-size: 19px;
	font-weight: 500;

	transition:
		transform var(--gm-sl-fast),
		color var(--gm-sl-fast);
}

.gm-route-option:hover
.gm-route-option-arrow {
	transform: translateX(4px);

	color: var(--gm-sl-accent);
}


/* ==========================================================
   53. ROUTE BRAND HOVERS
   ========================================================== */

.gm-route-google:hover {
	border-color: rgba(66, 133, 244, 0.24);
}

.gm-route-apple:hover {
	border-color: rgba(23, 25, 28, 0.16);
}

.gm-route-yandex:hover {
	border-color: rgba(255, 82, 82, 0.22);
}

.gm-route-waze:hover {
	border-color: rgba(0, 174, 239, 0.22);
}


/* ==========================================================
   54. ROUTE NOTE
   ========================================================== */

.gm-route-sheet-note {
	flex: 0 0 auto;

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

	gap: 8px;

	margin: 0;

	padding:
		15px
		24px
		18px;

	border-top: 1px solid var(--gm-sl-border);

	background: #f8f8fa;

	color: var(--gm-sl-text-muted);

	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;

	text-align: center;
}

.gm-route-sheet-note svg {
	width: 14px;
	height: 14px;

	color: var(--gm-sl-accent);
}


/* ==========================================================
   55. MOBILE ROUTE SHEET
   ========================================================== */

@media (max-width: 640px) {

	.gm-route-sheet-panel {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;

		width: 100%;
		max-width: none;

		max-height: min(92dvh, 900px);

		border-right: 0;
		border-bottom: 0;
		border-left: 0;

		border-radius:
			28px
			28px
			0
			0;

		transform:
			translateY(105%);

		opacity: 1;
	}

	.gm-route-sheet.is-open
	.gm-route-sheet-panel {
		transform: translateY(0);
	}

	.gm-route-sheet-handle {
		position: absolute;

		top: 10px;
		left: 50%;

		width: 42px;
		height: 4px;

		display: block;

		border-radius: 999px;

		background: rgba(23, 25, 28, 0.18);

		transform: translateX(-50%);
	}

	.gm-route-sheet-intro {
		padding:
			44px
			60px
			22px;
	}

	.gm-route-sheet-location-icon {
		width: 60px;
		height: 60px;

		margin-bottom: 16px;

		border-radius: 19px;
	}

	.gm-route-sheet-location-icon svg {
		width: 28px;
		height: 28px;
	}

	.gm-route-sheet-intro h3 {
		font-size: 25px;
	}

	.gm-route-sheet-intro p {
		font-size: 14px;
	}

	.gm-route-options {
		gap: 9px;

		padding:
			18px
			16px
			14px;
	}

	.gm-route-option {
		min-height: 76px;

		grid-template-columns:
			48px
			minmax(0, 1fr)
			auto;

		gap: 12px;

		padding:
			12px
			14px;

		border-radius: 18px;
	}

	.gm-route-app-icon {
		width: 48px;
		height: 48px;

		border-radius: 15px;
	}

	.gm-route-app-icon svg {
		width: 28px;
		height: 28px;
	}

	.gm-route-option-content strong {
		font-size: 16px;
	}

	.gm-route-option-content small {
		font-size: 13px;
	}

	.gm-route-sheet-note {
		padding:
			14px
			18px
			calc(
				16px +
				env(safe-area-inset-bottom)
			);

		font-size: 12px;
	}

}


/* ==========================================================
   56. NARROW MOBILE
   ========================================================== */

@media (max-width: 390px) {

	.gm-route-sheet-intro {
		padding-right: 54px;
		padding-left: 54px;
	}

	.gm-route-sheet-intro h3 {
		font-size: 23px;
	}

	.gm-route-options {
		padding-right: 14px;
		padding-left: 14px;
	}

	.gm-route-option {
		grid-template-columns:
			46px
			minmax(0, 1fr)
			auto;
	}

	.gm-route-app-icon {
		width: 46px;
		height: 46px;
	}

}


/* ==========================================================
   57. SHORT VIEWPORT
   ========================================================== */

@media (max-height: 720px) {

	.gm-route-sheet-intro {
		padding-top: 28px;
		padding-bottom: 18px;
	}

	.gm-route-sheet-location-icon {
		width: 54px;
		height: 54px;

		margin-bottom: 13px;
	}

	.gm-route-sheet-intro h3 {
		font-size: 23px;
	}

	.gm-route-options {
		gap: 7px;

		padding-top: 14px;
		padding-bottom: 12px;
	}

	.gm-route-option {
		min-height: 66px;
	}

}


/* ==========================================================
   58. MOBILE LANDSCAPE
   ========================================================== */

@media
	(max-width: 900px)
	and (max-height: 520px)
	and (orientation: landscape) {

	.gm-route-sheet-panel {
		top: 50%;
		right: auto;
		bottom: auto;
		left: 50%;

		width: min(720px, calc(100vw - 30px));
		max-height: calc(100dvh - 24px);

		border: 1px solid var(--gm-sl-border);
		border-radius: 24px;

		transform:
			translate(-50%, -50%)
			scale(0.985);
	}

	.gm-route-sheet.is-open
	.gm-route-sheet-panel {
		transform:
			translate(-50%, -50%)
			scale(1);
	}

	.gm-route-sheet-handle {
		display: none;
	}

	.gm-route-sheet-intro {
		padding:
			22px
			70px
			15px;
	}

	.gm-route-sheet-location-icon {
		width: 46px;
		height: 46px;

		margin-bottom: 9px;

		border-radius: 15px;
	}

	.gm-route-sheet-location-icon svg {
		width: 22px;
		height: 22px;
	}

	.gm-route-sheet-intro h3 {
		font-size: 20px;
	}

	.gm-route-sheet-intro p {
		margin-top: 6px;

		font-size: 12px;
		line-height: 1.45;
	}

	.gm-route-options {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 8px;

		padding:
			13px
			18px
			11px;
	}

	.gm-route-option {
		min-height: 62px;
	}

	.gm-route-sheet-note {
		padding:
			9px
			18px
			11px;
	}

}


/* ==========================================================
   59. REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.gm-route-sheet,
	.gm-route-sheet-backdrop,
	.gm-route-sheet-panel,
	.gm-route-cancel,
	.gm-route-option,
	.gm-route-app-icon,
	.gm-route-option-arrow {
		transition: none !important;
	}

}


/* ==========================================================
   60. HIGH CONTRAST
   ========================================================== */

@media (prefers-contrast: more) {

	.gm-route-sheet-panel,
	.gm-route-option,
	.gm-route-cancel {
		border-width: 2px;
	}

	.gm-route-option-content strong {
		font-weight: 650;
	}

}

/* ==========================================================
   61. PRIMARY ROUTE BUTTON CONTRAST
   ========================================================== */

.gm-store-locator .gm-route-button {
	color: rgba(255, 255, 255, 0.96);
}

.gm-store-locator .gm-route-button .gm-store-action-content small,
.gm-store-locator .gm-route-button .gm-store-action-content strong {
	color: currentColor;
}

.gm-store-locator .gm-route-button::after {
	color: rgba(255, 255, 255, 0.72);
}

.gm-store-locator .gm-route-button:hover::after {
	color: rgba(255, 255, 255, 0.9);
}

.gm-store-locator .gm-route-button .gm-store-action-icon {
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.9);
}

.gm-store-locator .gm-route-button:hover .gm-store-action-icon {
	border-color: rgba(255, 255, 255, 0.32);
	background: rgba(255, 255, 255, 0.24);
}