/* ==========================================================================
   Paket Detay Sayfası - Sayfa Geneli Scoped Ayarlar (Aşama 5.2 / 5.2.1)
   Yalnızca single-package şablonunda (body.single-package) geçerlidir;
   .pabiar-section / .pabiar-process ana sayfa ve landing sayfalarında da
   kullanıldığı için global olarak DEĞİŞTİRİLMEDİ - burada body class ile
   scoped edilir. Bu dosya zaten yalnızca is_singular('package')
   durumunda enqueue edilir (bkz. inc/enqueue.php); .single-package
   önekleri ek bir güvenlik katmanı olarak bilinçli kullanılmıştır.
   ========================================================================== */
.single-package .pabiar-section {
	padding-block: clamp(48px, 6vw, 80px);
}

.single-package .pabiar-process {
	text-align: center;
}

/* Gerçek marka renkleri (Amazon Orange / Shopify Green) - yalnızca paket
   detay sayfasında tanımlı, global --pabiar-shopify-accent /
   --pabiar-amazon-accent değişkenleri (home/landing/service_addon'da
   kullanılıyor) DEĞİŞTİRİLMEDİ. Bu, tamamen ayrı/yeni bir değişken seti. */
.single-package {
	--pabiar-amazon-bright: #FF9900;
	--pabiar-shopify-bright: #95BF47;
}

/* ==========================================================================
   Section Zemin Varyantları (Aşama 5.2.1 - görsel ritim)
   Yeni sınıf adları (pabiar-section--white / --brand-tint), bu dosyanın
   dışında hiçbir yerde kullanılmıyor (yalnızca image-text-section.php ve
   faq.php - ikisi de paket detay sayfasına özel).
   ========================================================================== */
.pabiar-section--white {
	background: #fff;
}

.pabiar-section--brand-tint {
	background: linear-gradient(135deg, rgba(18, 107, 255, 0.045), rgba(0, 191, 234, 0.045));
}

/* Önemli Notlar accent tonu: Aşama 5.2'deki koyu/mat tonun yerine gerçek
   marka rengine daha yakın, hâlâ çok açık bir tint (yalnızca paket detayında). */
.single-package .pabiar-section--bg-accent-amazon {
	background: rgba(255, 153, 0, 0.06);
}

.single-package .pabiar-section--bg-accent-shopify {
	background: rgba(149, 191, 71, 0.07);
}

/* ==========================================================================
   Paket Detay Sayfası - Hero
   ========================================================================== */
.pabiar-package-hero {
	position: relative;
	background: var(--pabiar-navy);
	overflow: hidden;
	padding-block: clamp(72px, 10vw, 104px) clamp(56px, 7vw, 80px);
	border-top: 3px solid transparent;
}

.pabiar-package-hero--shopify {
	border-top-color: var(--pabiar-shopify-bright);
}

.pabiar-package-hero--amazon {
	border-top-color: var(--pabiar-amazon-bright);
}

.pabiar-package-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(247, 248, 250, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(247, 248, 250, 0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 65% 65% at 25% 30%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 65% 65% at 25% 30%, #000 0%, transparent 75%);
}

.pabiar-package-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

@media (min-width: 900px) {
	.pabiar-package-hero__inner {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 48px;
	}
}

/* Platform logo (görsel yüklenmişse) - marka rengiyle ince bir alt çizgi. */
.pabiar-platform-logo {
	display: inline-block;
	margin-bottom: 22px;
	padding-bottom: 10px;
	border-bottom: 2px solid rgba(247, 248, 250, 0.18);
}

.pabiar-platform-logo--amazon {
	border-bottom-color: rgba(255, 153, 0, 0.45);
}

.pabiar-platform-logo--shopify {
	border-bottom-color: rgba(149, 191, 71, 0.45);
}

/* Platform text badge fallback - hero (navy) bağlamına özel, daha rafine
   ve belirgin kontrast. NOT: .pabiar-platform-badge--shopify/--amazon
   GENEL tanımı (detail-shared.css) service_addon hero'sunda da
   kullanıldığı için burada DEĞİŞTİRİLMEDİ; yalnızca hero içinde scoped
   override yapılır. */
.pabiar-package-hero .pabiar-platform-badge {
	padding: 7px 16px;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	border: 1px solid transparent;
	margin-bottom: 4px;
}

.pabiar-package-hero .pabiar-platform-badge--amazon {
	color: #FFC266;
	background: rgba(255, 153, 0, 0.14);
	border-color: rgba(255, 153, 0, 0.38);
}

.pabiar-package-hero .pabiar-platform-badge--shopify {
	color: #B7E39A;
	background: rgba(149, 191, 71, 0.16);
	border-color: rgba(149, 191, 71, 0.4);
}

.pabiar-package-hero__title {
	color: var(--pabiar-white);
	font-size: clamp(1.9rem, 2.6vw + 1rem, 2.75rem);
	line-height: 1.15;
	margin: 16px 0 14px;
}

.pabiar-package-hero__desc {
	color: rgba(247, 248, 250, 0.78);
	font-size: 1rem;
	max-width: 520px;
	margin-bottom: 24px;
}

.pabiar-package-hero__price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 28px;
}

.pabiar-package-hero__price-amount {
	font-size: 2rem;
	font-weight: 800;
	color: var(--pabiar-white);
}

.pabiar-package-hero__price-vat {
	font-size: 0.85rem;
	color: rgba(247, 248, 250, 0.6);
}

.pabiar-package-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pabiar-package-hero__ctas .pabiar-btn--outline {
	color: var(--pabiar-white);
	border-color: rgba(247, 248, 250, 0.35);
}

.pabiar-package-hero__ctas .pabiar-btn--outline:hover,
.pabiar-package-hero__ctas .pabiar-btn--outline:focus-visible {
	border-color: var(--pabiar-cyan);
	color: var(--pabiar-cyan);
}

.pabiar-package-hero__summary {
	background: rgba(247, 248, 250, 0.98);
	border-radius: var(--pabiar-radius);
	box-shadow: var(--pabiar-shadow-strong);
	padding: 28px;
}

.pabiar-package-hero__summary-title {
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	color: var(--pabiar-navy);
	margin-bottom: 16px;
}

.pabiar-package-hero__summary-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.pabiar-package-hero__summary-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9rem;
	color: var(--pabiar-slate);
}

.pabiar-package-hero__summary-check {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--pabiar-green);
}

.pabiar-package-hero__summary-link {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--pabiar-blue);
}

.pabiar-package-hero__summary-link:hover,
.pabiar-package-hero__summary-link:focus-visible {
	color: var(--pabiar-cyan);
}

/* ==========================================================================
   Paket Kapsamı (tam özellik listesi) - okunabilirlik büyütüldü
   ========================================================================== */
.pabiar-package-scope__grid {
	max-width: 980px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px 40px;
}

@media (min-width: 720px) {
	.pabiar-package-scope__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.pabiar-package-scope__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font-size: 1.0625rem; /* ~17px */
	line-height: 1.7;
	color: var(--pabiar-slate);
}

.pabiar-package-scope__check {
	flex-shrink: 0;
	width: 19px;
	height: 19px;
	margin-top: 4px;
	color: var(--pabiar-green);
}

/* ==========================================================================
   İçerik Kartı (Dahil Olmayanlar / Önemli Notlar) - Aşama 5.2.1: gerçek
   "content card" görünümü (önceden yalnızca max-width ile ortalanmış çıplak
   metindi, "metin adası" hissi veriyordu).
   ========================================================================== */
.single-package .pabiar-content-card {
	max-width: 960px;
	background: #fff;
	border: 1px solid rgba(6, 24, 46, 0.08);
	border-radius: var(--pabiar-radius);
	box-shadow: var(--pabiar-shadow);
	padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
}

/* Dahil Olmayanlar: nötr, alarm/hata tasarımı yok. */
.single-package .pabiar-content-card--not-included {
	border-top: 3px solid rgba(6, 24, 46, 0.12);
}

/* Önemli Notlar: platforma göre çok hafif accent (üst kenarlık). */
.single-package .pabiar-content-card--accent-amazon {
	border-top: 3px solid var(--pabiar-amazon-bright);
}

.single-package .pabiar-content-card--accent-shopify {
	border-top: 3px solid var(--pabiar-shopify-bright);
}

.pabiar-scope-notes__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pabiar-scope-notes__list li {
	position: relative;
	padding-left: 28px;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--pabiar-slate);
}

.pabiar-scope-notes__list--minus li::before {
	content: '\2212';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--pabiar-slate);
	opacity: 0.55;
	font-weight: 700;
}

.pabiar-scope-notes__list--info li::before {
	content: '\24D8';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--pabiar-blue);
	font-weight: 700;
}

/* Önemli Notlar ikonu: platforma göre çok hafif accent (info ikonu). */
.pabiar-scope-notes__list--accent-amazon li::before {
	color: var(--pabiar-amazon-bright);
}

.pabiar-scope-notes__list--accent-shopify li::before {
	color: var(--pabiar-shopify-bright);
}

/* ==========================================================================
   Image-with-Text (Paket Hakkında / Kimler İçin Uygun) - Aşama 5.2.1:
   text kolonu biraz daha geniş, görsel dengeyi bozmadan.
   ========================================================================== */
@media (min-width: 860px) {
	.single-package .pabiar-image-text--split {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 64px;
	}
}

.single-package .pabiar-image-text__body {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.single-package .pabiar-image-text__media {
	border: 1px solid rgba(6, 24, 46, 0.06);
}

/* ==========================================================================
   Süreç: Açıklama + Tahmini Teslim Süresi rozeti - platform accent
   (yalnızca hero'nun platformuna göre, genel kardeş seçici ile; process-
   steps.php shared component'i landing sayfalarında da kullanıldığı için
   PHP tarafında değiştirilmedi - bu kural yalnızca paket detay hero'sundan
   SONRA gelen .pabiar-process__delivery'yi hedefler).
   ========================================================================== */
.pabiar-process__delivery {
	padding: 11px 22px;
	border-width: 1.5px;
}

.pabiar-package-hero--amazon ~ * .pabiar-process__delivery {
	border-color: rgba(255, 153, 0, 0.45);
	background: rgba(255, 153, 0, 0.06);
}

.pabiar-package-hero--shopify ~ * .pabiar-process__delivery {
	border-color: rgba(149, 191, 71, 0.45);
	background: rgba(149, 191, 71, 0.07);
}

.pabiar-package-hero--amazon ~ * .pabiar-process__delivery-value {
	color: #B36200;
}

.pabiar-package-hero--shopify ~ * .pabiar-process__delivery-value {
	color: #4C7A2E;
}

/* Süreç adım numarası dairelerinde çok kontrollü platform ipucu (ince halka). */
.pabiar-package-hero--amazon ~ * .pabiar-process__number {
	box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.18);
}

.pabiar-package-hero--shopify ~ * .pabiar-process__number {
	box-shadow: 0 0 0 3px rgba(149, 191, 71, 0.18);
}

/* ==========================================================================
   FAQ Accordion (accessibility/JS DEĞİŞMEDİ - yalnızca dış konumlandırma
   .pabiar-faq-wrap ile detail-shared.css'te ortalandı; burada yalnızca
   typography okunabilirliği artırıldı)
   ========================================================================== */
.pabiar-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pabiar-faq__item {
	background: #fff;
	border: 1px solid rgba(6, 24, 46, 0.08);
	border-radius: var(--pabiar-radius-sm);
}

.pabiar-faq__question {
	margin: 0;
}

.pabiar-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: transparent;
	border: none;
	text-align: left;
	padding: 20px 22px;
	font-size: 1.03rem;
	font-weight: 600;
	color: var(--pabiar-navy);
}

.pabiar-faq__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
}

.pabiar-faq__icon::before,
.pabiar-faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--pabiar-blue);
	transform: translate(-50%, -50%);
	transition: transform var(--pabiar-transition);
}

.pabiar-faq__icon::before {
	width: 12px;
	height: 2px;
}

.pabiar-faq__icon::after {
	width: 2px;
	height: 12px;
}

.pabiar-faq.is-enhanced .pabiar-faq__item.is-open .pabiar-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.pabiar-faq__answer {
	padding: 0 22px 20px;
	color: var(--pabiar-slate);
	font-size: 1rem;
	line-height: 1.7;
	overflow-wrap: break-word;
	word-break: break-word;
}

.pabiar-faq__answer p {
	margin: 0;
}

/* JS aktifken (progressive enhancement): cevaplar varsayılan olarak
   gizli, yalnızca açık öğede görünür. JS kapalıysa .is-enhanced sınıfı
   hiç eklenmez ve tüm cevaplar DOM'da normal şekilde görünür kalır. */
.pabiar-faq.is-enhanced .pabiar-faq__answer {
	display: none;
}

.pabiar-faq.is-enhanced .pabiar-faq__item.is-open .pabiar-faq__answer {
	display: block;
}

/* ==========================================================================
   Uzun kelime/URL taşması koruması
   ========================================================================== */
.pabiar-image-text__body,
.pabiar-content-card,
.pabiar-package-hero__desc,
.pabiar-package-hero__title {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* ==========================================================================
   Aşama 6.2 — Paket detay görsel ritmi
   Mevcut veri modelini değiştirmez; daha önce eklenen Hakkında/Kimler İçin
   Uygun görsellerini 16:9 içerik görseli olarak daha güçlü sergiler.
   ========================================================================== */
.single-package .pabiar-image-text__media {
	aspect-ratio: 16 / 9;
	box-shadow: 0 18px 48px rgba(6, 24, 46, 0.12);
}

.single-package .pabiar-image-text__content {
	max-width: 680px;
}

.single-package .pabiar-package-scope__grid {
	gap: 14px;
}

.single-package .pabiar-package-scope__item {
	background: #fff;
	border: 1px solid rgba(6, 24, 46, 0.07);
	border-radius: 14px;
	padding: 18px 20px;
	box-shadow: 0 8px 24px rgba(6, 24, 46, 0.045);
}


/* Stage 6.2.1: package detail hero image */
.single-package .pabiar-package-hero__aside {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}
.single-package .pabiar-package-hero__media {
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.28);
	border: 1px solid rgba(255,255,255,.12);
	aspect-ratio: 16 / 9;
}
.single-package .pabiar-package-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ==========================================================================
   Stage 6.2.7 — Integrated package hero height refinement
   Hero görseli sağda tam yüzey olarak kalır; paket özeti aşağıdaki ayrı
   "Paket Kapsamı" bölümünde gösterildiği için gereksiz dikey alan kaldırıldı.
   ========================================================================== */
.single-package .pabiar-package-hero--with-image {
	isolation: isolate;
	min-height: clamp(440px, 32vw, 500px);
	padding-block: 0;
}

.single-package .pabiar-package-hero--with-image .pabiar-package-hero__bg {
	z-index: 0;
	opacity: .56;
}

.single-package .pabiar-package-hero--with-image .pabiar-package-hero__inner {
	min-height: inherit;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0;
}

.single-package .pabiar-package-hero--with-image .pabiar-package-hero__content {
	position: relative;
	z-index: 4;
	width: min(51%, 620px);
	max-width: 620px;
	padding-block: clamp(54px, 5vw, 72px);
	padding-right: clamp(24px, 4vw, 58px);
}

.single-package .pabiar-package-hero--with-image .pabiar-package-hero__aside {
	position: static;
}

.single-package .pabiar-package-hero--with-image .pabiar-package-hero__media {
	position: absolute;
	inset-block: 0;
	right: calc((100vw - 100%) / -2);
	width: calc(60% + ((100vw - 100%) / 2));
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	z-index: 1;
}

.single-package .pabiar-package-hero--with-image .pabiar-package-hero__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(90deg,
		var(--pabiar-navy) 0%,
		rgba(6,24,46,.98) 6%,
		rgba(6,24,46,.84) 18%,
		rgba(6,24,46,.44) 33%,
		rgba(6,24,46,.10) 49%,
		transparent 63%);
}

.single-package .pabiar-package-hero--with-image .pabiar-package-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.single-package .pabiar-package-hero--with-image .pabiar-package-hero__summary {
	position: absolute;
	right: 0;
	bottom: clamp(34px, 5vw, 58px);
	z-index: 4;
	width: min(360px, 31vw);
	background: rgba(247, 248, 250, .93);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 18px 48px rgba(0,0,0,.20);
}

@media (max-width: 899px) {
	.single-package .pabiar-package-hero--with-image {
		min-height: 0;
		padding-block: 0;
	}

	.single-package .pabiar-package-hero--with-image .pabiar-package-hero__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding-inline: 0;
	}

	.single-package .pabiar-package-hero--with-image .pabiar-package-hero__content {
		width: auto;
		max-width: none;
		padding: 56px var(--pabiar-container-padding, 24px) 34px;
	}

	.single-package .pabiar-package-hero--with-image .pabiar-package-hero__aside {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.single-package .pabiar-package-hero--with-image .pabiar-package-hero__media {
		position: relative;
		inset: auto;
		right: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.single-package .pabiar-package-hero--with-image .pabiar-package-hero__media::before {
		background: linear-gradient(180deg,
			var(--pabiar-navy) 0%,
			rgba(6,24,46,.72) 10%,
			rgba(6,24,46,.16) 28%,
			transparent 45%);
	}

	.single-package .pabiar-package-hero--with-image .pabiar-package-hero__summary {
		position: relative;
		right: auto;
		bottom: auto;
		width: auto;
		margin: -22px var(--pabiar-container-padding, 24px) 36px;
		z-index: 4;
	}
}

/* ==========================================================================
   Aşama 6.2.8 — Paket detayında diğer paketlere hızlı erişim
   ========================================================================== */
.pabiar-related-packages {
	padding: 72px 0;
	background: #f7f8fa;
	border-top: 1px solid rgba(6, 24, 46, 0.06);
}

.pabiar-related-packages__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 30px;
}

.pabiar-related-packages__eyebrow {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pabiar-blue);
}

.pabiar-related-packages--amazon .pabiar-related-packages__eyebrow {
	color: #e89118;
}

.pabiar-related-packages__title {
	margin: 0 0 8px;
	font-size: clamp(1.65rem, 2.4vw, 2.2rem);
	line-height: 1.15;
	color: var(--pabiar-navy);
}

.pabiar-related-packages__intro {
	max-width: 620px;
	margin: 0;
	color: var(--pabiar-slate);
}

.pabiar-related-packages__all-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--pabiar-blue);
	text-decoration: none;
}

.pabiar-related-packages--amazon .pabiar-related-packages__all-link {
	color: #c97808;
}

.pabiar-related-packages__all-link:hover,
.pabiar-related-packages__all-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.pabiar-related-packages__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	max-width: 920px;
}

.pabiar-related-package-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 28px;
	background: #fff;
	border: 1px solid rgba(6, 24, 46, 0.09);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(6, 24, 46, 0.07);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.pabiar-related-package-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 38px rgba(6, 24, 46, 0.11);
}

.pabiar-related-package-card--featured {
	border-color: rgba(18, 107, 255, 0.4);
}

.pabiar-related-packages--amazon .pabiar-related-package-card--featured {
	border-color: rgba(232, 145, 24, 0.52);
}

.pabiar-related-package-card__badge {
	position: absolute;
	top: 18px;
	right: 18px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(18, 107, 255, 0.09);
	color: var(--pabiar-blue);
}

.pabiar-related-packages--amazon .pabiar-related-package-card__badge {
	background: rgba(232, 145, 24, 0.11);
	color: #a96000;
}

.pabiar-related-package-card__title {
	margin: 0 0 14px;
	padding-right: 90px;
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--pabiar-navy);
}

.pabiar-related-package-card__price {
	display: flex;
	align-items: baseline;
	gap: 7px;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid rgba(6, 24, 46, 0.08);
}

.pabiar-related-package-card__price strong {
	font-size: 1.45rem;
	line-height: 1;
	color: var(--pabiar-navy);
}

.pabiar-related-package-card__price span {
	font-size: 0.78rem;
	color: var(--pabiar-slate);
}

.pabiar-related-package-card__features {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	flex-grow: 1;
}

.pabiar-related-package-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--pabiar-slate);
}

.pabiar-related-package-card__features li > span {
	color: var(--pabiar-green);
	font-weight: 800;
}

.pabiar-related-package-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 13px 15px;
	border-radius: 10px;
	background: #eef4ff;
	color: var(--pabiar-blue);
	font-weight: 800;
	text-decoration: none;
	transition: background 180ms ease, color 180ms ease;
}

.pabiar-related-packages--amazon .pabiar-related-package-card__link {
	background: #fff5e8;
	color: #ad6200;
}

.pabiar-related-package-card__link:hover,
.pabiar-related-package-card__link:focus-visible {
	background: var(--pabiar-blue);
	color: #fff;
}

.pabiar-related-packages--amazon .pabiar-related-package-card__link:hover,
.pabiar-related-packages--amazon .pabiar-related-package-card__link:focus-visible {
	background: #e89118;
	color: #fff;
}

/* ==========================================================================
   Aşama 6.2.9 — Shopify related package renkleri
   Amazon varyantına dokunmadan Shopify kartlarını marka yeşiline taşır.
   ========================================================================== */
.pabiar-related-packages--shopify .pabiar-related-packages__eyebrow,
.pabiar-related-packages--shopify .pabiar-related-packages__all-link {
	color: #5e8e3e;
}

.pabiar-related-packages--shopify .pabiar-related-package-card--featured {
	border-color: rgba(149, 191, 71, 0.62);
}

.pabiar-related-packages--shopify .pabiar-related-package-card__badge {
	background: rgba(149, 191, 71, 0.14);
	color: #4f7934;
}

.pabiar-related-packages--shopify .pabiar-related-package-card__link {
	background: rgba(149, 191, 71, 0.13);
	color: #4f7934;
}

.pabiar-related-packages--shopify .pabiar-related-package-card__link:hover,
.pabiar-related-packages--shopify .pabiar-related-package-card__link:focus-visible {
	background: #5e8e3e;
	color: #fff;
}

@media (max-width: 760px) {
	.pabiar-related-packages {
		padding: 54px 0;
	}

	.pabiar-related-packages__header {
		align-items: flex-start;
		flex-direction: column;
		gap: 16px;
	}

	.pabiar-related-packages__grid {
		grid-template-columns: 1fr;
	}

	.pabiar-related-package-card {
		padding: 24px;
	}
}