/**
 * Premium makine ürün kartı sistemi (`machine-premium`) + kompakt kart ayrımı.
 *
 * AMAÇ: Dikiş makineleri sitenin ana ürün grubudur. Kullanıcı ana sayfaya baktığında
 * makinelerin yedek parça / iğne / aksesuardan daha değerli olduğunu GÖRSEL OLARAK anlamalıdır.
 * Bu dosya iki kart ailesi arasında bilinçli bir hiyerarşi kurar:
 *
 *   MAKİNE  → büyük görsel alanı · ferah iç boşluk · güçlü fiyat · geniş CTA · 4 kolon
 *   KOMPAKT → küçük görsel · sıkı boşluk · sakin fiyat/CTA · 5–6 kolon (hızlı taranabilir)
 *
 * TASARIM SİSTEMİ: Tüm değerler aşağıdaki semantik token'lardan okunur; bölüm bazında
 * rastgele hex tekrarı YAPILMAZ. Token'lar NextCore paletinden türetilmiştir.
 *
 * Plain CSS (Vite dışı); yalnız CMS içeriği render eden sayfalarda enqueue edilir.
 */

/* ==========================================================================
   1) Semantik token'lar
   ========================================================================== */

:root {
	--product-card-bg: #fff;
	--product-card-border: #dde2e6;
	--product-card-border-hover: rgba(13, 43, 69, 0.55);
	--product-card-radius: 16px;
	--product-card-shadow: 0 2px 4px rgba(13, 43, 69, 0.04), 0 12px 28px rgba(13, 43, 69, 0.06);
	--product-card-shadow-hover: 0 6px 12px rgba(13, 43, 69, 0.07), 0 22px 46px rgba(13, 43, 69, 0.12);
	--product-card-media-bg: #f7f8f8;
	--product-card-media-glow: rgba(31, 86, 124, 0.05);
	--product-card-title: #071b2c;
	--product-card-muted: #66717d;
	--product-card-brand: #16405f;
	--product-card-price: var(--nc-color-navy, #0d2b45);
	--product-card-accent: var(--nc-color-orange, #0d2b45);
	--product-card-accent-strong: #0d2b45;
	--product-card-stock-in: #15803d;
	--product-card-stock-out: #b4433a;
	--product-card-stock-unknown: #8a5a12;
	--product-card-pad: clamp(16px, 1.4vw, 22px);
	--product-card-motion: 200ms;
}

/* ==========================================================================
   2) Premium makine gridi
   ========================================================================== */

.machine-product-grid {
	display: grid;
	grid-template-columns: repeat(var(--nc-grid-desktop, 4), minmax(0, 1fr));
	gap: clamp(18px, 1.6vw, 28px);
	align-items: stretch;
}

/* ==========================================================================
   3) Premium makine kartı
   ========================================================================== */

.machine-card {
	position: relative;
	display: flex;
	height: 100%;
	min-width: 0;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--product-card-border, #dde2e6);
	border-radius: var(--product-card-radius, 16px);
	background: var(--product-card-bg, #fff);
	box-shadow: var(--product-card-shadow, 0 2px 4px rgba(13, 43, 69, 0.04), 0 12px 28px rgba(13, 43, 69, 0.06));
	transition:
		transform var(--product-card-motion, 200ms) ease,
		box-shadow var(--product-card-motion, 200ms) ease,
		border-color var(--product-card-motion, 200ms) ease;
}

.machine-card:hover,
.machine-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--product-card-border-hover, rgba(13, 43, 69, 0.55));
	box-shadow: var(--product-card-shadow-hover, 0 6px 12px rgba(13, 43, 69, 0.07), 0 22px 46px rgba(13, 43, 69, 0.12));
}

/* --- Görsel tuvali: farklı ürün oranlarını normalize eder --- */
.machine-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--product-card-media-bg, #f7f8f8);
	/* Çok hafif merkez ışığı — makine başrolde kalır, dekorasyon görselin ÖNÜNE geçmez. */
	background-image: radial-gradient(120% 90% at 50% 22%, var(--product-card-media-glow, rgba(31, 86, 124, 0.05)), transparent 68%);
	border-bottom: 1px solid var(--product-card-border, #dde2e6);
}

.machine-card__media--4-3 { aspect-ratio: 4 / 3; }
.machine-card__media--3-2 { aspect-ratio: 3 / 2; }
.machine-card__media--1-1 { aspect-ratio: 1 / 1; }
.machine-card__media--16-9 { aspect-ratio: 16 / 9; }

.machine-card__media-link {
	display: grid;
	width: 100%;
	height: 100%;
	padding: clamp(18px, 2vw, 30px);
	place-items: center;
}

/*
 * `contain`: makinenin hiçbir parçası (kafa, masa, motor) KIRPILMAZ. Fotoğrafın gerçek
 * oranı kart yüksekliğini değiştirmez; tuval sabittir.
 */
/*
 * `width/height: 100%` + `object-fit: contain` bilinçli tercihtir: `max-height: 100%` +
 * `height: auto` kombinasyonu KARE görsellerde (800×800) tuvali dikeyde aşıyor ve makinenin
 * üst/alt kısmı `overflow: hidden` ile KESİLİYORDU. Bu yazımda görsel daima tuvale sığar,
 * oranı korunur ve boşluk kenarlarda kalır.
 */
.machine-card__image {
	width: 100%;
	height: 100%;
	/*
	 * Grid öğelerinin varsayılan `min-height: auto` değeri, değiştirilmiş (replaced) bir
	 * öğede İÇSEL boyuta eşittir ve `height: 100%`'i EZER — kare görseller bu yüzden tuvali
	 * dikeyde aşıp kırpılıyordu. `min-*: 0` bu otomatik taban boyutu kaldırır.
	 */
	min-width: 0;
	min-height: 0;
	object-fit: contain;
	transition: transform var(--product-card-motion, 200ms) ease;
}

.machine-card:hover .machine-card__image {
	transform: scale(1.025);
}

.machine-card__placeholder {
	display: grid;
	width: 72px;
	height: 72px;
	place-items: center;
	color: #a9bdd0;
}

.machine-card__placeholder svg {
	width: 100%;
	height: 100%;
}

/* --- Rozet --- */
.machine-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	min-height: 24px;
	align-items: center;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--product-card-price, #0d2b45);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* --- Favori --- */
.machine-card__favorite {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: inline-grid;
	width: 40px;
	height: 40px;
	place-items: center;
	border: 1px solid rgba(13, 43, 69, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--product-card-price, #0d2b45);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.machine-card__favorite svg {
	width: 18px;
	height: 18px;
}

.machine-card__favorite:hover {
	border-color: var(--product-card-border-hover, rgba(13, 43, 69, 0.55));
	background: #fff;
	color: var(--product-card-accent-strong, #0d2b45);
}

.machine-card__favorite.is-active {
	border-color: var(--product-card-border-hover, rgba(13, 43, 69, 0.55));
	background: var(--product-card-accent, #0d2b45);
	color: #fff;
}

.machine-card__favorite:focus-visible {
	outline: var(--nc-focus-ring, 3px solid rgba(13, 43, 69, 0.42));
	outline-offset: 2px;
}

/* --- Hızlı İncele: hover'da beliren İKİNCİL eylem --- */
.machine-card__quick {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	min-height: 32px;
	align-items: center;
	padding: 0 12px;
	border: 1px solid rgba(13, 43, 69, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--product-card-price, #0d2b45);
	font-size: 12px;
	font-weight: 750;
	text-decoration: none;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.machine-card:hover .machine-card__quick,
.machine-card__quick:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

.machine-card__quick:focus-visible {
	outline: var(--nc-focus-ring, 3px solid rgba(13, 43, 69, 0.42));
	outline-offset: 2px;
}

/* --- Gövde --- */
.machine-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--product-card-pad, clamp(16px, 1.4vw, 22px));
}

.machine-card__brand {
	display: block;
	margin-bottom: 7px;
	color: var(--product-card-brand, #16405f);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.machine-card__title {
	margin: 0;
	font-size: clamp(14.5px, 1.05vw, 16px);
	font-weight: 700;
	line-height: 1.4;
}

.machine-card__title a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--product-card-title, #071b2c);
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.machine-card__title a:hover {
	color: var(--product-card-accent-strong, #0d2b45);
}

.machine-card__title a:focus-visible {
	outline: var(--nc-focus-ring, 3px solid rgba(13, 43, 69, 0.42));
	outline-offset: 2px;
}

.machine-card__attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.machine-card__attrs li {
	display: inline-flex;
	min-height: 22px;
	align-items: center;
	padding: 0 9px;
	border: 1px solid var(--product-card-border, #dde2e6);
	border-radius: 999px;
	background: #f7f8f8;
	color: var(--product-card-muted, #66717d);
	font-size: 11.5px;
	font-weight: 650;
}

/*
 * Alt blok `margin-top: auto` ile tabana yaslanır → uzun ürün adı olan kart, aynı satırdaki
 * diğer kartların CTA hizasını BOZMAZ (§24 kart yükseklik eşitliği).
 */
.machine-card__foot {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	padding-top: 14px;
}

.machine-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 700;
}

.machine-card__stock-dot {
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 999px;
	background: currentcolor;
}

/* Renk TEK BAŞINA anlam taşımaz: yanında daima metin vardır (WCAG 1.4.1). */
.machine-card__stock--in { color: var(--product-card-stock-in, #15803d); }
.machine-card__stock--out { color: var(--product-card-stock-out, #b4433a); }
.machine-card__stock--unknown { color: var(--product-card-stock-unknown, #8a5a12); }

.machine-card__price {
	color: var(--product-card-price, #0d2b45);
	font-size: clamp(19px, 1.5vw, 23px);
	font-weight: 800;
	line-height: 1.15;
	/* 4.085.886,20 ₺ gibi uzun tutarlar tek satırda kalsın. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.machine-card__price .nc-price__amount,
.machine-card__price .nc-price__value {
	color: inherit;
}

.machine-card__price .nc-price {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: baseline;
}

.machine-card__price del {
	color: var(--product-card-muted, #66717d);
	font-size: 13px;
	font-weight: 600;
}

.machine-card__price ins {
	color: inherit;
	text-decoration: none;
}

/* --- CTA: geniş ama kontrollü; kartta İKİNCİ büyük CTA yok --- */
.machine-card__cta {
	display: inline-flex;
	min-height: 48px;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 14px;
	padding: 0 18px;
	border: 1px solid var(--product-card-accent, #0d2b45);
	border-radius: 10px;
	background: var(--product-card-accent, #0d2b45);
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
	text-decoration: none;
	transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.machine-card__cta svg {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	transition: transform 160ms ease;
}

.machine-card__cta:hover {
	border-color: var(--product-card-accent-strong, #0d2b45);
	background: var(--product-card-accent-strong, #0d2b45);
	box-shadow: 0 10px 22px rgba(13, 43, 69, 0.24);
}

.machine-card:hover .machine-card__cta svg {
	transform: translateX(3px);
}

.machine-card__cta:focus-visible {
	outline: var(--nc-focus-ring, 3px solid rgba(13, 43, 69, 0.42));
	outline-offset: 2px;
}

/* ==========================================================================
   4) Koyu (lacivert) bölüm üzerindeki premium kart — signature görünüm
   ========================================================================== */

.nc-showcase--tone-navy {
	position: relative;
	background:
		radial-gradient(120% 80% at 80% 0%, rgba(31, 86, 124, 0.28), transparent 62%),
		linear-gradient(168deg, var(--nc-color-navy, #0d2b45), #0d2b45 78%);
}

/* Çok hafif teknik çizgi dokusu — okunurluğu bozmayacak yoğunlukta. */
.nc-showcase--tone-navy::before {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 64px 64px;
	content: "";
	pointer-events: none;
}

.nc-showcase--tone-navy > .container {
	position: relative;
	z-index: 1;
}

/* Koyu zeminde beyaz kartlar showroom vitrini gibi dursun. */
.nc-showcase--tone-navy .machine-card {
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18), 0 26px 56px rgba(0, 0, 0, 0.22);
}

.nc-showcase--tone-navy .machine-card:hover,
.nc-showcase--tone-navy .machine-card:focus-within {
	border-color: var(--product-card-border-hover, rgba(13, 43, 69, 0.55));
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24), 0 34px 68px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   5) Premium bölüm başlığı
   ========================================================================== */

.nc-showcase--large .section-heading h2 {
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.16;
}

.nc-showcase--large .section-heading > div > p {
	max-width: 62ch;
	font-size: clamp(14.5px, 1.05vw, 16px);
	line-height: 1.65;
}

.nc-showcase--large .section-kicker {
	letter-spacing: 0.14em;
}

/* "Tümünü Gör": kapsül buton yerine temiz ikincil CTA. */
.nc-showcase--large .nc-showcase__cta {
	padding: 10px 0;
	border: 0;
	border-bottom: 2px solid var(--product-card-accent, #0d2b45);
	border-radius: 0;
	font-size: 14px;
	font-weight: 800;
}

.nc-showcase--large .nc-showcase__cta:hover {
	border-bottom-color: var(--product-card-accent-strong, #0d2b45);
	background: transparent;
	color: var(--product-card-accent-strong, #0d2b45);
}

.nc-showcase--tone-navy .nc-showcase__cta:hover {
	color: var(--nc-color-warm, #a9bdd0);
}

/* ==========================================================================
   6) Kompakt kart — bilinçli olarak daha küçük ve daha yoğun
   ========================================================================== */

.nc-product-grid--compact {
	grid-template-columns: repeat(var(--nc-grid-desktop, 5), minmax(0, 1fr));
	gap: 14px;
}

.product-card--compact {
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(13, 43, 69, 0.04), 0 8px 18px rgba(13, 43, 69, 0.05);
}

.product-card--compact .product-card__media {
	/* 4:3 — kare tuval 5 kolonda makine görselinden YÜKSEK kalıyordu; hiyerarşi bozulmasın. */
	aspect-ratio: 4 / 3;
}

.product-card--compact .product-card__media img {
	padding: 10px;
	object-fit: contain;
}

.product-card--compact .product-card__body {
	padding: 12px;
}

.product-card--compact .product-card__brand {
	min-height: 20px;
	padding: 0 7px;
	font-size: 10px;
}

.product-card--compact .product-card__heading a,
.product-card--compact .product-card__title {
	min-height: 0;
	margin: 8px 0 6px;
	font-size: 13px;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.product-card--compact .product-card__price {
	font-size: 15px;
	font-weight: 800;
}

.product-card--compact .product-card__stock {
	font-size: 11px;
}

.product-card--compact .product-card__meta {
	padding-top: 9px;
}

.product-card--compact .product-card__actions {
	margin-top: 10px;
}

/* Sakin CTA: turuncu dolgu yerine ince çerçeve — turuncu yalnız makinelerde bağırır. */
.product-card--compact .product-card__button {
	min-height: 38px;
	border: 1px solid rgba(13, 43, 69, 0.16);
	background: #fff;
	color: var(--product-card-price, #0d2b45);
	font-size: 12px;
}

.product-card--compact .product-card__button--cart:hover {
	border-color: var(--product-card-accent, #0d2b45);
	background: var(--product-card-accent, #0d2b45);
	box-shadow: none;
	color: #fff;
	transform: none;
}

.product-card--compact .product-card__favorite {
	width: 32px;
	height: 32px;
}

.product-card--compact .product-card__favorite svg {
	width: 15px;
	height: 15px;
}

/* ==========================================================================
   7) Responsive
   ========================================================================== */

@media (max-width: 1279px) {
	.machine-product-grid {
		grid-template-columns: repeat(min(var(--nc-grid-desktop, 4), 4), minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 1024px) {
	.machine-product-grid {
		grid-template-columns: repeat(min(var(--nc-grid-desktop, 4), 3), minmax(0, 1fr));
	}

	.nc-product-grid--compact {
		grid-template-columns: repeat(min(var(--nc-grid-desktop, 5), 4), minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.machine-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.nc-product-grid--compact {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/*
	 * Makine gridi mobilde UZUN İKİ KOLONA dönüşmez: kart genişliği viewport'un ~%86'sı olan
	 * yatay kaydırmalı bir şeride geçer — makine görseli büyük kalır ve sonraki kartın kenarı
	 * görünerek kaydırılabilirlik anlaşılır.
	 */
	.machine-product-grid {
		display: flex;
		gap: 14px;
		/*
		 * Negatif kenar boşluğu (bleed) KULLANILMAZ: eleman konteynerini aşmaz, böylece
		 * sayfa gövdesine yatay taşma sızma ihtimali kalmaz. Sonraki kartın kenarı zaten
		 * %86 kart genişliğiyle görünür.
		 */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		padding-bottom: 6px;
	}

	.machine-product-grid::-webkit-scrollbar {
		display: none;
	}

	.machine-product-grid > * {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}

	.machine-card__body {
		padding: 15px;
	}

	.machine-card__price {
		font-size: 19px;
	}

	.machine-card__cta {
		min-height: 46px;
	}

	.nc-product-grid--compact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 380px) {
	.machine-product-grid > * {
		flex: 0 0 89%;
	}

	.machine-card__title {
		font-size: 14px;
	}

	.machine-card__price {
		font-size: 18px;
	}
}

/* ==========================================================================
   8) Hareketi azalt
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.machine-card,
	.machine-card__image,
	.machine-card__cta,
	.machine-card__cta svg,
	.machine-card__quick,
	.machine-card__favorite {
		transition: none;
	}

	.machine-card:hover,
	.machine-card:focus-within {
		transform: none;
	}

	.machine-card:hover .machine-card__image {
		transform: none;
	}

	.machine-card:hover .machine-card__cta svg {
		transform: none;
	}

	.machine-product-grid {
		scroll-behavior: auto;
	}
}