/* ============================================================
   bento-cart-modal.css
   Cart popup (modal on >=768px, right-side drawer on <768px)
   Namespace: .bn-cart-*  |  Tokens: bento-edu.css (--bn-*)
   PHP placeholders (vanilla-php-expert tr() ile dolduracak):
     "Sepetim" / "Sepete Git" / "Ödemeye Geç" / "Kapat" / "Sil"
     "Sepetinizde ürün yok" / "Eğitimleri Keşfet" / "Toplam"
   ============================================================ */

/* Body lock (script bn-cart-open ekler/çıkarır) ---------------- */
body.bn-cart-open { overflow: hidden; touch-action: none; }

/* Root container ---------------------------------------------- */
.bn-cart-modal {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  font-family: var(--bn-font, 'Inter', system-ui, sans-serif);
  color: var(--bn-text, #18181B);
}
.bn-cart-modal[hidden] { display: none; }

/* Overlay ----------------------------------------------------- */
.bn-cart-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 27, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .2s ease-out;
  cursor: pointer;
}
.bn-cart-modal.is-open .bn-cart-modal__overlay { opacity: 1; }

/* Panel (desktop default = centered modal) -------------------- */
.bn-cart-modal__panel {
  position: relative;
  margin: auto;
  width: min(92vw, 720px);
  max-height: 88vh;
  background: var(--bn-surface, #fff);
  border-radius: 18px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .35), 0 8px 24px -10px rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: transform .26s cubic-bezier(.32, .72, .16, 1),
              opacity .22s ease-out;
  outline: none;
}
.bn-cart-modal.is-open .bn-cart-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.bn-cart-modal__panel:focus-visible {
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .35),
              0 0 0 3px rgba(231, 66, 56, .3);
}

/* Header ------------------------------------------------------ */
.bn-cart-modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--bn-s-3, 12px);
  padding: 18px 22px;
  background: var(--bn-surface, #fff);
  border-bottom: 1px solid var(--bn-border, #E4E4E7);
}
.bn-cart-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bn-text, #18181B);
}
.bn-cart-modal__count {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--bn-brand-ink, #B91C1C);
  background: var(--bn-brand-soft, #FFEEEB);
  border-radius: 999px;
}
.bn-cart-modal__close {
  margin-left: auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--bn-text-soft, #3F3F46);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bn-cart-modal__close:hover {
  background: var(--bn-surface-2, #F4F4F5);
  color: var(--bn-text, #18181B);
}
.bn-cart-modal__close:focus-visible {
  outline: none;
  border-color: var(--bn-brand, #E74238);
  box-shadow: 0 0 0 3px rgba(231, 66, 56, .25);
}
.bn-cart-modal__close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Body (scrollable) ------------------------------------------- */
.bn-cart-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
}

.bn-cart-modal__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bn-cart-modal__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--bn-border, #E4E4E7);
  transition: background .15s ease;
}
.bn-cart-modal__item:last-child { border-bottom: 0; }
.bn-cart-modal__item:hover { background: var(--bn-surface-2, #F4F4F5); }

.bn-cart-modal__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bn-surface-2, #F4F4F5);
  border: 1px solid var(--bn-border, #E4E4E7);
}

.bn-cart-modal__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bn-cart-modal__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bn-text, #18181B);
  text-decoration: none;
  transition: color .15s ease;
}
.bn-cart-modal__name:hover { color: var(--bn-brand, #E74238); }
.bn-cart-modal__name:focus-visible {
  outline: none;
  color: var(--bn-brand, #E74238);
  box-shadow: 0 0 0 3px rgba(231, 66, 56, .25);
  border-radius: 4px;
}
.bn-cart-modal__meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--bn-text-muted, #71717A);
}

.bn-cart-modal__price-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  min-width: 90px;
}
.bn-cart-modal__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--bn-brand, #E74238);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bn-cart-modal__remove {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--bn-text-muted, #71717A);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bn-cart-modal__remove:hover {
  background: var(--bn-brand-soft, #FFEEEB);
  color: var(--bn-brand, #E74238);
}
.bn-cart-modal__remove:focus-visible {
  outline: none;
  border-color: var(--bn-brand, #E74238);
  box-shadow: 0 0 0 3px rgba(231, 66, 56, .25);
}
.bn-cart-modal__remove svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Empty state ------------------------------------------------- */
.bn-cart-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 24px;
  gap: 14px;
}
.bn-cart-modal__empty[hidden] { display: none; }
.bn-cart-modal__empty-icon {
  width: 64px;
  height: 64px;
  color: var(--bn-text-muted, #71717A);
  opacity: .6;
}
.bn-cart-modal__empty-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--bn-text-soft, #3F3F46);
}
.bn-cart-modal__empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--bn-brand, #E74238);
  border-radius: var(--bn-r-md, 12px);
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
  min-height: 44px;
}
.bn-cart-modal__empty-cta:hover {
  background: var(--bn-brand-ink, #B91C1C);
  color: #fff;
  transform: translateY(-1px);
}
.bn-cart-modal__empty-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(231, 66, 56, .35);
}

/* Busy / loading state --------------------------------------- */
.bn-cart-modal__body.is-busy { opacity: .6; pointer-events: none; }
.bn-cart-modal__body.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid var(--bn-border, #E4E4E7);
  border-top-color: var(--bn-brand, #E74238);
  border-radius: 50%;
  animation: bn-cart-spin .7s linear infinite;
}
@keyframes bn-cart-spin { to { transform: rotate(360deg); } }

/* Footer ------------------------------------------------------ */
.bn-cart-modal__footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 22px;
  background: var(--bn-surface, #fff);
  border-top: 1px solid var(--bn-border, #E4E4E7);
}
.bn-cart-modal__totals {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.bn-cart-modal__totals-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--bn-text-soft, #3F3F46);
}
.bn-cart-modal__totals-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--bn-text, #18181B);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.bn-cart-modal__actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.bn-cart-modal__cta {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: var(--bn-r-md, 12px);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.bn-cart-modal__cta--secondary {
  background: var(--bn-surface, #fff);
  color: var(--bn-text, #18181B);
  border: 1px solid var(--bn-border-strong, #D4D4D8);
}
.bn-cart-modal__cta--secondary:hover {
  background: var(--bn-surface-2, #F4F4F5);
  color: var(--bn-text, #18181B);
}
.bn-cart-modal__cta--primary {
  background: var(--bn-brand, #E74238);
  color: #fff;
  border: 1px solid var(--bn-brand, #E74238);
}
.bn-cart-modal__cta--primary:hover {
  background: var(--bn-brand-ink, #B91C1C);
  border-color: var(--bn-brand-ink, #B91C1C);
  color: #fff;
  transform: translateY(-1px);
}
.bn-cart-modal__cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(231, 66, 56, .35);
}

/* Mobile drawer (<768px) -------------------------------------- */
@media (max-width: 767.98px) {
  .bn-cart-modal__overlay { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

  .bn-cart-modal__panel {
    margin: 0 0 0 auto;
    width: min(96vw, 420px);
    max-width: 420px;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.32, .72, .16, 1),
                opacity .2s ease-out;
  }
  .bn-cart-modal.is-open .bn-cart-modal__panel { transform: translateX(0); }

  .bn-cart-modal__header { padding: 16px 18px; }
  .bn-cart-modal__title  { font-size: 17px; }
  .bn-cart-modal__item   { padding: 14px 18px; gap: 12px; }
  .bn-cart-modal__thumb  { width: 64px; height: 64px; }
  .bn-cart-modal__name   { font-size: 14px; }
  .bn-cart-modal__price  { font-size: 14px; }
  .bn-cart-modal__price-col { min-width: 80px; }

  .bn-cart-modal__footer { padding: 16px 18px; gap: 10px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .bn-cart-modal__actions { flex-direction: column; }
  .bn-cart-modal__cta { width: 100%; }
}

/* Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bn-cart-modal__overlay,
  .bn-cart-modal__panel,
  .bn-cart-modal__cta,
  .bn-cart-modal__remove,
  .bn-cart-modal__close,
  .bn-cart-modal__empty-cta,
  .bn-cart-modal__name,
  .bn-cart-modal__item {
    transition: none !important;
    animation: none !important;
  }
  .bn-cart-modal__panel { transform: none !important; }
  .bn-cart-modal__body.is-busy::after { animation: none; }
}

/* Scrollbar polish (webkit) ---------------------------------- */
.bn-cart-modal__body::-webkit-scrollbar { width: 8px; }
.bn-cart-modal__body::-webkit-scrollbar-track { background: transparent; }
.bn-cart-modal__body::-webkit-scrollbar-thumb {
  background: var(--bn-border-strong, #D4D4D8);
  border-radius: 999px;
}
.bn-cart-modal__body::-webkit-scrollbar-thumb:hover { background: var(--bn-text-muted, #71717A); }