/* ==========================================================
   Paket Kartları – tema renklerine bağlı (--renk, --renk2, --renk3, --renk4)
   Renkler Yönetim > Genel Ayarlar'dan değiştirildiğinde kartlar da değişir.
   ========================================================== */
.sp-card {
	--sp-accent: var(--renk2, #04b6f1);
	--sp-accent-2: var(--renk, #002cae);
	--sp-bg: #ffffff;
	--sp-line: #e7edf6;
	--sp-row-bg: #f6f8fc;
	--sp-text: #1a1b1e;
	--sp-muted: #7a8aa3;

	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 26px 24px 24px;
	border-radius: 18px;
	background:
		radial-gradient(120% 55% at 100% 0%, color-mix(in srgb, var(--sp-accent) 9%, transparent) 0%, transparent 60%),
		var(--sp-bg);
	border: 1px solid var(--sp-line);
	color: var(--sp-text);
	font-family: "Red Hat Display", sans-serif;
	text-align: left;
	box-shadow: 8px 8px 30px 0 rgba(42, 67, 113, 0.10);
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.sp-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--sp-accent), var(--sp-accent-2));
}
.sp-card:hover {
	transform: translateY(-8px);
	border-color: color-mix(in srgb, var(--sp-accent) 35%, transparent);
	box-shadow: 0 24px 45px -18px color-mix(in srgb, var(--sp-accent) 40%, rgba(42, 67, 113, 0.25));
}

/* Renk varyantları (tema renkleri) */
.sp-card.sp-cyan   { --sp-accent: var(--renk2, #04b6f1); --sp-accent-2: var(--renk, #002cae); }
.sp-card.sp-orange { --sp-accent: var(--renk4, #ff6d26); --sp-accent-2: var(--renk3, #f8413e); }
.sp-card.sp-rose   { --sp-accent: var(--renk, #002cae);  --sp-accent-2: var(--renk2, #04b6f1); }
.sp-card.sp-feature {
	border-color: color-mix(in srgb, var(--sp-accent) 35%, transparent);
	box-shadow: 0 22px 45px -20px color-mix(in srgb, var(--sp-accent) 45%, rgba(42, 67, 113, 0.25));
}

/* Başlık */
.sp-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 22px;
}
.sp-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--sp-accent);
	background: color-mix(in srgb, var(--sp-accent) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--sp-accent) 25%, transparent);
}
.sp-popular {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(90deg, var(--sp-accent), var(--sp-accent-2));
	padding: 5px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.sp-popular i { margin-right: 3px; }

/* Fiyat bölümü */
.sp-card-top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 20px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--sp-line);
}
.sp-icon {
	flex: 0 0 68px;
	height: 68px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: color-mix(in srgb, var(--sp-accent) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--sp-accent) 18%, transparent);
}
.sp-icon img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	margin: 0;
}
.sp-price {
	font-size: 38px;
	font-weight: 800;
	line-height: 1;
	color: var(--sp-text);
	letter-spacing: -0.5px;
}
.sp-price .sp-cur {
	font-size: 22px;
	font-weight: 700;
	margin-right: 3px;
	vertical-align: 10px;
	color: var(--sp-accent);
}
.sp-price small {
	font-size: 14px;
	font-weight: 600;
	margin-left: 6px;
	color: var(--sp-muted);
	letter-spacing: 0;
}
.sp-cat {
	display: inline-block;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--sp-accent) !important;
	text-decoration: none !important;
	transition: opacity 0.2s;
}
.sp-cat:hover { opacity: 0.8; }

/* Özellik satırları (renkli sol kenar, tema renkleri sırayla) */
.sp-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}
.sp-features li {
	--sp-row: var(--renk2, #04b6f1);
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 12px;
	border-radius: 9px;
	background: var(--sp-row-bg);
	border: 1px solid var(--sp-line);
	border-left: 3px solid var(--sp-row);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sp-text);
	transition: background 0.2s, transform 0.2s;
}
.sp-features li:hover {
	background: color-mix(in srgb, var(--sp-row) 6%, #fff);
	transform: translateX(3px);
}
.sp-features li:nth-child(4n + 1) { --sp-row: var(--renk2, #04b6f1); }
.sp-features li:nth-child(4n + 2) { --sp-row: var(--renk, #002cae); }
.sp-features li:nth-child(4n + 3) { --sp-row: var(--renk4, #ff6d26); }
.sp-features li:nth-child(4n + 4) { --sp-row: var(--renk3, #f8413e); }
.sp-check {
	flex: 0 0 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 6px;
	font-size: 11px;
	color: var(--sp-row);
	background: color-mix(in srgb, var(--sp-row) 12%, #fff);
}
.sp-features li.sp-hidden { display: none; }
.sp-card.sp-open .sp-features li.sp-hidden {
	display: flex;
	animation: spFade 0.3s ease both;
}
@keyframes spFade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* Daha fazla butonu */
.sp-more {
	margin-top: 10px;
	padding: 8px 0;
	background: none;
	border: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--sp-muted);
	cursor: pointer;
	text-align: left;
	transition: color 0.2s;
}
.sp-more:hover { color: var(--sp-accent); }
.sp-more i { margin-left: 4px; transition: transform 0.25s; }
.sp-card.sp-open .sp-more i { transform: rotate(180deg); }

/* Sepete ekle */
.sp-form { margin-top: auto; padding-top: 20px; }
.sp-btn {
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 12px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	background: linear-gradient(90deg, var(--sp-accent), var(--sp-accent-2));
	background-size: 160% 100%;
	background-position: 0 0;
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--sp-accent) 70%, transparent);
	transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.sp-btn i { margin-left: 8px; }
.sp-btn:hover {
	background-position: 100% 0;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--sp-accent) 80%, transparent);
}
.sp-btn:active { transform: translateY(0); }

/* Kart satırı: eşit yükseklik */
.home4-pricing .tab-content > .row { align-items: stretch !important; }
.home4-pricing .tab-content > .row > [class*="col-"] { display: flex; }
.home4-pricing .tab-content > .row > [class*="col-"] > .sp-card { width: 100%; }

@media (max-width: 991px) {
	.sp-card { max-width: 420px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.sp-card, .sp-features li, .sp-btn { transition: none; }
	.sp-card:hover { transform: none; }
}