/* Birlikte Al bloğu — ürün alanının altında tam genişlik kart, yatay kaydırmalı.
   Kart, altındaki "Bunlar da İlginizi Çekebilir" başlığıyla aynı sol/sağ raya
   oturur; içerik kartın kendi padding'i kadar içeridedir (referans düzen).
   Renkler pt-urun-sayfasi tasarım dilinden: mavi aksan, siyah metin. */
.pt-ba {
	--ptba-ink: #000;
	--ptba-ink-soft: #6e6e73;
	--ptba-line: #e6e6ea;
	--ptba-accent: #165EC9;
	--ptba-accent-dk: #104a9f;
	--ptba-tint: #f1f6fe;
	--ptba-tint-line: #d3e2fa;
	margin: 32px 0 36px;
}

.pt-ba-card {
	border: 1px solid var(--ptba-line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

/* scroll-behavior BURADA TANIMLANMAZ: CSS'te smooth iken scroll-snap ile
   birleşince Chrome programatik kaydırmayı iptal edip geri snap'liyor. */
.pt-ba-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.pt-ba-track::-webkit-scrollbar { display: none; }

.pt-ba-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: flex;
	align-items: stretch;
	gap: 24px;
	padding: 22px 24px 22px 36px;
	box-sizing: border-box;
}

.pt-ba-headline {
	flex: 0 0 auto;
	align-self: center;
	max-width: 200px;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.35;
	color: var(--ptba-ink);
	letter-spacing: -.01em;
}
.pt-ba-headline-top { display: block; }
.pt-ba-headline .amount { white-space: nowrap; color: var(--ptba-ink); }

.pt-ba-pair { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; align-self: center; }
.pt-ba-media {
	width: 112px; height: 112px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--ptba-line); border-radius: 8px;
	background: #fff; padding: 6px; box-sizing: border-box;
}
.pt-ba-media img { max-width: 100%; max-height: 100%; height: auto; display: block; }
.pt-ba-plus { font-size: 24px; font-weight: 400; color: var(--ptba-ink-soft); }

.pt-ba-info {
	flex: 1 1 auto; min-width: 0; align-self: center;
	display: flex; flex-direction: column; gap: 6px;
}
.pt-ba-badge {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--ptba-accent); color: #fff;
	font-size: 12px; font-weight: 600;
	padding: 5px 11px; border-radius: 6px;
}
.pt-ba-badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pt-ba-badge .amount { color: #fff; }
.pt-ba-name {
	font-size: 16px; font-weight: 600; color: var(--ptba-ink); text-decoration: none; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-ba-name:hover { color: var(--ptba-accent); }
.pt-ba-old { color: #9a9aa0; text-decoration: line-through; font-size: 14px; }
.pt-ba-old .amount { color: #9a9aa0; font-weight: 400; }
.pt-ba-new { color: var(--ptba-accent); font-size: 21px; font-weight: 700; }
.pt-ba-new .amount { color: var(--ptba-accent); }

/* Sağ panel: kartın yüksekliğini doldurur, referanstaki ağırlığı taşır. */
.pt-ba-total {
	flex: 0 0 300px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	background: var(--ptba-tint); border: 1px solid var(--ptba-tint-line);
	border-radius: 10px; padding: 22px 26px;
}
.pt-ba-total-label { font-size: 15px; color: var(--ptba-ink); }
.pt-ba-total-value { font-size: 26px; font-weight: 700; color: var(--ptba-accent); }
.pt-ba-total-value .amount { color: var(--ptba-accent); }
.pt-ba-add {
	width: 100%; margin: 14px 0 0;
	border: 1px solid var(--ptba-accent); border-radius: 8px;
	background: #fff; color: var(--ptba-accent);
	font-weight: 600; font-size: 15px; line-height: 1.2;
	padding: 13px 12px; cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.pt-ba-add:hover { background: var(--ptba-accent); color: #fff; }
.pt-ba-add[disabled], .pt-ba-add.is-busy { opacity: .55; cursor: default; }

/* Alt bar: yalnız iki ok, kartın tam ortasında. Nokta göstergesi kaldırıldı;
   duruyorken genişliği slayt sayısına göre değiştiği için ok ikilisini kartın
   merkezinden 8 px kaydırıyordu (ölçüldü). */
.pt-ba-foot {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	padding: 0 0 18px;
}
.pt-ba-arrow {
	flex: 0 0 auto;
	width: 32px; height: 32px; padding: 0; min-width: 0; min-height: 0;
	/* Tema butonlara sağ/alt margin veriyor; son butonun görünmez margin'i
	   ok ikilisini kartın merkezinden 8 px sola kaydırıyordu (ölçüldü). */
	margin: 0;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--ptba-line); border-radius: 999px;
	background: #fff; color: var(--ptba-ink); cursor: pointer; line-height: 0;
}
.pt-ba-arrow:hover { border-color: var(--ptba-accent); color: var(--ptba-accent); }
/* Tema `svg { width: auto }` uyguluyor; simge flex içinde 0'a çöküyordu. */
.pt-ba-arrow svg { width: 17px; height: 17px; flex: 0 0 auto; }


/* Tablet / küçük masaüstü: tek satır düzeni ~1120 px kart genişliği istiyor
   (başlık 200 + görsel çifti 268 + bilgi ~220 + panel 300 + boşluklar). Container
   bunun altına düşünce bilgi kolonu eziliyor ve metinler iç içe giriyordu.
   Bu aralıkta satır üçe bölünür: başlık · (görseller + bilgi) · panel. */
@media (min-width: 850px) and (max-width: 1199px) {
	.pt-ba-slide {
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 20px;
		padding: 20px 24px;
	}
	.pt-ba-headline { flex: 1 1 100%; max-width: none; align-self: flex-start; font-size: 20px; }
	.pt-ba-pair { flex: 0 0 auto; }
	.pt-ba-info { flex: 1 1 220px; }
	.pt-ba-total { flex: 1 1 100%; padding: 16px 20px; }
	.pt-ba-add { max-width: 360px; }
}

@media (max-width: 849px) {
	.pt-ba-slide { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px 16px; }
	.pt-ba-headline { max-width: none; font-size: 19px; align-self: flex-start; }
	.pt-ba-pair { justify-content: center; }
	.pt-ba-media { width: 100px; height: 100px; }
	.pt-ba-total { flex: 1 1 auto; }
}