/* ==========================================================================
   MEGATECH — Homepage (FAZ 4, PAGE-SPECS §1). Tokens only (var(--mt-…)).
   Loaded on the front page and on pages that place homepage sections.
   Breakpoints: 768 (tablet) · 1024 (desktop) · 1366 (wide) · 1600 (decor).
   ========================================================================== */

/* FAZ 7.1: homepage rhythm = the 32–48 px section system, trimmed in a
   controlled way (28 → 40 px) so the page reads full and compact. The footer's
   own margin is the last gap (no extra main padding stacked on top of it). */
.mt-home-main {
	--mt-home-gap: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
	position: relative;
	overflow-x: clip;
}

.mt-home-section {
	margin-top: var(--mt-home-gap, var(--mt-section-gap));
}

.mt-home-section--hero {
	margin-top: var(--mt-space-4);
}

/* Section head: link arrow nudge (ANIMATION §3.4). */
.mt-home-section .mt-section-head__link .mt-icon {
	transition: transform var(--mt-dur-fast) var(--mt-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
	.mt-home-section .mt-section-head__link:hover .mt-icon {
		transform: translateX(3px);
	}
}

/* --------------------------------------------------------------------------
   Hero slider (§1.1) — crossfade 320ms, text 220ms +100ms delay
   ----------------------------------------------------------------------- */

.mt-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--mt-radius-2xl);
	background: var(--mt-bg-soft-green);
	isolation: isolate;
	touch-action: pan-y; /* horizontal swipe → slider, vertical → page scroll */
}

.mt-hero__track {
	display: grid;
	aspect-ratio: 4 / 5;
}

.mt-hero__slide {
	position: relative;
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--mt-dur-slow) var(--mt-ease-standard),
		visibility 0s linear var(--mt-dur-slow);
}

.mt-hero__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--mt-dur-slow) var(--mt-ease-standard), visibility 0s;
}

.mt-hero__media,
.mt-hero__img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
}

.mt-hero__img {
	object-fit: cover;
	object-position: center bottom;
}

.mt-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mt-space-3);
	padding: var(--mt-space-6) var(--mt-space-5) 0;
	color: var(--mt-text-heading);
}

.mt-hero__slide.is-active .mt-hero__content {
	animation: mt-hero-text var(--mt-dur-base) var(--mt-ease-out) 100ms both;
}

@keyframes mt-hero-text {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.mt-hero__overline {
	margin: 0;
	max-width: 30ch;
	color: var(--mt-text-heading);
	font-size: var(--mt-fs-xs);
	font-weight: var(--mt-fw-bold);
	letter-spacing: var(--mt-ls-wide);
	line-height: var(--mt-lh-snug);
	text-transform: uppercase;
}

.mt-hero__title {
	margin: 0;
	max-width: 14ch;
	color: var(--mt-text-heading);
	font-family: var(--mt-font-heading);
	font-size: clamp(1.875rem, 1.2rem + 3vw, 2rem);
	font-weight: var(--mt-fw-extrabold);
	line-height: var(--mt-lh-tight);
	letter-spacing: var(--mt-ls-tight);
	text-wrap: balance;
}

.mt-hero__hl {
	position: relative;
	display: inline-block;
	color: var(--mt-color-primary);
}

.mt-hero__swoosh {
	position: absolute;
	left: 0;
	bottom: -0.18em;
	width: 100%;
	height: 0.32em;
	color: var(--mt-color-primary);
}

.mt-hero__text {
	margin: 0;
	max-width: 38ch;
	color: var(--mt-text-secondary);
	font-size: var(--mt-fs-base);
	line-height: var(--mt-lh-normal);
}

.mt-hero__cta {
	margin-top: var(--mt-space-1);
}

.mt-hero__cta .mt-icon {
	transition: transform var(--mt-dur-fast) var(--mt-ease-standard);
}

@media (hover: hover) and (pointer: fine) {
	.mt-hero__cta:hover .mt-icon {
		transform: translateX(3px);
	}
}

/* White-text scheme for dark images. */
.mt-hero__slide--light .mt-hero__content,
.mt-hero__slide--light .mt-hero__overline,
.mt-hero__slide--light .mt-hero__title {
	color: var(--mt-text-on-dark);
}

.mt-hero__slide--light .mt-hero__text {
	color: var(--mt-text-on-dark-muted);
}

.mt-hero__slide--light .mt-hero__hl,
.mt-hero__slide--light .mt-hero__swoosh {
	color: var(--mt-color-accent-on-dark);
}

/* Controls */
.mt-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	place-items: center;
	width: var(--mt-touch-min);
	height: var(--mt-touch-min);
	margin-top: calc(var(--mt-touch-min) / -2);
	padding: 0;
	border: 1px solid var(--mt-border-subtle);
	border-radius: var(--mt-radius-round);
	background: var(--mt-bg-surface);
	color: var(--mt-text-heading);
	box-shadow: var(--mt-shadow-sm);
	cursor: pointer;
	transition:
		opacity var(--mt-dur-base) var(--mt-ease-standard),
		color var(--mt-dur-fast) var(--mt-ease-standard);
}

.mt-hero__arrow--prev { left: var(--mt-space-4); }
.mt-hero__arrow--next { right: var(--mt-space-4); }

.mt-hero__arrow:hover {
	color: var(--mt-color-primary-strong);
}

.mt-hero__controls {
	position: absolute;
	left: 50%;
	bottom: var(--mt-space-3);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--mt-space-1);
	padding: 0 var(--mt-space-2);
	border-radius: var(--mt-radius-pill);
	background: rgba(255, 255, 255, 0.82);
	transform: translateX(-50%);
}

.mt-hero__dots {
	display: flex;
	align-items: center;
}

/* 44px hit area around an 8px dot (C: dokunma ≥44px). */
.mt-hero__dot,
.mt-hero__pause {
	display: grid;
	place-items: center;
	width: 28px;
	height: var(--mt-touch-min);
	padding: 0;
	border: 0;
	background: none;
	color: var(--mt-text-heading);
	cursor: pointer;
}

.mt-hero__dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--mt-radius-pill);
	background: var(--mt-gray-300);
	transition:
		width var(--mt-dur-base) var(--mt-ease-standard),
		background-color var(--mt-dur-base) var(--mt-ease-standard);
}

.mt-hero__dot[aria-current="true"] {
	width: 40px;
}

.mt-hero__dot[aria-current="true"]::before {
	width: 24px;
	background: var(--mt-color-primary);
}

.mt-hero__pause {
	width: 36px;
}

.mt-hero__pause svg {
	fill: currentColor;
}

.mt-hero__play-icon,
.mt-hero__pause[aria-pressed="true"] .mt-hero__pause-icon {
	display: none;
}

.mt-hero__pause[aria-pressed="true"] .mt-hero__play-icon {
	display: block;
}

.mt-hero__dot:focus-visible,
.mt-hero__pause:focus-visible,
.mt-hero__arrow:focus-visible {
	outline: none;
	box-shadow: var(--mt-focus-ring);
	border-radius: var(--mt-radius-pill);
}

@media (min-width: 768px) {
	.mt-hero__track {
		aspect-ratio: auto;
		height: 360px;
	}
	.mt-hero__slide {
		justify-content: center;
	}
	.mt-hero__img {
		object-position: right center;
	}
	.mt-hero__content {
		width: 50%;
		padding: 0 0 var(--mt-space-6) var(--mt-space-10);
	}
	.mt-hero__title {
		font-size: 2.5rem;
	}
}

@media (min-width: 1024px) {
	/* ≈1376×420 at full width (§1.1); height-based so it never widens the grid. */
	.mt-hero__track {
		height: clamp(360px, 30.5vw, 420px);
	}
	.mt-hero__content {
		width: 42%;
		padding-left: var(--mt-space-16);
	}
	.mt-hero__title {
		font-size: var(--mt-fs-5xl);
	}
	.mt-hero__text {
		font-size: var(--mt-fs-md);
	}
	.mt-hero__arrow {
		display: grid;
		opacity: 0;
	}
	.mt-hero:hover .mt-hero__arrow,
	.mt-hero:focus-within .mt-hero__arrow {
		opacity: 1;
	}
}

/* Ready-made banner slides ("Yazılar ve buton görselin içinde"): the image is shown
   whole (contain); in banner mode the slider takes the image's own aspect ratio on every
   screen size, and dots/pause sit under the image so they never cover its text. */
.mt-hero__slide--image .mt-hero__media,
.mt-hero__slide--image .mt-hero__img {
	z-index: 0;
}

.mt-hero__slide--image .mt-hero__img {
	object-fit: contain;
	object-position: center;
}

.mt-hero__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	border-radius: inherit;
}

.mt-hero__link:focus-visible {
	outline: 3px solid var(--mt-color-primary);
	outline-offset: -3px;
}

.mt-hero--banner {
	overflow: visible;
	border-radius: 0;
	background: transparent;
}

.mt-hero--banner .mt-hero__track {
	aspect-ratio: var(--mt-hero-ratio, 1916 / 821);
	height: auto;
	overflow: hidden;
	border-radius: var(--mt-radius-xl);
}

.mt-hero--banner .mt-hero__controls {
	position: static;
	width: fit-content;
	margin: var(--mt-space-2) auto 0;
	transform: none;
	background: transparent;
}

/* Banner layout ("Banner düzeni: görsel oranını koru"): the artwork keeps its ratio and its
   left side is text-free; logo, headline, text and button are real HTML on top of it. */
.mt-hero__logo {
	display: block;
	width: auto;
	height: 30px;
	max-width: 100%;
}

/* The original logo file has a white background: show it as a white badge on every image. */
.mt-hero__logo {
	box-sizing: content-box;
	padding: 0.35em 0.65em;
	border-radius: var(--mt-radius-md);
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.mt-hero__note {
	position: absolute;
	right: var(--mt-space-3);
	bottom: var(--mt-space-2);
	z-index: 1;
	margin: 0;
	padding: 0.2em 0.6em;
	border-radius: var(--mt-radius-pill);
	background: rgba(255, 255, 255, 0.82);
	color: var(--mt-text-heading);
	font-size: 0.6875rem;
	line-height: 1.2;
}

.mt-hero__slide--light .mt-hero__note {
	background: rgba(0, 0, 0, 0.55);
	color: var(--mt-text-on-dark);
}

.mt-hero__slide--banner .mt-hero__media,
.mt-hero__slide--banner .mt-hero__img {
	z-index: 0;
}

.mt-hero__slide--banner .mt-hero__content {
	position: relative;
	z-index: 1;
}

@media (max-width: 767.98px) {
	/* Mobile artwork is 4:5 with a text-free top half. */
	.mt-hero--banner.mt-hero--mobile-art .mt-hero__track {
		aspect-ratio: 4 / 5;
	}
	.mt-hero__slide--banner .mt-hero__img {
		object-fit: cover;
		object-position: center bottom;
	}
	.mt-hero__slide--banner .mt-hero__content {
		gap: var(--mt-space-2);
		padding: var(--mt-space-5) var(--mt-space-5) 0;
	}
	.mt-hero__slide--banner .mt-hero__logo {
		height: 26px;
	}
	.mt-hero__slide--banner .mt-hero__title {
		font-size: clamp(1.625rem, 1rem + 3.2vw, 2.125rem);
		max-width: 15ch;
	}
	.mt-hero__slide--banner .mt-hero__text {
		font-size: var(--mt-fs-sm);
		max-width: 34ch;
	}
}

@media (min-width: 768px) {
	.mt-hero__slide--banner .mt-hero__img {
		object-fit: cover;
		object-position: center;
	}
	.mt-hero__slide--banner .mt-hero__content {
		width: 40%;
		gap: clamp(0.5rem, 1.1vw, 1.25rem);
		padding: 0 0 0 4%;
	}
	.mt-hero__slide--banner .mt-hero__logo {
		height: clamp(26px, 3vw, 48px);
		margin-bottom: clamp(0rem, 0.6vw, 0.75rem);
	}
	.mt-hero__slide--banner .mt-hero__title {
		max-width: 13ch;
		font-size: clamp(1.625rem, 3.1vw, 3.25rem);
	}
	.mt-hero__slide--banner .mt-hero__text {
		max-width: 30ch;
		font-size: clamp(0.875rem, 1.15vw, 1.1875rem);
	}
	.mt-hero__note {
		font-size: 0.75rem;
	}
}

/* --------------------------------------------------------------------------
   Category showcase (§1.3) — 9 in a row ≥1024, scroll-snap below
   ----------------------------------------------------------------------- */

.mt-home-cats__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--mt-space-3)) / 3.5);
	gap: var(--mt-space-3);
	margin: 0;
	padding: 0 0 var(--mt-space-2);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mt-home-cats__list::-webkit-scrollbar {
	display: none;
}

.mt-home-cats__item {
	scroll-snap-align: start;
}

.mt-home-cats .mt-cat-card {
	height: 100%;
	gap: var(--mt-space-1);
}

.mt-cat-card__desc {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--mt-text-secondary);
	font-size: var(--mt-fs-2xs, 0.6875rem);
	line-height: var(--mt-lh-snug);
}

@media (min-width: 768px) {
	.mt-home-cats__list {
		grid-auto-columns: calc((100% - 5 * var(--mt-space-3)) / 5.5);
	}
}

@media (min-width: 1024px) {
	.mt-home-cats__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		grid-auto-columns: auto;
		padding-bottom: 0;
		overflow: visible;
	}
}

/* --------------------------------------------------------------------------
   Shared background variants (banners, collections)
   ----------------------------------------------------------------------- */

.mt-home-bg--dark .mt-promo,
.mt-coll-card.mt-home-bg--dark {
	background: var(--mt-ink-950);
}

.mt-home-bg--green .mt-promo,
.mt-coll-card.mt-home-bg--green {
	background: var(--mt-green-900);
}

.mt-home-bg--lilac .mt-promo,
.mt-coll-card.mt-home-bg--lilac {
	background: #efe9f6; /* [K] referans 01 kulaklık kartı pembe-lila; token yok */
	color: var(--mt-text-heading);
}

.mt-home-bg--light .mt-promo,
.mt-coll-card.mt-home-bg--light {
	background: var(--mt-bg-muted);
	color: var(--mt-text-heading);
}

.mt-home-bg--lilac .mt-promo::before,
.mt-home-bg--light .mt-promo::before {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, transparent 65%);
}

.mt-home-bg--lilac .mt-promo__title,
.mt-home-bg--light .mt-promo__title {
	color: var(--mt-text-heading);
}

.mt-home-bg--lilac .mt-promo__text,
.mt-home-bg--light .mt-promo__text {
	color: var(--mt-text-secondary);
}

.mt-home-bg--lilac .mt-btn--ghost-light,
.mt-home-bg--light .mt-btn--ghost-light {
	border-color: var(--mt-text-heading);
	color: var(--mt-text-heading);
}

/* --------------------------------------------------------------------------
   Campaign banners (§1.4)
   ----------------------------------------------------------------------- */

.mt-home-campaigns__split,
.mt-home-campaigns__side,
.mt-home-campaigns__row {
	display: grid;
	gap: var(--mt-space-3);
}

.mt-home-campaigns__row {
	margin-top: var(--mt-space-3);
}

.mt-home-campaigns__split + .mt-home-campaigns__row:empty {
	display: none;
}

.mt-home-campaigns__item,
.mt-home-campaigns__item .mt-promo {
	height: 100%;
}

.mt-home-campaigns .mt-promo--lg {
	min-height: 200px;
}

.mt-home-campaigns .mt-promo--sm {
	min-height: 120px;
}

.mt-home-campaigns .mt-promo__img {
	object-position: right center;
}

@media (max-width: 767.98px) {
	.mt-home-campaigns .mt-promo__body {
		max-width: 62%;
		padding: var(--mt-space-5);
	}
	.mt-home-campaigns .mt-promo--lg .mt-promo__title {
		font-size: var(--mt-fs-2xl);
	}
	.mt-home-campaigns .mt-promo--sm .mt-promo__title {
		font-size: var(--mt-fs-lg);
	}
}

@media (min-width: 768px) {
	.mt-home-campaigns__side,
	.mt-home-campaigns__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mt-home-campaigns .mt-promo--lg {
		min-height: 220px;
	}
}

@media (min-width: 1024px) {
	.mt-home-campaigns__split {
		grid-template-columns: 1.25fr 1fr;
		gap: var(--mt-space-4);
	}
	.mt-home-campaigns__side {
		grid-template-columns: none;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		gap: var(--mt-space-4);
	}
	.mt-home-campaigns__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--mt-space-4);
		margin-top: var(--mt-space-4);
	}
	.mt-home-campaigns .mt-promo--lg {
		min-height: 240px;
	}
	.mt-home-campaigns .mt-promo--sm {
		min-height: 112px;
	}
	.mt-home-campaigns .mt-promo--sm .mt-promo__body {
		gap: var(--mt-space-1);
		padding: var(--mt-space-4) var(--mt-space-6);
	}
}

/* --------------------------------------------------------------------------
   Neden Megaticaret? (§1.5, FAZ 7.1) — 4 corporate advantage cards:
   white card, soft border + shadow, green line icon on a light-green disc,
   bold title, short text. 4 col ≥1024 · 2 col 480–1023 · 1 col (icon left) <480.
   Texts: Megaticaret › Anasayfa › "Neden Megaticaret?".
   ----------------------------------------------------------------------- */

.mt-home-why__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mt-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-why-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--mt-space-4);
	height: 100%;
	padding: var(--mt-space-4);
	border: 1px solid var(--mt-border-subtle);
	border-radius: var(--mt-radius-lg);
	background: var(--mt-bg-surface);
	box-shadow: var(--mt-shadow-sm);
	transition:
		transform var(--mt-dur-base) var(--mt-ease-standard),
		border-color var(--mt-dur-base) var(--mt-ease-standard),
		box-shadow var(--mt-dur-base) var(--mt-ease-standard);
}

.mt-why-card__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--mt-green-100);
	border-radius: var(--mt-radius-round);
	background: var(--mt-green-50);
	color: var(--mt-color-primary);
	transition: background-color var(--mt-dur-base) var(--mt-ease-standard), color var(--mt-dur-base) var(--mt-ease-standard);
}

.mt-why-card__title {
	margin: 0 0 var(--mt-space-1);
	color: var(--mt-text-heading);
	font-family: var(--mt-font-heading);
	font-size: var(--mt-fs-md);
	font-weight: var(--mt-fw-bold);
	line-height: var(--mt-lh-snug);
}

.mt-why-card__text {
	margin: 0;
	color: var(--mt-text-secondary);
	font-size: var(--mt-fs-sm);
	line-height: var(--mt-lh-normal);
}

@media (hover: hover) and (pointer: fine) {
	.mt-why-card:hover {
		transform: translateY(-3px);
		border-color: var(--mt-green-200);
		box-shadow: var(--mt-shadow-md);
	}
	.mt-why-card:hover .mt-why-card__icon {
		background: var(--mt-color-primary);
		color: var(--mt-text-on-dark);
	}
}

@media (min-width: 480px) {
	.mt-home-why__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.mt-why-card {
		flex-direction: column;
		gap: var(--mt-space-3);
	}
}

@media (min-width: 768px) {
	.mt-home-why__list {
		gap: var(--mt-space-4);
	}
	.mt-why-card {
		flex-direction: row;
		gap: var(--mt-space-4);
		padding: var(--mt-space-5);
	}
	.mt-why-card__icon {
		width: 56px;
		height: 56px;
	}
}

@media (min-width: 1024px) {
	.mt-home-why__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.mt-why-card {
		flex-direction: column;
		padding: var(--mt-space-6) var(--mt-space-5);
	}
	.mt-why-card__title {
		font-size: var(--mt-fs-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-why-card,
	.mt-why-card__icon {
		transition: none;
	}
	.mt-why-card:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Yeni Gelen Ürünler (§1.6) — 5×2 desktop · 3 col tablet · 2 col mobile
   Shared card + grid from components.css; only counts/columns here.
   ----------------------------------------------------------------------- */

.mt-home-new__grid {
	margin-bottom: 0 !important;
}

/* Every width shows all 10 products (integration decision, overrides the
   earlier 2×3 mobile / 3×3 tablet rule): mobile 2×5, tablet 3 columns, desktop 5×2.
   Fewer than 10 published products → only the real ones are shown. */
.mt-home-new__more {
	margin-top: var(--mt-space-4);
}

@media (min-width: 768px) {
	ul.mt-products.mt-home-new__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.mt-home-new__more {
		display: none;
	}
}

@media (min-width: 1024px) {
	ul.mt-products.mt-home-new__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Horizontal scroller (collections, brands) + ‹ › buttons (C§20.2)
   ----------------------------------------------------------------------- */

.mt-scroller {
	display: grid;
	grid-auto-flow: column;
	gap: var(--mt-space-3);
	margin: 0;
	padding: 0 0 var(--mt-space-1);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.mt-scroller::-webkit-scrollbar {
	display: none;
}

.mt-scroller__item {
	min-width: 0;
	scroll-snap-align: start;
}

.mt-scroller-nav {
	display: flex;
	gap: var(--mt-space-2);
}

.mt-scroller-nav[hidden] {
	display: none;
}

.mt-scroller-nav__btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--mt-border-default);
	border-radius: var(--mt-radius-round);
	background: var(--mt-bg-surface);
	color: var(--mt-text-heading);
	cursor: pointer;
	transition:
		color var(--mt-dur-fast) var(--mt-ease-standard),
		border-color var(--mt-dur-fast) var(--mt-ease-standard),
		opacity var(--mt-dur-fast) var(--mt-ease-standard);
}

/* 44px touch target without changing the 32px visual. */
.mt-scroller-nav__btn {
	position: relative;
}

.mt-scroller-nav__btn::after {
	content: "";
	position: absolute;
	inset: -6px;
}

.mt-scroller-nav__btn:hover:not(:disabled) {
	border-color: var(--mt-color-primary);
	color: var(--mt-color-primary-strong);
}

.mt-scroller-nav__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.mt-scroller-nav__btn:focus-visible {
	outline: none;
	box-shadow: var(--mt-focus-ring);
}

/* --------------------------------------------------------------------------
   Öne Çıkan Koleksiyonlar (§1.7)
   ----------------------------------------------------------------------- */

.mt-home-coll__list {
	grid-auto-columns: calc((100% - var(--mt-space-3)) / 1.5);
}

.mt-coll-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--mt-radius-xl);
	color: var(--mt-text-on-dark);
	text-decoration: none;
	isolation: isolate;
}

.mt-coll-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.mt-coll-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mt-dur-slow) var(--mt-ease-out);
}

.mt-coll-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mt-space-1);
	padding: var(--mt-space-4);
}

.mt-coll-card__title {
	font-family: var(--mt-font-heading);
	font-size: var(--mt-fs-lg);
	font-weight: var(--mt-fw-bold);
	line-height: var(--mt-lh-snug);
}

.mt-coll-card__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--mt-text-on-dark-muted);
	font-size: var(--mt-fs-sm);
	line-height: var(--mt-lh-normal);
}

.mt-coll-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-space-2);
	margin-top: auto;
	padding-top: var(--mt-space-2);
	color: var(--mt-color-accent-on-dark);
	font-size: var(--mt-fs-sm);
	font-weight: var(--mt-fw-semibold);
}

.mt-coll-card__cta .mt-icon {
	transition: transform var(--mt-dur-fast) var(--mt-ease-standard);
}

.mt-coll-card.mt-home-bg--lilac .mt-coll-card__text,
.mt-coll-card.mt-home-bg--light .mt-coll-card__text {
	color: var(--mt-text-secondary);
}

.mt-coll-card.mt-home-bg--lilac .mt-coll-card__cta,
.mt-coll-card.mt-home-bg--light .mt-coll-card__cta {
	color: var(--mt-color-primary-strong);
}

.mt-coll-card:focus-visible {
	outline: none;
	box-shadow: var(--mt-focus-ring);
}

@media (hover: hover) and (pointer: fine) {
	.mt-coll-card:hover .mt-coll-card__img {
		transform: scale(1.03);
	}
	.mt-coll-card:hover .mt-coll-card__cta .mt-icon {
		transform: translateX(3px);
	}
}

@media (min-width: 768px) {
	.mt-home-coll__list {
		grid-auto-columns: calc((100% - 2 * var(--mt-space-3)) / 2.5);
	}
}

@media (min-width: 1024px) {
	.mt-home-coll__list {
		grid-auto-columns: calc((100% - 3 * var(--mt-space-4)) / 4);
		gap: var(--mt-space-4);
	}
}

/* --------------------------------------------------------------------------
   Popüler Markalar (§1.8)
   ----------------------------------------------------------------------- */

.mt-home-brands__list {
	grid-auto-columns: calc((100% - 3 * var(--mt-space-3)) / 3.5);
}

.mt-brand-card {
	display: grid;
	place-items: center;
	height: 72px;
	padding: var(--mt-space-3);
	border: 1px solid var(--mt-border-subtle);
	border-radius: var(--mt-radius-lg);
	background: var(--mt-bg-surface);
	color: var(--mt-text-heading);
	text-decoration: none;
	transition:
		border-color var(--mt-dur-fast) var(--mt-ease-standard),
		box-shadow var(--mt-dur-base) var(--mt-ease-standard);
}

.mt-brand-card__logo {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 32px;
	object-fit: contain;
	opacity: 0.8;
	transition: opacity var(--mt-dur-fast) var(--mt-ease-standard);
}

.mt-brand-card__name {
	overflow: hidden;
	max-width: 100%;
	font-family: var(--mt-font-heading);
	font-size: var(--mt-fs-md);
	font-weight: var(--mt-fw-extrabold);
	letter-spacing: var(--mt-ls-tight);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mt-brand-card:hover {
	border-color: var(--mt-green-200);
	box-shadow: var(--mt-shadow-sm);
	color: var(--mt-color-primary-strong);
}

.mt-brand-card:hover .mt-brand-card__logo {
	opacity: 1;
}

.mt-brand-card:focus-visible {
	outline: none;
	box-shadow: var(--mt-focus-ring);
}

@media (max-width: 767.98px) {
	/* 2.8 visible (spec 3.5 assumes logos; text tiles need the width). */
	.mt-home-brands__list {
		grid-auto-columns: calc((100% - 2 * var(--mt-space-3)) / 2.8);
	}
	.mt-brand-card {
		padding: var(--mt-space-2);
	}
	.mt-brand-card__name {
		font-size: var(--mt-fs-sm);
		letter-spacing: 0;
	}
}

@media (min-width: 768px) {
	.mt-home-brands__list {
		grid-auto-columns: calc((100% - 4 * var(--mt-space-3)) / 4.5);
	}
}

@media (min-width: 1024px) {
	.mt-home-brands__list {
		grid-auto-columns: calc((100% - 5 * var(--mt-space-3)) / 6);
	}
}

@media (min-width: 1366px) {
	.mt-home-brands__list {
		grid-auto-columns: calc((100% - 7 * var(--mt-space-3)) / 8);
	}
}

/* --------------------------------------------------------------------------
   Bilgi ve Rehber (§1.9)
   ----------------------------------------------------------------------- */

.mt-home-guides__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 85%;
	gap: var(--mt-space-3);
	margin: 0;
	padding: 0 0 var(--mt-space-1);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mt-home-guides__list::-webkit-scrollbar {
	display: none;
}

.mt-home-guides__list > li {
	scroll-snap-align: start;
}

.mt-guide-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--mt-border-subtle);
	border-radius: var(--mt-radius-lg);
	background: var(--mt-bg-surface);
	transition:
		transform var(--mt-dur-base) var(--mt-ease-standard),
		box-shadow var(--mt-dur-base) var(--mt-ease-standard);
}

.mt-guide-card__media {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background: var(--mt-bg-muted);
}

.mt-guide-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mt-dur-slow) var(--mt-ease-out);
}

.mt-guide-card__fallback {
	color: var(--mt-text-muted);
}

.mt-guide-card__badge {
	position: absolute;
	left: var(--mt-space-3);
	bottom: var(--mt-space-3);
}

.mt-guide-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mt-space-1);
	padding: var(--mt-space-4);
}

.mt-guide-card__date {
	color: var(--mt-text-muted);
	font-size: var(--mt-fs-xs);
}

.mt-guide-card__title {
	margin: 0;
	font-size: var(--mt-fs-md);
	font-weight: var(--mt-fw-bold);
	line-height: var(--mt-lh-snug);
}

.mt-guide-card__title a {
	color: var(--mt-text-heading);
	text-decoration: none;
}

.mt-guide-card__title a:hover {
	color: var(--mt-color-primary-strong);
}

.mt-guide-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: 0;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--mt-text-secondary);
	font-size: var(--mt-fs-sm);
	line-height: var(--mt-lh-normal);
}

.mt-guide-card__more {
	margin-top: auto;
	padding-top: var(--mt-space-2);
}

@media (hover: hover) and (pointer: fine) {
	.mt-guide-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--mt-shadow-md);
	}
	.mt-guide-card:hover .mt-guide-card__img {
		transform: scale(1.03);
	}
	.mt-guide-card__more:hover .mt-icon {
		transform: translateX(3px);
	}
}

@media (min-width: 768px) {
	.mt-home-guides__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-auto-columns: auto;
		overflow: visible;
	}
}

@media (min-width: 1024px) {
	.mt-home-guides__list {
		gap: var(--mt-space-4);
	}
}

/* --------------------------------------------------------------------------
   Scroll reveal (ANIMATION §3.8) — sections only, never above the fold,
   hero or product grids; content stays visible without JS.
   ----------------------------------------------------------------------- */

html.js .mt-reveal:not(.is-revealed) {
	opacity: 0;
	transform: translateY(12px);
}

html.js .mt-reveal {
	transition:
		opacity var(--mt-dur-slow) var(--mt-ease-out),
		transform var(--mt-dur-slow) var(--mt-ease-out);
}

/* --------------------------------------------------------------------------
   Decorative leaves outside the container (§1.12) — ≥1600px only
   ----------------------------------------------------------------------- */

.mt-home-deco {
	display: none;
}

@media (min-width: 1600px) {
	.mt-home-deco {
		position: absolute;
		inset: 0;
		display: block;
		color: var(--mt-green-100);
		pointer-events: none;
	}
	.mt-home-deco svg {
		position: absolute;
		top: 1400px;
		width: 120px;
		height: 240px;
	}
	.mt-home-deco__left { left: 0; }
	.mt-home-deco__right { right: 0; }
}

/* --------------------------------------------------------------------------
   Reduced motion: no autoplay transitions, no reveal offset
   ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mt-hero__slide,
	.mt-hero__slide.is-active {
		transition: none;
	}
	.mt-hero__slide.is-active .mt-hero__content {
		animation: none;
	}
	html.js .mt-reveal:not(.is-revealed) {
		opacity: 1;
		transform: none;
	}
	.mt-scroller {
		scroll-behavior: auto;
	}
}