/* T-318c: "Birlikte alınanlar" kutusu (ürün sayfası) + sepet önerisi. Yalnız token; düğme köşesi --radius-btn.
   Masaüstü: kartlar yan yana (+ ile ayrılır) ve sağda özet. Mobil: kartlar yana kaydırmalı şerit, özet altta. */
.bt { margin: var(--space-6) 0; }
.bt__inner { padding-block: 0; }
.bt__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.bt__title { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font: 700 var(--fs-lg, 1.25rem)/1.25 var(--font-heading, var(--font-body)); color: var(--color-text, inherit); }
.bt__title i { color: var(--color-primary); }
.bt__sub { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); }
.bt__chip { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: 999px; background: var(--color-success-bg); color: var(--color-success-text); border: 1px solid var(--color-success-border); font-weight: 600; font-size: var(--fs-xs, .8125rem); }

.bt__body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-4); align-items: stretch; padding: var(--space-4); border: var(--card-border, 1px solid var(--color-border)); border-radius: var(--radius-lg, var(--radius-md)); background: var(--color-surface); }

.bt__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: var(--space-2); min-width: 0; }
.bt__item { position: relative; display: flex; align-items: stretch; flex: 1 1 0; min-width: 0; }
.bt__plus { align-self: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; margin-right: var(--space-2); display: inline-grid; place-items: center; border-radius: 50%; background: var(--color-primary-tint, var(--color-primary-soft)); color: var(--color-primary); font-weight: 700; line-height: 1; }
.bt__card { position: relative; flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); grid-template-areas: "media name" "media price"; column-gap: var(--space-3); row-gap: var(--space-1); align-content: center; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.bt__card:hover { border-color: var(--color-primary); }
.bt__card:has(.bt__check:checked) { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); background: var(--color-primary-tint, var(--color-surface)); }
.bt__card:has(.bt__check:not(:checked)) { opacity: .62; }
.bt__card:has(.bt__check:focus-visible) { box-shadow: var(--focus-ring); }
.bt__check { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bt__check:disabled { cursor: default; }
/* Görsel işaret kutusu kartın köşesinde çizilir; tıklama alanı kartın tamamıdır (dokunma hedefi >= 44px) */
.bt__card::after { content: ""; position: absolute; top: var(--space-2); right: var(--space-2); width: 1.25rem; height: 1.25rem; border: 2px solid var(--color-border-input, var(--color-border)); border-radius: 6px; background: var(--color-surface); pointer-events: none; }
.bt__card:has(.bt__check:checked)::after { border-color: var(--color-primary); background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
.bt__card:has(.bt__check:disabled)::after { opacity: .55; }
.bt__media { grid-area: media; align-self: center; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-md); overflow: hidden; background: var(--color-primary-tint, var(--color-surface)); }
.bt__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bt__name { grid-area: name; align-self: end; min-width: 0; padding-right: 1.6rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--color-text, inherit); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bt__tag { display: block; margin-bottom: 1px; font-size: var(--fs-xs, .75rem); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-primary); }
.bt__var { display: block; margin-top: 1px; font-weight: 400; color: var(--color-muted); }
.bt__var[hidden] { display: none; }
.bt__open { position: absolute; right: var(--space-1); bottom: var(--space-1); z-index: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-muted); text-decoration: none; }
.bt__open:hover { color: var(--color-primary); background: var(--color-primary-tint, transparent); }
.bt__open:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.bt__price { grid-area: price; align-self: start; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text, inherit); }

.bt__sum { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding-left: var(--space-4); border-left: 1px dashed var(--color-border); }
.bt__total { display: flex; flex-direction: column; gap: 2px; }
.bt__total-label { font-size: var(--fs-sm); color: var(--color-muted); }
.bt__total-label small { margin-left: var(--space-1); }
.bt__amounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.bt__now { font: 800 var(--fs-xl, 1.5rem)/1.1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--color-text, inherit); }
.bt__old { font-size: var(--fs-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.bt__save { display: flex; align-items: center; gap: var(--space-1); margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--color-success-text); }
.bt__save.is-hint { font-weight: 400; color: var(--color-muted); }
.bt__add { width: 100%; justify-content: center; border-radius: var(--radius-btn); }
.bt__add:disabled { opacity: .55; cursor: not-allowed; }
.bt__add.is-busy { cursor: progress; }
.bt__msg { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); }
.bt__msg.is-error { color: var(--color-danger-text); }

@media (max-width: 899.98px) {
    .bt__body { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
    .bt__list { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-2); margin-inline: calc(var(--space-3) * -1); padding-inline: var(--space-3); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .bt__item { flex: 0 0 auto; width: 10.5rem; scroll-snap-align: start; }
    .bt__plus { position: absolute; left: -1.05rem; top: 2.2rem; z-index: 1; width: 1.5rem; height: 1.5rem; margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); }
    .bt__item--anchor .bt__plus { display: none; }
    .bt__card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "name" "price"; row-gap: var(--space-2); padding: var(--space-2); }
    .bt__media { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .bt__name { align-self: start; padding-right: 0; -webkit-line-clamp: 2; line-clamp: 2; min-height: 2.6em; }
    .bt__card::after { top: var(--space-3); right: var(--space-3); }
    .bt__sum { padding-left: 0; border-left: 0; border-top: 1px dashed var(--color-border); padding-top: var(--space-3); }
    .bt__total { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
}

/* Sepet: "Bunlarla birlikte alınıyor" kısa öneri (mevcut çapraz satış şeridi; mobilde yana kaydırmalı) */
.cart-cross--bt .cart-products { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--space-2); }
.cart-cross--bt .cart-products__item { flex: 0 0 12.5rem; max-width: 12.5rem; scroll-snap-align: start; }
@media (min-width: 900px) {
    .cart-cross--bt .cart-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); overflow: visible; }
    .cart-cross--bt .cart-products__item { max-width: none; }
}