/* =========================================================
   SICAK FIRIN SAYACI — [uns_sicak_firin]
   ========================================================= */

.uns-sf {
	--sf-lacivert: #1b3a6b;
	--sf-altin: #e7a40e;
	--sf-kahve: #864d32;
	--sf-kahve-koyu: #5e3620;
	--sf-vurgu: #c0392b;
	--sf-krem: #faf6f0;
	--sf-krem-koyu: #f0e6d8;
	--sf-cizgi: #e9ded0;
	--sf-metin: #241c15;
	--sf-soluk: #7a6d5f;
	background: #fff;
	border: 1px solid var(--sf-cizgi);
	border-radius: 20px;
	padding: 32px;
}

.uns-sf__ust {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.uns-sf__etiket {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sf-vurgu);
	margin-bottom: 10px;
}

.uns-sf__nokta {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sf-vurgu);
	animation: unsSfNabiz 1.6s ease-in-out infinite;
}

@keyframes unsSfNabiz {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .45; transform: scale(1.3); }
}

.uns-sf__baslik {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 30px;
	font-weight: 700;
	color: var(--sf-kahve-koyu);
	line-height: 1.25;
	margin-bottom: 8px;
}

.uns-sf__aciklama {
	font-size: 14.5px;
	color: var(--sf-soluk);
	max-width: 560px;
	line-height: 1.5;
}

.uns-sf__sayac {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--sf-krem);
	border: 1px solid var(--sf-cizgi);
	border-radius: 14px;
	padding: 14px 20px;
	flex-shrink: 0;
}

.uns-sf__sayac svg {
	width: 26px;
	height: 26px;
	color: var(--sf-kahve);
	flex-shrink: 0;
}

.uns-sf__sayac em {
	display: block;
	font-style: normal;
	font-size: 11.5px;
	color: var(--sf-soluk);
	margin-bottom: 2px;
}

.uns-sf__sayac strong {
	font-size: 19px;
	font-weight: 700;
	color: var(--sf-lacivert);
	font-variant-numeric: tabular-nums;
}

.uns-sf__izgara {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 22px;
}

.uns-sf__kart {
	background: var(--sf-krem);
	border: 1px solid var(--sf-cizgi);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease;
}

.uns-sf__kart:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(36, 28, 21, .1);
}

.uns-sf__resim {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--sf-krem-koyu);
}

.uns-sf__resim img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.uns-sf__rozet {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--sf-kahve);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	padding: 5px 11px;
	border-radius: 20px;
	white-space: nowrap;
}

.uns-sf__govde {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.uns-sf__ad {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}

.uns-sf__ad a {
	color: var(--sf-metin);
	text-decoration: none;
}

.uns-sf__bar {
	height: 6px;
	border-radius: 20px;
	background: var(--sf-krem-koyu);
	overflow: hidden;
}

.uns-sf__bar-dolu {
	height: 100%;
	background: var(--sf-altin);
	border-radius: 20px;
	transition: width .3s ease;
}

.uns-sf__durum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12.5px;
}

.uns-sf__durum > span:first-child {
	color: var(--sf-soluk);
}

.uns-sf__yuzde {
	color: var(--sf-vurgu);
	font-weight: 700;
}

.uns-sf__alt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 4px;
}

.uns-sf__fiyat {
	font-size: 17px;
	font-weight: 700;
	color: var(--sf-kahve-koyu);
}

.uns-sf__fiyat del {
	font-size: 13px;
	font-weight: 400;
	color: var(--sf-soluk);
	opacity: .7;
	margin-right: 4px;
}

.uns-sf__btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--sf-kahve);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color .15s ease, transform .15s ease;
}

.uns-sf__btn:hover {
	background: var(--sf-kahve-koyu);
	transform: scale(1.06);
}

.uns-sf__btn svg {
	width: 18px;
	height: 18px;
}

.uns-sf__btn.loading {
	opacity: .6;
	pointer-events: none;
}

@media (max-width: 780px) {
	.uns-sf { padding: 22px 18px; border-radius: 16px; }
	.uns-sf__baslik { font-size: 23px; }
	.uns-sf__izgara { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
	.uns-sf__sayac { width: 100%; }
}