/* ==========================================================================
   Indri Ethnics — Ürün kartı (.sc-card) — PAYLAŞILAN
   Anasayfa hero ve shop/kategori grid'i bu tek kaynaktan beslenir.
   Token'lar header.css/footer.css'ten gelir. Grid yerleşimi sayfaya aittir
   (anasayfa: .sc-hero__grid, shop: .sc-shop__grid).
   ========================================================================== */

.sc-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sc-surface);
	border: 1px solid var(--sc-border);
	/* Nötr hafif gölge → 3D/futuristik derinlik (mor tonu kaldırıldı). */
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.5s ease;
	/* Açılışta sırayla sinematik giriş (fade + yukarı + hafif scale), stagger. */
	opacity: 0;
	transform: translateY(42px) scale(0.96);
	animation: sc-card-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	animation-delay: calc(var(--sc-card-i, 1) * 0.1s);
}

@keyframes sc-card-in {
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.sc-card:hover {
	transform: translateY(-10px);
	border-color: var(--sc-accent);
	/* Hover'da nötr gölge derinleşir (daha belirgin 3D kalkış). */
	box-shadow: 0 26px 55px rgba(0, 0, 0, 0.5);
}

.sc-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--sc-bg);
}

/* Hover'da görselin altında accent çizgi soldan açılır (premium dokunuş). */
.sc-card__media::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--sc-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 1;
}

.sc-card:hover .sc-card__media::after {
	transform: scaleX(1);
}

.sc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.sc-card:hover .sc-card__img {
	transform: scale(1.05);
}

.sc-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.25rem;
}

.sc-card__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.3;
	text-transform: capitalize;
}

.sc-card__title a {
	color: var(--sc-accent);
	text-decoration: none;
	transition: color 0.3s ease;
}

.sc-card__price,
.sc-card__price .amount,
.sc-card__price bdi,
.sc-card__price ins .amount {
	font-size: 1.05rem;
	color: var(--sc-accent);
	letter-spacing: 0.02em;
}

.sc-card__price del,
.sc-card__price del .amount,
.sc-card__price del bdi {
	/* Üstü çizili (eski) fiyat: soluk, siyaha yakın gri. */
	color: rgba(214, 209, 196, 0.3);
}

.sc-card__price del {
	margin-right: 0.5em;
}

.sc-card__price ins {
	text-decoration: none;
}

/* Specificity .sc-card ile yükseltildi (0,2,0 / 0,3,0): paylaşılan .sc-btn
   (buttons.css) shop sayfasında SONRA yüklendiğinden eşit specificity'de onu
   eziyordu; bu seçici sıra-bağımsız olarak kart butonunu garanti eder. */
.sc-card .sc-card__btn {
	margin-top: auto;
	width: 100%;
	/* Normal: siyah zemin + accent (sarı) yazı; çerçeve soft sarı (düşük opacity). */
	background: var(--sc-bg);
	color: var(--sc-accent);
	border-color: rgba(200, 240, 74, 0.5);
}

.sc-card .sc-card__btn:hover,
.sc-card .sc-card__btn:focus {
	/* Hover: accent (sarı) zemin + siyah yazı. */
	background: var(--sc-accent);
	color: var(--sc-bg);
	border-color: var(--sc-accent);
}

/* Hareketi azalt tercihinde animasyonu kapat (kart görünür kalır). */
@media (prefers-reduced-motion: reduce) {
	.sc-card {
		opacity: 1;
		transform: none;
		animation: none;
	}
}