/* DELUXSE sepet: yan çekmece, sepet satırları, sepet sayfası ve ödeme adımları. Renkler tokens.css'ten. */

.bag__count.is-pop { animation: bagPop 420ms var(--ease-out); }
@keyframes bagPop { 0% { transform: scale(1); } 40% { transform: scale(1.5); background: var(--dx-orange); } 100% { transform: scale(1); } }

.btn--wa { background: #1DA851; color: #fff; }
.btn--wa:hover { background: #178F44; }
.btn--wa svg { width: 18px; height: 18px; }
.qty--sm button { width: 32px; height: 32px; }

/* Yan çekmece */
.drawer { position: fixed; inset: 0; z-index: 88; display: flex; justify-content: flex-end; background: color-mix(in srgb, #000 35%, transparent); animation: fadeIn var(--t-mid) var(--ease-out); }
.drawer__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(420px, 100%); height: 100%; background: var(--bg); box-shadow: var(--shadow-pop); animation: drawerIn 360ms var(--ease-out); padding-top: env(safe-area-inset-top, 0px); }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: none; } }
.drawer__panel:focus { outline: none; }
.drawer__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-3) var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.drawer__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.drawer__count { flex: 1; font-size: var(--fs-small); color: var(--fg-2); }
.drawer__body { overflow-y: auto; padding: var(--s-2) var(--s-5); overscroll-behavior: contain; }
.drawer__foot { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.drawer__note { font-size: var(--fs-micro); color: var(--fg-2); text-align: center; margin-bottom: var(--s-1); }
.drawer__empty { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-9) 0; color: var(--fg-2); text-align: center; }
.drawer__empty svg { width: 44px; height: 44px; color: var(--fg-3); }

/* Sepet satırı (çekmece ve sepet sayfası) */
.crow, .cline { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); animation: pvUp 360ms var(--ease-out) both; }
.crow:last-child { border-bottom: 0; }
.crow__img, .cline__img { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-md); background: var(--bg-alt); }
.crow__img img, .cline__img img { width: 82%; height: 82%; object-fit: contain; }
.crow__info, .cline__info { display: grid; gap: 4px; align-content: start; min-width: 0; }
.crow__name, .cline__name { font-weight: 600; font-size: var(--fs-small); line-height: 1.3; }
.crow__name:hover, .cline__name:hover { color: var(--dx-orange-strong); }
.crow__meta, .cline__meta { font-size: var(--fs-micro); color: var(--fg-2); }
.crow__meta code, .cline__meta code { color: var(--fg-3); }
.crow__ctrl, .cline__ctrl { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.crow__rm, .cline__rm { font-size: var(--fs-micro); font-weight: 600; color: var(--fg-2); min-height: 32px; }
.crow__rm:hover, .cline__rm:hover { color: #E0484D; }

@media (prefers-reduced-motion: reduce) { .drawer__panel, .crow, .cline { animation: none; } }

/* ---------- Sepet sayfası ve sipariş adımları ---------- */
.co { padding-block: var(--s-6) var(--section-y); }
.co-steps { display: flex; justify-content: center; gap: var(--s-2); margin-bottom: var(--s-7); font-size: var(--fs-small); color: var(--fg-3); counter-reset: none; }
.co-steps li { display: inline-flex; align-items: center; gap: var(--s-2); }
.co-steps li + li::before { content: ""; width: clamp(16px, 6vw, 48px); height: 1px; background: var(--line); margin-right: var(--s-2); }
.co-steps span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); font-size: 12px; font-weight: 700; }
.co-steps .is-on { color: var(--fg); font-weight: 600; }
.co-steps .is-on span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.co-steps .is-done { color: var(--fg-2); }
.co-steps .is-done span { background: var(--dx-orange); border-color: var(--dx-orange); color: #fff; }

.co-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-5); }
.co-title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.co-count { color: var(--fg-2); }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--s-7); align-items: start; }
@media (max-width: 899px) { .co-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

.cline { grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); }
.cline__name { font-size: 1.05rem; }
.cline__meta { font-size: var(--fs-small); }
@media (max-width: 559px) { .cline { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4); } .cline__name { font-size: var(--fs-small); } }
.co-clear { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--fg-2); font-weight: 500; min-height: 40px; }
.co-clear:hover { color: #E0484D; }

.co-sum { position: sticky; top: 76px; display: grid; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-lg); background: var(--bg-alt); }
@media (max-width: 899px) { .co-sum { position: static; } }
.co-sum__title { font-size: 1.15rem; font-weight: 700; }
.co-sum__dl { display: grid; margin-bottom: var(--s-3); }
.co-sum__dl > div { display: flex; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.co-sum__dl dt { color: var(--fg-2); }
.co-sum__dl dd { font-weight: 600; text-align: right; }
.co-sum__note { font-size: var(--fs-micro); color: var(--fg-2); }

.co-empty { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-8) 0; text-align: center; color: var(--fg-2); }
.co-empty svg { width: 56px; height: 56px; color: var(--fg-3); }
.co-empty .co-title { color: var(--fg); }

.co-sug { margin-top: var(--section-y); }
.co-sug .h3 { margin-bottom: var(--s-5); }
.co-sug__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
@media (max-width: 799px) { .co-sug__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } }
.co-sug__card { display: grid; gap: var(--s-2); height: 100%; align-content: start; padding: var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.co-sug__img { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-md); background: var(--bg-alt); }
.co-sug__img img { width: 80%; height: 80%; object-fit: contain; }
.co-sug__name { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-sug__card .btn { justify-self: start; }

/* Sipariş formu */
.co-form { display: grid; gap: var(--s-5); }
.co-fs { border: 0; margin: 0; padding: 0 0 var(--s-5); min-width: 0; border-bottom: 1px solid var(--line); }
.co-fs legend { padding: 0; margin-bottom: var(--s-4); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; }
.co-inv { margin-top: var(--s-4); }
.co-invf { margin-top: var(--s-4); }
.co-pay { display: grid; gap: var(--s-3); }
.co-pay__opt { position: relative; cursor: pointer; }
.co-pay__opt input { position: absolute; opacity: 0; pointer-events: none; }
.co-pay__opt span { display: grid; gap: 2px; padding: var(--s-4) var(--s-4) var(--s-4) 48px; border-radius: var(--r-md); border: 1.5px solid var(--line); position: relative; }
.co-pay__opt span::before { content: ""; position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--fg-3); }
.co-pay__opt input:checked + span { border-color: var(--dx-orange); background: color-mix(in srgb, var(--dx-orange) 6%, transparent); }
.co-pay__opt input:checked + span::before { border: 6px solid var(--dx-orange); }
.co-pay__opt input:focus-visible + span { outline: 2px solid var(--dx-orange); outline-offset: 2px; }
.co-pay__opt small { font-size: var(--fs-micro); color: var(--fg-2); }
.co-pay__opt.is-off { cursor: not-allowed; opacity: .55; }
.co-back { justify-self: center; font-size: var(--fs-small); color: var(--fg-2); min-height: 40px; display: inline-flex; align-items: center; }
.co-back:hover { color: var(--fg); }

.co-sum--mini .co-mini { display: grid; gap: var(--s-3); margin-bottom: var(--s-2); }
.co-mini li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: center; font-size: var(--fs-small); }
.co-mini__img { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-sm); background: var(--surface); }
.co-mini__img img { width: 80%; height: 80%; object-fit: contain; }
.co-mini__img b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--fg-2); color: var(--bg); font-size: 11px; line-height: 20px; text-align: center; }
.co-mini li > span:last-child { display: grid; min-width: 0; }
.co-mini small { color: var(--fg-2); font-size: var(--fs-micro); }

.co-done { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-8) 0; text-align: center; animation: popIn var(--t-mid) var(--ease-out); }
.co-done p { color: var(--fg-2); max-width: 32rem; }
.co-done__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ---------- Bayi hızlı sipariş (#bayi-siparis) ---------- */
.qo-page { padding-block: var(--s-6) var(--section-y); display: grid; gap: var(--s-3); }
.qo-back { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); color: var(--fg-2); min-height: 40px; justify-self: start; }
.qo-back svg { width: 16px; height: 16px; transform: rotate(180deg); }
.qo-back:hover { color: var(--fg); }
.qo-page .lead { max-width: 40rem; }
.qo-demo { margin-top: 0; }
.qo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--s-6); align-items: start; margin-top: var(--s-5); }
@media (max-width: 999px) { .qo-grid { grid-template-columns: minmax(0, 1fr); } }
.qo-main { display: grid; gap: var(--s-3); min-width: 0; }
.qo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.qo-search { flex: 1 1 18rem; display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--bg-alt); }
.qo-search svg { width: 18px; height: 18px; color: var(--fg-2); flex-shrink: 0; }
.qo-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; min-height: 46px; }
.qo-search:focus-within { box-shadow: 0 0 0 2px var(--dx-orange); }
.qo-only { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--fg-2); min-height: 44px; cursor: pointer; }
.qo-only input { accent-color: var(--dx-orange); width: 18px; height: 18px; }
.qo-cats { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.qo-cats::-webkit-scrollbar { display: none; }
.qo-cat { flex-shrink: 0; min-height: 36px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 500; color: var(--fg-2); white-space: nowrap; }
.qo-cat:hover { color: var(--fg); border-color: var(--fg-3); }
.qo-cat[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.qo-count { font-size: var(--fs-small); color: var(--fg-2); }
.qo-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.qo-t { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.qo-t th { position: sticky; top: 0; text-align: left; font-weight: 500; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); background: var(--bg-alt); padding: var(--s-3); }
.qo-t td { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--line); vertical-align: middle; }
.qo-t tr.is-on td { background: color-mix(in srgb, var(--dx-orange) 6%, transparent); }
.qo-t__code { font-family: var(--font-code); font-size: var(--fs-micro); color: var(--fg-2); white-space: nowrap; }
.qo-t__name a { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; line-height: 1.3; }
.qo-t__name a:hover span { color: var(--dx-orange-strong); }
.qo-t__name img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--bg-alt); flex-shrink: 0; }
.qo-t__opt { white-space: nowrap; color: var(--fg-2); }
.qo-t__opt i, .qo-t__optm i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); margin-right: 6px; vertical-align: -1px; }
.qo-t__optm { display: none; font-size: var(--fs-micro); color: var(--fg-2); margin: 4px 0 0 52px; }
.qo-t .qo__locked { color: var(--fg-3); }
.qo-none { text-align: center; color: var(--fg-2); padding: var(--s-7) var(--s-3) !important; }
.qo-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); }
.qo-step button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--fg); border-radius: 50%; }
.qo-step button:hover { background: var(--bg-alt); }
.qo-step svg { width: 14px; height: 14px; }
.qo-step input { width: 3.2em; border: 0; background: transparent; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 36px; -moz-appearance: textfield; appearance: textfield; }
.qo-step input::-webkit-outer-spin-button, .qo-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qo-step input:focus { outline: 2px solid var(--dx-orange); outline-offset: -2px; border-radius: 6px; }
@media (max-width: 699px) {
  .qo-t__opt, .qo-t__price { display: none; }
  .qo-t__optm { display: block; }
  .qo-t td, .qo-t th { padding-inline: var(--s-2); }
  .qo-t__code { display: none; }
  .qo-t thead th:first-child { display: none; }
}
.qo-paste { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); }
.qo-paste summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.qo-paste p { font-size: var(--fs-small); color: var(--fg-2); margin: var(--s-2) 0; }
.qo-paste textarea { width: 100%; padding: var(--s-3); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); font-family: var(--font-code); font-size: var(--fs-small); resize: vertical; }
.qo-paste textarea:focus { outline: 2px solid var(--dx-orange); outline-offset: 1px; }
.qo-paste__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.qo-paste__msg { font-size: var(--fs-small); color: var(--ok); margin: 0 !important; }
.qo-paste__msg.is-bad { color: #E0484D; }
.qo-sum__list { display: grid; gap: var(--s-2); max-height: 280px; overflow-y: auto; font-size: var(--fs-small); }
.qo-sum__list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2); align-items: baseline; }
.qo-sum__list code { font-size: var(--fs-micro); color: var(--fg-3); }
.qo-sum__list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qo-sum__list b { font-variant-numeric: tabular-nums; }
.qo-sum__empty { display: block !important; color: var(--fg-2); }
.qo-sum__lock { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); font-weight: 500 !important; }
.qo-sum__lock svg { width: 12px; height: 12px; }
.qo-sum .btn { width: 100%; justify-content: center; }
.qo-sum .btn:disabled, .qo-sum .btn.is-off { opacity: .45; pointer-events: none; }
.qo-sum .co-clear { justify-self: center; }
/* Telefonda alt çubuk: seçili adet + özete atla */
.qo-bar { display: none; }
@media (max-width: 999px) {
  .qo-bar:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-5); border-radius: var(--r-pill); background: var(--fg); color: var(--bg); font-size: var(--fs-small); box-shadow: var(--shadow-pop); animation: pvUp 300ms var(--ease-out); }
  .qo-bar b { color: var(--dx-orange); }
  .qo-page { padding-bottom: calc(var(--section-y) + 64px); }
}

/* Fiyat geldiğinde: satır tutarı ve ara toplam */
.crow__price, .cline__price { display: block; font-weight: 600; margin-top: 2px; }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--s-3); font-size: 1.05rem; }
.drawer__total b { font-family: var(--font-display); font-size: 1.25rem; }
.crow__meta .is-out, .cline__meta .is-out { color: #D93D42; font-weight: 600; }

/* Havale/EFT hesap bilgisi (sipariş onay ekranı) */
.co-hv { display: grid; width: min(100%, 460px); margin: var(--s-2) 0; padding: var(--s-2) var(--s-5); border-radius: var(--r-lg); background: var(--bg-alt); text-align: left; }
.co-hv > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.co-hv > div:last-child { border-bottom: 0; }
.co-hv dt { font-size: var(--fs-small); color: var(--fg-2); }
.co-hv dd { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-hv dd span { overflow-wrap: anywhere; }
.co-hv__copy { flex-shrink: 0; min-height: 32px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-micro); font-weight: 600; color: var(--dx-orange-strong); }
.co-hv__copy:hover { border-color: var(--fg-3); }
@media (max-width: 459px) { .co-hv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }