/* Canlı Satın Alma modülü: satın alma + müşteri sonucu akışı. Tüm sınıflar csa- ile başlar; yazı tipi sayfadan gelir. */
.csa,
.csa * {
	box-sizing: border-box;
}
.csa {
	--csa-kart: 88px; /* kart yüksekliği: liste yüksekliği sabit kalsın, sayfa zıplamasın */
	--csa-ara: 6px;

	color: #5e5e5e;
	line-height: 1.5;
}

.csa-kutu {
	width: 95%;
	margin: 8px auto 0;
	border-radius: 5px;
	background-color: #efefef;
}

.csa-stok {
	padding: 0 12px;
	font-size: 18px;
	color: #fff;
	border-top-left-radius: 5px;
	background: linear-gradient(90deg, #e51956 38%, rgba(255, 255, 255, 0) 100%);
}

.csa-liste {
	display: flex;
	flex-direction: column;
	gap: var(--csa-ara);
	height: calc(3 * var(--csa-kart) + 2 * var(--csa-ara) + 16px);
	padding: 8px;
	overflow: hidden;
}

/* ---------- Kart ---------- */
.csa-kayit {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 var(--csa-kart);
	padding: 0 12px;
	border-radius: 5px;
	background: #fff;
	transition:
		margin-top 0.6s ease,
		opacity 0.6s ease;
}
.csa-kayit.csa-giris {
	margin-top: calc(-1 * (var(--csa-kart) + var(--csa-ara)));
	opacity: 0;
}

.csa-avatar {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #ccc;
	object-fit: cover;
}

.csa-metin {
	min-width: 0;
	font-size: 14px;
	line-height: 1.3;
}
.csa-isim {
	margin-bottom: 2px;
	font-size: 16px;
	font-weight: 700;
	color: #333;
}
.csa-sonuc {
	margin-top: 2px;
	font-weight: 700;
	color: #1e7e34;
}
.csa-sonuc::before {
	content: "✓ ";
}
.csa-tip-satis .csa-satir::before {
	content: "🛒 ";
}

/* ---------- Kayan mesajlar ---------- */
.csa-mesajlar {
	position: relative;
	height: 30px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.csa-mesaj {
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	transform: translateY(100%);
	transition:
		transform 1s,
		opacity 1s;
}
.csa-mesaj.csa-gorunur {
	opacity: 1;
	transform: translateY(0);
}
.csa-mesaj.csa-giden {
	opacity: 0;
	transform: translateY(-100%);
}
.csa-vurgu {
	color: #f27a1a;
}

@media (prefers-reduced-motion: reduce) {
	.csa-kayit,
	.csa-mesaj {
		transition: none;
	}
}