/*
Theme Name: SP Medikal (Blocksy Child)
Template: blocksy
Version: 1.4.5
Text Domain: spmedikal
*/

/* ---------- Tokens (from Figma) ---------- */
:root {
	--sp-navy: #071136;
	--sp-teal: #1a7285;
	--sp-teal-dark: #00647a;
	--sp-green: #2baf98;
	--sp-cyan: #3cb1cd;
	--sp-orange: #f2821a;
	--sp-text: #575757;
	--sp-muted: #5d6063;
	--sp-light: #f5f5f5;
	--sp-line: #ebebeb;
	--sp-gutter: clamp(16px, 4vw, 48px);
	--sp-section: clamp(64px, 8vw, 160px);
}

body { background: #fff; }

.sp-container {
	width: min(1440px, 100% - var(--sp-gutter) * 2);
	margin-inline: auto;
}

.sp-orange { color: var(--sp-orange); }
.sp-green { color: var(--sp-green); }

/* Full-bleed sections inside Blocksy's content area */
.entry-content > .sp-section,
.sp-section.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
}
.entry-content > .sp-section + .sp-section { margin-top: 0; }
.sp-section { padding-block: var(--sp-section); position: relative; overflow: clip; }
.sp-section--light { background: var(--sp-light); }
.sp-section--navy { background: var(--sp-navy); color: #fff; }
.sp-section.sp-section--navy :is(h1, h2, h3, h4, p, li) { color: #fff; }

.sp-section h2,
.sp-h2 {
	font-size: clamp(40px, 4.2vw, 72px);
	font-weight: 400;
	line-height: 1;
	color: var(--sp-navy);
	margin: 0;
}

/* ---------- Line links ("Ürünler →", "Tümünü Gör →") ---------- */
.wp-block-button.is-style-sp-line .wp-block-button__link,
.sp-line-link {
	background: none !important;
	color: inherit !important;
	padding: 0 0 12px !important;
	border-radius: 0 !important;
	border-bottom: 2px solid var(--sp-green) !important;
	font-size: clamp(18px, 1.4vw, 24px);
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	min-height: 0;
}
.wp-block-button.is-style-sp-line .wp-block-button__link::after,
.sp-line-link::after {
	content: "";
	width: 40px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6h38M33 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6h38M33 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: transform .25s;
}
.wp-block-button.is-style-sp-line .wp-block-button__link:hover::after,
.sp-line-link:hover::after { transform: translateX(6px); }
.wp-block-button.is-style-sp-line .wp-block-button__link { color: var(--sp-navy) !important; }
.sp-hero .wp-block-button.is-style-sp-line .wp-block-button__link,
.sp-section--navy .wp-block-button.is-style-sp-line .wp-block-button__link { color: #fff !important; }

/* Small "Detaylı İncele →" links */
.sp-more a, a.sp-more,
.sp-card .wp-block-post-excerpt__more-link {
	color: var(--sp-teal);
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}
.sp-more a::after, a.sp-more::after,
.sp-card .wp-block-post-excerpt__more-link::after { content: "→"; transition: transform .2s; }
.sp-more a:hover::after, a.sp-more:hover::after,
.sp-card .wp-block-post-excerpt__more-link:hover::after { transform: translateX(4px); }

/* Pill button */
.wp-block-button.is-style-sp-pill .wp-block-button__link {
	background: var(--sp-teal-dark);
	color: #fff;
	border-radius: 30px;
	padding: 16px 40px;
	font-weight: 700;
	text-transform: uppercase;
}
.wp-block-button.is-style-sp-pill .wp-block-button__link:hover { background: var(--sp-navy); }

/* ---------- Header ---------- */
#header [data-row*="middle"] { background: var(--sp-light); transition: box-shadow .25s; }
#header [data-sticky*="yes"] [data-row*="middle"] { box-shadow: 0 6px 24px rgba(7, 17, 54, .08); }
#header [data-id="menu"] .menu > li > a {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sp-teal);
	font-size: clamp(13px, 1.05vw, 16px);
	white-space: nowrap;
}
#header [data-id="menu"] .menu > li > a:hover,
#header [data-id="menu"] .menu > li.current-menu-item > a { color: var(--sp-navy); }
#header [data-id="menu"] .sub-menu { background: #fff; border-radius: 12px; box-shadow: 0 20px 40px rgba(7, 17, 54, .12); padding: 8px 0; }
#header [data-id="menu"] .sub-menu a { color: var(--sp-navy); font-weight: 500; }
#header [data-id="menu"] .sub-menu a:hover { color: var(--sp-teal); }
#header [data-id="menu"] { --menu-items-spacing: clamp(6px, 1.1vw, 18px); }
#header .ct-header-cta .ct-button {
	background: var(--sp-teal-dark);
	border-radius: 30px;
	min-height: 51px;
	padding-inline: clamp(18px, 2vw, 32px);
	white-space: nowrap;
	font-weight: 700;
	gap: 14px;
}
#header .ct-header-cta .ct-button::after { content: "↗"; font-weight: 400; }
#header .ct-header-cta .ct-button:hover { background: var(--sp-navy); }
#header .ct-header-search,
#header .ct-header-trigger {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #eaeaea;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--theme-icon-color: var(--sp-navy);
}

/* Small laptops: not enough room for the full menu next to the button, so the hamburger menu takes over */
@media (min-width: 1000px) and (max-width: 1365px) {
	#header [data-device="desktop"] [data-id="menu"] { display: none; }
}

/* Language switcher (TR | EN) next to the search icon */
#header .ct-language-switcher {
	height: 48px;
	padding: 0 6px;
	border-radius: 24px;
	background: #eaeaea;
	display: inline-flex;
	align-items: center;
	flex: none;
}
#header .ct-language-switcher ul { display: flex; flex-wrap: nowrap; width: max-content; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
#header .ct-language-switcher li { margin: 0; }
#header .ct-language-switcher a {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: 18px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sp-teal);
	text-decoration: none;
	transition: background .2s, color .2s;
}
#header .ct-language-switcher a:hover { color: var(--sp-navy); }
#header .ct-language-switcher .current-lang a,
#header .ct-language-switcher a[aria-current] { background: #fff; color: var(--sp-navy); box-shadow: 0 2px 6px rgba(7, 17, 54, .08); }

@media (max-width: 689px) {
	#header .ct-language-switcher { height: 38px; padding: 0 4px; border-radius: 19px; }
	#header .ct-language-switcher a { min-width: 30px; height: 30px; padding: 0 6px; font-size: 13px; }
	#header .site-logo-container img { max-height: 30px; }
}

/* Full-screen menu (Blocksy offcanvas in modal mode) */
#offcanvas { --theme-link-initial-color: #fff; --theme-link-hover-color: var(--sp-green); background: var(--sp-navy) !important; }
#offcanvas .ct-panel-inner { background: var(--sp-navy); }
#offcanvas .ct-panel-content-inner { max-width: 1440px; margin-inline: auto; width: 100%; }
#offcanvas .mobile-menu { position: relative; }
@media (min-width: 1000px) {
	#offcanvas .ct-panel-content-inner::before {
		content: "MENU";
		position: absolute;
		left: 6vw;
		top: 50%;
		transform: translateY(-50%);
		font-size: clamp(80px, 7vw, 130px);
		font-weight: 500;
		color: #fff;
		opacity: .95;
	}
	#offcanvas .mobile-menu { margin-left: 32vw; }
}
#offcanvas .mobile-menu a {
	font-size: clamp(22px, 2vw, 32px);
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}
#offcanvas .mobile-menu .sub-menu a { font-size: clamp(18px, 1.5vw, 24px); font-weight: 500; opacity: .9; }
#offcanvas .ct-header-cta { margin-top: 24px; }

/* ---------- Hero ---------- */
.sp-hero { background: var(--sp-navy); color: #fff; padding-block: clamp(32px, 3.5vw, 72px) clamp(48px, 4vw, 88px); }
.sp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(32px, 4vw, 80px);
	align-items: center;
}
.sp-hero h1 {
	font-size: clamp(48px, 5.8vw, 112px);
	line-height: 1;
	font-weight: 400;
	color: #fff;
	margin: 0 0 clamp(24px, 2.5vw, 48px);
}
.sp-hero__lead { font-size: 18px; max-width: 520px; color: #fff; margin: 0 0 clamp(28px, 3vw, 48px); }
.sp-hero .wp-block-buttons { gap: clamp(32px, 4vw, 88px); }
.sp-hero__media { position: relative; padding-bottom: 90px; }
.sp-hero__media .wp-block-image { margin: 0; }
.sp-hero__media .wp-block-image img {
	width: 100%;
	aspect-ratio: 697 / 616;
	/* Keep the whole hero (image + cards) inside the first screen on short displays */
	max-height: max(320px, calc(100svh - 320px));
	object-fit: cover;
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 17%);
	display: block;
}
.sp-glass-row {
	position: absolute;
	left: -10%;
	right: -4%;
	bottom: 0;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 16px;
	align-items: start;
}
.sp-glass {
	background: radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .95), rgba(214, 222, 232, .78));
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	padding: 24px 32px 32px;
	color: var(--sp-navy);
}
.sp-glass h3 {
	font-size: clamp(20px, 1.7vw, 32px);
	font-weight: 400;
	color: var(--sp-navy) !important;
	margin: 0 0 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.sp-glass h3 a { color: inherit; text-decoration: none; }
.sp-glass h3::after { content: "+"; color: var(--sp-orange); font-size: 1.1em; line-height: 1; }
.sp-glass p { font-size: 15px; color: var(--sp-navy) !important; margin: 0; }
.sp-glass:last-child { margin-top: -8px; }

/* ---------- About ---------- */
.sp-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 120px);
	align-items: center;
}
.sp-about__media { position: relative; padding-right: 18%; padding-bottom: 8%; }
.sp-about__media .wp-block-image { margin: 0; }
.sp-about__media .wp-block-image img { border-radius: 16px; width: 100%; display: block; object-fit: cover; }
.sp-about__media .sp-about__big img { aspect-ratio: 551 / 537; }
.sp-about__media .sp-about__small {
	position: absolute;
	right: 0;
	top: 28%;
	width: 42%;
	box-shadow: 0 24px 48px rgba(7, 17, 54, .18);
	border-radius: 16px;
}
.sp-about__media .sp-about__small img { aspect-ratio: 1; border: 6px solid #fff; }
.sp-about h2 { margin-bottom: 40px; }
.sp-about__lead { color: var(--sp-muted); font-size: 16px; max-width: 600px; margin-bottom: 40px; }
.sp-about__row { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.sp-checks { list-style: none; padding: 0; margin: 0; font-size: 20px; font-weight: 700; color: #000; line-height: 2; }
.sp-checks li::before { content: "✔"; margin-right: 8px; }
.sp-about__row .wp-block-image { margin: 0; max-width: 288px; }

/* ---------- Section head ---------- */
.sp-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.sp-head__left { display: flex; flex-direction: column; gap: 40px; }
.sp-nav { display: flex; gap: 12px; }
.sp-nav button {
	width: 88px;
	height: 48px;
	border-radius: 32px;
	border: 0;
	background: rgba(7, 17, 54, .1);
	color: var(--sp-navy);
	cursor: pointer;
	font-size: 18px;
	transition: background .2s, color .2s;
}
.sp-nav button:hover { background: var(--sp-navy); color: #fff; }

/* ---------- Cards / sliders ---------- */
.sp-track,
.sp-blog-query .wp-block-post-template {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 72px) / 4);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none;
}
.sp-track::-webkit-scrollbar,
.sp-blog-query .wp-block-post-template::-webkit-scrollbar { display: none; }
.sp-track > *,
.sp-blog-query .wp-block-post-template > li { scroll-snap-align: start; margin: 0 !important; }

.sp-card {
	background: #fff;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0 !important;
	transition: transform .3s, box-shadow .3s;
}
.sp-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(7, 17, 54, .1); }
.sp-card > .wp-block-image,
.sp-card .sp-card__media { margin: 0 !important; aspect-ratio: 400 / 269; overflow: hidden; }
.sp-card > .wp-block-image img,
.sp-card .sp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.sp-card:hover .sp-card__media img,
.sp-card:hover > .wp-block-image img { transform: scale(1.04); }
.sp-card--icon > .wp-block-image { background: var(--sp-navy); display: flex; align-items: center; justify-content: center; }
.sp-card--icon > .wp-block-image img { width: 45%; height: auto; object-fit: contain; }
.sp-card--icon:hover > .wp-block-image img { transform: scale(1.06); }
.sp-card__body { padding: 32px; display: flex; flex-direction: column; flex: 1; }
.sp-card h3,
.sp-card .wp-block-post-title {
	font-size: clamp(22px, 1.7vw, 32px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--sp-navy);
	margin: 0 0 24px;
}
.sp-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.sp-card p,
.sp-card .wp-block-post-excerpt__excerpt { font-size: 16px; line-height: 25px; color: var(--sp-navy); margin: 0 0 32px; }
.sp-card .wp-block-post-excerpt { margin: 0; display: flex; flex-direction: column; flex: 1; }
.sp-card .sp-more, .sp-card .wp-block-post-excerpt__more-text { margin-top: auto; margin-bottom: 0; }

/* ---------- Production ---------- */
.sp-prod__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(40px, 5vw, 96px);
	align-items: center;
}
.sp-prod h2 { font-weight: 500; margin-bottom: 32px; }
.sp-prod__lead { color: var(--sp-navy); max-width: 420px; margin-bottom: 64px; }
.sp-stats { display: flex; gap: clamp(24px, 3vw, 48px); margin-bottom: 48px; flex-wrap: wrap; }
.sp-stat { flex: 1 1 180px; }
.sp-stat__num { font-size: clamp(44px, 3.4vw, 64px); line-height: 1; color: var(--sp-green); margin: 0 0 20px; }
.sp-stat__label { color: var(--sp-navy); margin: 0; max-width: 300px; }
.sp-prod__visual { position: relative; aspect-ratio: 1; max-width: 860px; justify-self: center; width: 100%; }
.sp-prod__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/svg/circle.svg") no-repeat center / contain;
	opacity: .9;
	animation: sp-spin 60s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }
.sp-prod__visual .wp-block-image { position: absolute; inset: 23% 9%; margin: 0; }
.sp-prod__visual .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #1a5ff0;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 12px rgba(26, 95, 240, .2);
	transition: transform .25s;
	z-index: 2;
}
.sp-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.sp-play::before { content: ""; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }

/* ---------- Quality ---------- */
.sp-quality h2 { margin-bottom: 64px; }
.sp-quality__grid {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: clamp(40px, 8vw, 150px);
	align-items: start;
}
.sp-quality__grid > .wp-block-image { margin: 64px 0 0; }
.sp-steps { position: relative; padding-left: 60px; max-width: 900px; }
.sp-steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 1px; background: rgba(255, 255, 255, .5); }
.sp-step { position: relative; margin-bottom: 40px; }
.sp-step::before {
	content: "";
	position: absolute;
	left: -60px;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sp-navy);
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 9px var(--sp-navy), inset 0 0 0 16px #fff;
}
.sp-step:first-child::before { box-shadow: inset 0 0 0 2px var(--sp-green), inset 0 0 0 9px var(--sp-navy), inset 0 0 0 16px var(--sp-green); }
.sp-step p { font-size: 16px; line-height: 25px; margin: 0 0 16px; }
.sp-standards { list-style: none; padding: 0; margin: 0; font-size: clamp(22px, 1.7vw, 32px); line-height: 1.3; color: #fff; }
.sp-quality .sp-more a { color: var(--sp-green); }

/* ---------- Footer ---------- */
.sp-footer { background: var(--sp-navy); color: #fff; position: relative; overflow: visible; padding: 120px 0 40px; margin-top: 40px; }
.sp-footer a { color: #fff; text-decoration: none; }
.sp-footer a:hover { color: var(--sp-green); }
.sp-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr .7fr 1fr 1.3fr;
	gap: 40px;
	position: relative;
	z-index: 1;
}
.sp-footer__logo img { width: 100%; max-width: 373px; height: auto; }
.sp-footer__grid > p:empty { display: none; }
.sp-footer .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; font-size: 18px; }
.sp-footer__contact { display: grid; gap: 14px; justify-items: start; font-size: 16px; }
.sp-footer__contact > * { background: rgba(255, 255, 255, .08); padding: 8px 10px; margin: 0; max-width: 320px; }
.sp-social { display: flex; gap: 12px; margin-top: 18px; background: none !important; padding: 0 !important; }
.sp-social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(43, 175, 152, .6);
	display: grid;
	place-items: center;
	color: var(--sp-green);
}
.sp-social svg { width: 16px; height: 16px; fill: currentColor; }
.sp-footer__bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 16px;
	margin-top: 180px;
	font-size: 18px;
	position: relative;
	z-index: 1;
}
.sp-footer__bottom > :last-child { text-align: right; }
.sp-footer__sp {
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(565px, 40vw);
	max-height: 75%;
	object-fit: cover;
	object-position: top;
	opacity: .5;
	pointer-events: none;
}
.sp-catalog {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	background: var(--sp-green);
	border-radius: 60px;
	padding: 10px 10px 10px 36px;
	display: flex;
	align-items: center;
	gap: 28px;
	white-space: nowrap;
	box-shadow: 0 16px 40px rgba(7, 17, 54, .25);
}
.sp-catalog span { font-weight: 700; font-size: 16px; }
.sp-catalog a {
	background: var(--sp-orange);
	border-radius: 40px;
	padding: 12px 22px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.sp-catalog a:hover { background: #d96e0b; color: #fff; }
.sp-catalog a::after { content: "↓"; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--sp-orange); display: grid; place-items: center; font-size: 14px; }

/* =================================================================== */
/* Inner pages                                                          */
/* =================================================================== */

.sp-section--soft { background: #f8f8f8; }

/* Page title area */
.sp-inner-hero { background: #fff; text-align: center; padding: clamp(48px, 5vw, 80px) 0 clamp(40px, 4vw, 64px); }
.entry-content > .sp-inner-hero { width: 100vw; max-width: 100vw; margin: 0 calc(50% - 50vw); }
.sp-inner-hero__title,
.entry-content .sp-inner-hero__title {
	font-size: clamp(40px, 4.2vw, 72px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--sp-navy);
	margin: 0 0 20px;
}
.sp-inner-hero__sub,
.entry-content .sp-inner-hero__sub {
	color: var(--sp-teal);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: .02em;
	margin: 0;
}
.sp-inner-hero__lead { max-width: 920px; margin: 20px auto 0; color: var(--sp-muted); }
.sp-breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sp-breadcrumb a { color: inherit; text-decoration: none; }
.sp-breadcrumb a:hover { color: var(--sp-navy); }
.sp-breadcrumb .sep { opacity: .6; }

/* Pills (filters / tabs) */
.sp-pills { display: flex; justify-content: center; margin: 0 0 56px; }
.sp-pills > ul {
	list-style: none;
	margin: 0;
	padding: 8px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	background: #fff;
	border-radius: 44px;
	box-shadow: 0 6px 24px rgba(7, 17, 54, .06);
}
.sp-pills a,
.sp-pills button {
	display: block;
	padding: 8px 20px;
	border-radius: 32px;
	border: 0;
	background: transparent;
	color: var(--sp-text);
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s, color .2s;
	white-space: nowrap;
}
.sp-pills a:hover, .sp-pills button:hover { background: #f1f4f6; color: var(--sp-navy); }
.sp-pills a.is-active,
.sp-pills button.is-active { background: var(--sp-green); color: #fff; }
.sp-pills a.is-all { background: var(--sp-orange); color: #fff; }

/* Filter bar sitting on the border between the title area and the listing */
.sp-pills-bridge { background: linear-gradient(#fff 50%, #f8f8f8 50%); position: relative; z-index: 5; }
.sp-pills-bridge .sp-pills { margin: 0; }
.sp-pills-bridge + .sp-listing { padding-top: clamp(40px, 4vw, 72px); }
.sp-inner-hero:has(+ .sp-pills-bridge) { padding-bottom: clamp(32px, 3vw, 48px); }

/* Mobile: the filter bar becomes a "Kategori seç" dropdown in the same oval frame */
.sp-pills__select { display: none; position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.sp-pills__select summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 8px 52px 8px 8px;
	background: #fff;
	border-radius: 44px;
	box-shadow: 0 6px 24px rgba(7, 17, 54, .08);
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
.sp-pills__select summary::-webkit-details-marker { display: none; }
.sp-pills__select summary::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--sp-navy);
	border-bottom: 2px solid var(--sp-navy);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .25s;
}
.sp-pills__select[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sp-pills__select summary:focus-visible { outline: 2px solid var(--sp-teal); outline-offset: 3px; }
.sp-pills__label {
	flex: none;
	background: var(--sp-orange);
	color: #fff;
	border-radius: 32px;
	padding: 8px 18px;
	font-size: 15px;
	line-height: 1.5;
	white-space: nowrap;
}
.sp-pills__current {
	flex: 1;
	min-width: 0;
	color: var(--sp-navy);
	font-size: 16px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sp-pills__menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	z-index: 30;
	list-style: none;
	margin: 0;
	padding: 8px;
	display: grid;
	gap: 2px;
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 20px 48px rgba(7, 17, 54, .14);
	animation: sp-drop .2s ease-out;
}
@keyframes sp-drop { from { opacity: 0; transform: translateY(-6px); } }
.sp-pills .sp-pills__menu a { display: block; padding: 12px 18px; border-radius: 32px; font-size: 16px; background: transparent; color: var(--sp-text); white-space: normal; }
.sp-pills .sp-pills__menu a.is-all { background: transparent; color: var(--sp-text); }
.sp-pills .sp-pills__menu a:hover { background: #f1f4f6; color: var(--sp-navy); }
.sp-pills .sp-pills__menu a.is-active { background: var(--sp-green); color: #fff; }

/* Listing grid */
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; max-width: 1260px; margin: 0 auto; }
.sp-card__media { display: block; }
.sp-card__placeholder { display: block; width: 100%; height: 100%; background: #e6e9ec url("assets/svg/icon-paket.svg") no-repeat center / 30%; opacity: .6; }
.sp-card h3 a { color: inherit; text-decoration: none; }
.sp-card h3 a:hover { color: var(--sp-teal); }
.sp-empty { text-align: center; color: var(--sp-muted); padding: 40px 0; }
.sp-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; }
.sp-pagination .page-numbers {
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	display: grid;
	place-items: center;
	border-radius: 18px;
	color: var(--sp-text);
	font-size: 14px;
	text-decoration: none;
}
.sp-pagination .page-numbers.current { background: #fff; color: #070707; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
.sp-pagination a.page-numbers:hover { color: var(--sp-teal); }

/* Text + image split sections */
.sp-split__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.sp-split__grid--reverse > :first-child { order: 0; }
.sp-split__grid--icon { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.sp-split__icon { margin: 0; justify-self: center; max-width: 285px; }
.sp-split__img { margin: 0; }
.sp-split__img img { width: 100%; border-radius: 16px; aspect-ratio: 1; object-fit: cover; display: block; }
.sp-split__logo { margin: 0 0 40px; max-width: 381px; }
.sp-text { color: var(--sp-muted); font-size: 16px; line-height: 1.6; max-width: 620px; }
.sp-text p { margin: 0 0 16px; }
.sp-text ul { margin: 0 0 16px; padding-left: 20px; }
.sp-text li { margin-bottom: 4px; }
.sp-text strong { color: var(--sp-navy); font-weight: 500; }
.sp-eyebrow,
.entry-content .sp-eyebrow {
	color: var(--sp-teal);
	font-size: 16px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 40px 0 16px;
}
.sp-text > .sp-eyebrow:first-child { margin-top: 0; }
.sp-text .sp-stats { margin: 32px 0 8px; }
.sp-standards-inline { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0 !important; color: var(--sp-navy); font-size: 20px; }

/* Film */
.sp-film { text-align: center; }
.sp-film .sp-eyebrow { color: #fff !important; margin: 0 0 40px; }
.sp-film__media { position: relative; max-width: 975px; margin: 0 auto; }
.sp-film__media .wp-block-image { margin: 0; }
.sp-film__media img { width: 100%; aspect-ratio: 975 / 485; object-fit: cover; display: block; }

/* Certificates */
.sp-certs h2 { margin-bottom: 64px; }
.sp-cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1280px; margin: 0 auto; }
.sp-cert {
	aspect-ratio: 1;
	background: #f2f4f6 url("assets/svg/iso.svg") no-repeat center 38% / 32%;
	border-radius: 8px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 24px;
	transition: transform .3s, box-shadow .3s;
}
.sp-cert:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(7, 17, 54, .08); }
.sp-cert p { margin: 0; color: var(--sp-navy); font-size: 20px; text-align: center; }
.sp-cert img { width: 100%; height: 100%; object-fit: contain; }

/* Product detail */
.sp-product { background: #fff; padding: clamp(48px, 5vw, 88px) 0; }
.sp-product__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); max-width: 1340px; align-items: start; }
.sp-product__media { aspect-ratio: 1; background: #f2f4f6; border-radius: 4px; overflow: hidden; }
.sp-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-product__cat { margin: 0 0 16px; font-weight: 600; }
.sp-product__cat a { color: #f57c3c; text-decoration: none; }
.sp-product__title { font-size: clamp(28px, 2.3vw, 40px); font-weight: 500; color: #070707; line-height: 1.2; margin: 0 0 16px; }
.sp-product__ref { color: var(--sp-green); margin: 0 0 24px; }
.sp-product__desc { color: #070707; margin-bottom: 32px; }
.sp-product__desc p { margin: 0 0 12px; }
.sp-btn-orange {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--sp-orange);
	color: #fff;
	border-radius: 30px;
	padding: 12px 30px;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s;
}
.sp-btn-orange::after { content: "→"; }
.sp-btn-orange:hover { background: #d96e0b; color: #fff; }
.sp-tab-panel { max-width: 1340px; margin: 0 auto; }
.sp-tab-panel h2 { font-size: clamp(28px, 2.3vw, 40px) !important; font-weight: 500; color: #070707; margin: 0 0 32px; }
.sp-dots { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.sp-dots li { position: relative; padding-left: 38px; color: #070707; }
.sp-dots li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--sp-navy); }
.sp-tab-text { max-width: 900px; color: #070707; }
.sp-docs { list-style: none; padding: 0; display: grid; gap: 12px; }
.sp-docs a { color: var(--sp-teal); text-decoration: none; }
.sp-docs a::before { content: "↓ "; }
.sp-related__title { text-align: center; font-size: clamp(28px, 2.3vw, 40px) !important; font-weight: 500 !important; color: #070707 !important; margin: 0 0 48px !important; }

/* Blog post */
.sp-post__inner { max-width: 805px; margin: 0 auto; padding-inline: var(--sp-gutter); }
.sp-post__image { margin: calc(var(--sp-section) * -1) 0 32px; }
.sp-post__image img { width: 100%; height: auto; display: block; }
.sp-post__date { color: var(--sp-teal); font-weight: 700; font-size: 14px; margin: 0 0 16px; }
.sp-post__content { color: var(--sp-navy); }
.sp-post__content h2, .sp-post__content h3 { font-size: 24px; font-weight: 500; margin: 32px 0 12px; }

/* Forms */
.sp-form-card {
	background: #fff;
	max-width: 890px;
	margin: calc(var(--sp-section) * -1) auto 0;
	padding: 32px clamp(20px, 10vw, 237px) 56px;
}
.sp-form-card h2 { font-size: clamp(28px, 2.3vw, 40px) !important; font-weight: 500 !important; color: #070707 !important; margin: 0 0 40px !important; }
.sp-form { display: grid; gap: 18px; color: #191917; }
.sp-form__row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; border: 0; margin: 0; padding: 0; }
.sp-form__row > span { white-space: nowrap; padding-bottom: 6px; }
.sp-form__row > span::after { content: " :"; }
.sp-form input[type="text"],
.sp-form input[type="email"],
.sp-form input[type="tel"],
.sp-form select,
.sp-form textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid #c9c9c9;
	border-radius: 0;
	background: transparent;
	padding: 6px 0;
	font: inherit;
	color: inherit;
	min-height: 0;
	box-shadow: none;
}
.sp-form textarea { resize: vertical; border: 1px solid #e1e1e1; padding: 8px; margin-top: 8px; }
.sp-form__row--full { grid-template-columns: 1fr; }
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus { outline: none; border-color: var(--sp-teal); }
.sp-form__checks { grid-template-columns: 1fr; gap: 8px; }
.sp-form__checks legend { margin-bottom: 8px; padding: 0; float: left; width: 100%; }
.sp-form__checks label { display: flex; align-items: center; gap: 10px; padding-left: 30px; }
.sp-form input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sp-teal); margin: 0; }
.sp-form__kvkk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--sp-muted); }
.sp-form__kvkk input { margin-top: 3px !important; }
.sp-form__submit {
	justify-self: center;
	margin-top: 16px;
	background: var(--sp-teal-dark);
	color: #fff;
	border: 0;
	border-radius: 30px;
	padding: 16px 64px;
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s;
}
.sp-form__submit:hover { background: var(--sp-navy); }
.sp-form__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.sp-form__notice { padding: 14px 18px; border-radius: 8px; margin-bottom: 24px; }
.sp-form__notice--ok { background: rgba(43, 175, 152, .12); color: #146b5c; }
.sp-form__notice--err { background: rgba(242, 130, 26, .12); color: #9a4c05; }

/* Contact */
.sp-contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.sp-contact .sp-form-card { margin: 0; max-width: none; padding: 32px clamp(20px, 5vw, 80px) 56px; }
.sp-contact__info { display: grid; gap: 24px; }
.sp-contact__item { background: #fff; padding: 24px 28px; }
.sp-contact__item .sp-eyebrow { margin: 0 0 8px; }
.sp-contact__item p { margin: 0; color: var(--sp-navy); }
.sp-contact__item a { color: inherit; text-decoration: none; }
.sp-map { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; }

@media (max-width: 999px) {
	.sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-split__grid, .sp-split__grid--icon, .sp-product__grid, .sp-contact { grid-template-columns: 1fr; }
	.sp-split__grid--reverse > :first-child { order: 2; }
	.sp-split__icon { max-width: 180px; }
	.sp-cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-pills:not(.sp-pills--filter) { overflow-x: auto; justify-content: flex-start; margin-inline: calc(var(--sp-gutter) * -1); padding-inline: var(--sp-gutter); scrollbar-width: none; }
	.sp-pills:not(.sp-pills--filter) > ul { flex-wrap: nowrap; }
	.sp-pills--filter { display: block; }
	.sp-pills--filter .sp-pills__list { display: none; }
	.sp-pills__select { display: block; }
}
@media (max-width: 689px) {
	.sp-grid { grid-template-columns: 1fr; }
	.sp-form__row { grid-template-columns: 1fr; gap: 4px; }
	.sp-form__checks label { padding-left: 0; }
	.sp-form-card { margin-top: -40px; }
	.sp-post__image { margin-top: -40px; }
	.sp-inner-hero__sub { font-size: 14px; }
}

/* ---------- Quote page ---------- */
.sp-quote__grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; max-width: 1280px; }
.sp-quote__aside {
	background: var(--sp-navy) url("assets/svg/footer-sp.svg") no-repeat right -60px bottom -40px / 70%;
	color: #fff;
	padding: clamp(28px, 3vw, 48px);
	border-radius: 20px;
	position: sticky;
	top: 110px;
	overflow: hidden;
}
.sp-quote__aside p, .sp-quote__aside li { color: rgba(255, 255, 255, .82); }
.sp-quote__title,
.entry-content .sp-quote__title { color: #fff !important; font-size: clamp(28px, 2.4vw, 40px) !important; font-weight: 400 !important; line-height: 1.15; margin: 0 0 16px !important; }
.sp-quote__lead { margin: 0 0 32px; }
.sp-quote__steps { list-style: none; counter-reset: q; padding: 0 !important; margin: 0 0 36px !important; display: grid; gap: 22px; }
.sp-quote__steps li { counter-increment: q; position: relative; padding-left: 56px; font-size: 15px; line-height: 1.5; }
.sp-quote__steps li::before {
	content: counter(q);
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--sp-green);
	color: var(--sp-green);
	display: grid;
	place-items: center;
	font-weight: 600;
}
.sp-quote__steps strong { display: block; color: #fff; font-weight: 500; font-size: 17px; margin-bottom: 2px; }
.sp-quote__contact { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 24px; }
.sp-quote__contact p { margin: 0 0 4px; font-size: 15px; }
.sp-quote__contact a { color: #fff; text-decoration: none; }
.sp-quote__contact a:hover { color: var(--sp-green); }
.sp-quote__phone { font-size: 24px !important; margin: 4px 0 6px !important; }
.sp-quote__card { background: #fff; border-radius: 20px; padding: clamp(24px, 3.5vw, 56px); box-shadow: 0 24px 60px rgba(7, 17, 54, .07); }

/* ---------- Step form ---------- */
.sp-qform { display: grid; gap: 36px; color: var(--sp-navy); }
.sp-qform fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sp-qform legend {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 500;
	color: var(--sp-navy);
	margin-bottom: 20px;
	padding: 0;
}
.sp-qform__num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(43, 175, 152, .14);
	color: var(--sp-green);
	display: grid;
	place-items: center;
	font-size: 15px;
	font-weight: 700;
	transition: background .25s, color .25s;
}
.sp-qform__section.is-done .sp-qform__num { background: var(--sp-green); color: #fff; font-size: 0; }
.sp-qform__section.is-done .sp-qform__num::before { content: "✓"; font-size: 15px; }
.sp-qform__hint { margin: -12px 0 16px; font-size: 14px; color: var(--sp-muted); }
.sp-qform .req { color: var(--sp-orange); }

.sp-qform__progress { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; counter-reset: p; }
.sp-qform__progress li { font-size: 13px; color: var(--sp-muted); padding-top: 12px; position: relative; }
.sp-qform__progress li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: #eef1f3; }
.sp-qform__progress li::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 4px; border-radius: 4px; background: var(--sp-green); transition: width .4s; }
.sp-qform__progress li.is-done { color: var(--sp-navy); }
.sp-qform__progress li.is-done::after { width: 100%; }
.sp-qform__product { margin: -16px 0 0; padding: 12px 16px; background: rgba(242, 130, 26, .08); border-radius: 10px; font-size: 15px; }

.sp-qform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.sp-field { display: grid; gap: 8px; }
.sp-field label { font-size: 14px; font-weight: 500; color: var(--sp-navy); }
.sp-qform input[type="text"],
.sp-qform input[type="email"],
.sp-qform input[type="tel"],
.sp-qform textarea {
	width: 100%;
	border: 1.5px solid #e3e7eb;
	border-radius: 12px;
	background: #fafbfc;
	padding: 13px 16px;
	font: inherit;
	font-size: 16px;
	color: var(--sp-navy);
	min-height: 0;
	box-shadow: none;
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.sp-qform textarea { resize: vertical; min-height: 120px; }
.sp-qform input::placeholder, .sp-qform textarea::placeholder { color: #a3abb3; }
.sp-qform input:focus, .sp-qform textarea:focus { outline: none; border-color: var(--sp-green); background: #fff; box-shadow: 0 0 0 4px rgba(43, 175, 152, .12); }
.sp-qform input:user-invalid { border-color: #e2795a; }

/* Category tiles */
.sp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sp-tile { position: relative; cursor: pointer; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 18px 12px 16px; border: 1.5px solid #e3e7eb; border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.sp-tile:hover { border-color: #bfe6de; transform: translateY(-2px); }
.sp-tile input { position: absolute; opacity: 0; pointer-events: none; }
.sp-tile__icon { width: 64px; height: 52px; border-radius: 10px; background: var(--sp-navy); display: grid; place-items: center; transition: background .2s; }
.sp-tile__icon img { width: 40px; height: auto; }
.sp-tile__name { font-size: 14px; line-height: 1.3; color: var(--sp-navy); }
.sp-tile::after {
	content: "✓";
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--sp-green);
	color: #fff;
	font-size: 12px;
	display: grid;
	place-items: center;
	transform: scale(0);
	transition: transform .2s;
}
.sp-tile:has(input:checked) { border-color: var(--sp-green); box-shadow: 0 0 0 4px rgba(43, 175, 152, .12); }
.sp-tile:has(input:checked)::after { transform: scale(1); }
.sp-tile:has(input:focus-visible) { outline: 2px solid var(--sp-teal); outline-offset: 2px; }

/* Request type chips */
.sp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.sp-chip { cursor: pointer; }
.sp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.sp-chip span { display: inline-block; padding: 10px 18px; border-radius: 30px; border: 1.5px solid #e3e7eb; font-size: 15px; transition: all .2s; }
.sp-chip:hover span { border-color: var(--sp-green); }
.sp-chip input:checked + span { background: var(--sp-navy); border-color: var(--sp-navy); color: #fff; }
.sp-chip input:focus-visible + span { outline: 2px solid var(--sp-teal); outline-offset: 2px; }

.sp-qform__footer { display: grid; gap: 20px; border-top: 1px solid #eef1f3; padding-top: 28px; }
.sp-qform .sp-form__kvkk { font-size: 14px; }
.sp-qform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	background: var(--sp-orange);
	color: #fff;
	border: 0;
	border-radius: 14px;
	padding: 18px 28px;
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, transform .2s;
}
.sp-qform__submit::after { content: "→"; transition: transform .2s; }
.sp-qform__submit:hover { background: #d96e0b; }
.sp-qform__submit:hover::after { transform: translateX(4px); }
.sp-qform__submit:active { transform: scale(.99); }

/* İletişim uses the same fields inside its own card */
.sp-contact .sp-qform { gap: 28px; }

@media (max-width: 999px) {
	.sp-quote__grid { grid-template-columns: 1fr; }
	.sp-quote__aside { position: static; }
	.sp-quote__card { order: -1; }
}
@media (max-width: 689px) {
	.sp-qform__grid { grid-template-columns: 1fr; }
	.sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sp-quote__steps { gap: 16px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.sp-track,
	.sp-blog-query .wp-block-post-template { grid-auto-columns: calc((100% - 24px) / 2.3); }
	.sp-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 999px) {
	.sp-hero__media .wp-block-image img { max-height: none; }
	.sp-hero__grid,
	.sp-about__grid,
	.sp-prod__grid,
	.sp-quality__grid { grid-template-columns: 1fr; }
	.sp-glass-row { left: 0; right: 0; }
	.sp-quality__grid > .wp-block-image { margin: 0; max-width: 180px; }
	.sp-prod__visual { max-width: 600px; }
	#offcanvas .mobile-menu a { font-size: 22px; }
	#header .site-logo-container img { max-height: 36px; width: auto; }
}
@media (max-width: 689px) {
	.sp-track,
	.sp-blog-query .wp-block-post-template { grid-auto-columns: 82%; }
	.sp-hero__media { padding-bottom: 0; }
	.sp-glass-row { position: static; grid-template-columns: 1fr; margin-top: 16px; }
	.sp-glass:last-child { margin-top: 0; }
	.sp-about__row { gap: 24px; }
	.sp-checks { font-size: 17px; }
	.sp-steps { padding-left: 48px; }
	.sp-step::before { left: -48px; }
	.sp-footer { padding-top: 140px; }
	.sp-footer__grid { grid-template-columns: 1fr; }
	.sp-footer__bottom { grid-template-columns: 1fr; text-align: center; margin-top: 80px; }
	.sp-footer__bottom > :last-child { text-align: center; }
	.sp-catalog { flex-direction: column; gap: 10px; white-space: normal; text-align: center; padding: 16px 20px; border-radius: 24px; width: calc(100% - 32px); }
	.sp-catalog span { font-size: 14px; }
	.sp-head__left { gap: 24px; }
	.sp-nav button { width: 64px; height: 40px; }
}
.sp-tiles.is-invalid .sp-tile { border-color: #e2795a; }