/* ==========================================================================
   Pazar sepeti (web) — docs/SEPET-UX.md §3 ve §4
   pazar-ds.css belirteçleri üzerine kurulur; layout'ta ondan SONRA yüklenir.
   Görünürlük body[data-sepet] özniteliğine bağlıdır: goster | giris | gizle.
   FİYAT YOK: bu dosyadaki hiçbir bileşen fiyat/para alanı çizmez.
   Bölümler: 1 görünürlük · 2 header rozeti · 3 kart hızlı ekle · 4 stepper
             5 ürün detayı · 6 mini sepet · 7 sepet sayfası · 8 teklif iste (mesaj, meşgul)
             9 başarı · 10 toast ekleri · 11 animasyonlar · 12 duyarlı
   Seçim kutusu, kalem notu ve teklif formu yoktur: "Teklif iste" doğrudan gönderir.
   ========================================================================== */

/* 1. GÖRÜNÜRLÜK ----------------------------------------------------------- */
body[data-sepet="gizle"] .sx-cartbtn,
body[data-sepet="gizle"] [data-sepet-ui],
body[data-sepet="gizle"] .sx-card__incart { display: none !important; }
body[data-sepet="giris"] [data-sepet-ui] { display: none !important; }
.sx [hidden] { display: none !important; }

/* 2. HEADER SEPET + ROZET (§3.2) ------------------------------------------ */
.sx-action--cart .sx-action__ico { position: relative; }
.sx-cartbadge {
    position: absolute; top: -6px; right: -6px; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--danger); color: #fff; border: 2px solid var(--brand-800);
    font: 800 .6875rem/16px var(--font); font-variant-numeric: tabular-nums; text-align: center; box-sizing: border-box;
    pointer-events: none;
}
.sx-action--cart b { font-variant-numeric: tabular-nums; }
/* Dar telefonda header'a üçüncü ikon (sepet) sığsın: boşluk ve logo biraz küçülür */
@media (max-width: 420px) {
    body[data-sepet="goster"] .sx-header__in { column-gap: 10px; }
    body[data-sepet="goster"] .sx-actions { gap: 6px; }
    body[data-sepet="goster"] .sx-logo img { height: 14px; }
}
.sx-drawer a.sx-drawer__cart b { margin-left: auto; margin-right: .5rem; font-variant-numeric: tabular-nums; color: var(--brand-800); }

/* 3. KART HIZLI EKLE (§3.3) ----------------------------------------------- */
.sx-cartbtn {
    position: relative; flex: none; width: 38px; height: 38px; border-radius: 10px; border: 0; padding: 0;
    background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; cursor: pointer;
    transition: background .2s var(--ease), transform .15s var(--ease);
}
.sx-cartbtn::before { content: ""; position: absolute; inset: -3px; }
.sx-cartbtn:hover { background: var(--accent-600); }
.sx-cartbtn:active { transform: scale(.94); }
.sx-cartbtn .sx-ico { font-size: 18px; grid-area: 1 / 1; }
.sx-cartbtn__ok { display: none; }
.sx-cartbtn[aria-busy="true"] { cursor: progress; }
.sx-cartbtn[aria-busy="true"] .sx-cartbtn__i { visibility: hidden; }
.sx-cartbtn[aria-busy="true"]::after {
    content: ""; grid-area: 1 / 1; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--accent-ink); border-top-color: transparent; animation: sx-spin .7s linear infinite;
}
.sx-cartbtn.is-done { background: var(--ok); color: #fff; animation: sx-pop .3s var(--ease); }
.sx-cartbtn.is-done .sx-cartbtn__i { display: none; }
.sx-cartbtn.is-done .sx-cartbtn__ok { display: block; color: #fff; stroke-dasharray: 24; stroke-dashoffset: 24; animation: sx-draw .28s var(--ease) .12s forwards; }
.sx-cartbtn.is-err, .sx-shake { animation: sx-shake .3s var(--ease); }
.sx-cartbtn.is-err { background: var(--danger); color: #fff; }
.sx-card--hero .sx-cartbtn { width: 44px; height: 44px; }
/* Kart altı: sepet düğmesi eklenince "Satıcıları Gör" dar ızgarada küçülebilmeli (taşma yok) */
.sx-card__foot .sx-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-card--hero .sx-cartbtn::before { inset: 0; }

.sx-card__incart {
    position: absolute; left: 10px; bottom: 10px; z-index: 2; pointer-events: none;
    display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .5rem; border-radius: 6px;
    background: var(--brand-50); color: var(--brand-800); font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.3;
    animation: sx-rise .3s var(--ease) both;
}

/* 4. ADET STEPPER (§3.7) -------------------------------------------------- */
.sx-stepper { display: inline-flex; align-items: stretch; height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #fff; flex: none; }
.sx-stepper__btn { width: 44px; height: 100%; border: 0; padding: 0; background: var(--surface-1); color: var(--brand-800); display: grid; place-items: center; cursor: pointer; font-size: 18px; transition: background .15s; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.sx-stepper__btn:hover { background: var(--brand-100); }
.sx-stepper__btn:disabled { color: var(--ink-400); cursor: not-allowed; background: var(--surface-1); }
.sx-stepper__btn:focus-visible { outline-offset: -3px; }
.sx-stepper__in {
    width: 56px; min-width: 4.5ch; border: 0; border-inline: 1px solid var(--line); background: #fff; padding: 0 4px;
    font: 700 1rem/1 var(--font); color: var(--ink-900); text-align: center; font-variant-numeric: tabular-nums; outline: 0;
}
.sx-stepper__in:focus { box-shadow: inset 0 0 0 2px var(--brand-700); }
.sx-stepper--lg { height: 52px; }
.sx-stepper--lg .sx-stepper__btn { width: 52px; }
.sx-stepper--lg .sx-stepper__in { width: 48px; }

/* 5. ÜRÜN DETAYI (§2.2, §3.4) --------------------------------------------- */
.sx-pd__cta--sepet { flex-direction: column; flex-wrap: nowrap; gap: var(--s-3); }
.sx-pd__cartrow { display: flex; gap: var(--s-2); align-items: stretch; }
.sx-pd__addbtn { flex: 1; min-height: 52px; font-size: var(--t-base); min-width: 0; }
.sx-pd__addbtn.is-done { background: var(--ok); color: #fff; }
.sx-pd__addok { display: none; align-items: center; gap: .55rem; }
.sx-pd__addbtn.is-done .sx-pd__addlbl { display: none; }
.sx-pd__addbtn.is-done .sx-pd__addok { display: inline-flex; }
.sx-pd__addlbl { display: inline-flex; align-items: center; gap: .55rem; }
.sx-pd__addbtn[aria-busy="true"] { cursor: progress; opacity: .8; }
.sx-qchips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sx-qchip {
    position: relative; min-width: 44px; min-height: 36px; padding: .25rem .8rem; border-radius: var(--r-pill);
    border: 1px solid var(--line); background: #fff; color: var(--ink-700); font-size: var(--t-xs); font-weight: 600;
    font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.sx-qchip::before { content: ""; position: absolute; inset: -4px 0; }
.sx-qchip:hover { border-color: var(--brand-800); }
.sx-qchip[aria-pressed="true"] { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.sx-pd__row2 { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sx-pd__row2 > .sx-btn:not(.sx-pd__fav) { flex: 1 1 12rem; min-height: 52px; }
.sx-pd__row2 .sx-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sx-pd__cartstat { font-size: var(--t-sm); color: var(--ink-700); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-height: 1.4em; }
.sx-pd__cartstat .sx-ico { color: var(--ok); }
.sx-pd__cartstat a { font-weight: 700; color: var(--brand-800); display: inline-flex; align-items: center; min-height: 44px; }
.sx-pd__cartstat a:hover { text-decoration: underline; }

/* 6. MİNİ SEPET (§2.4, §3.5) ---------------------------------------------- */
.sx-minicart { position: fixed; inset: 0; z-index: 110; }
.sx-minicart__bg { position: absolute; inset: 0; background: rgb(6 35 31 / .55); opacity: 0; transition: opacity .25s var(--ease); }
.sx-minicart__panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(26rem, 100vw); background: #fff; box-shadow: var(--shadow-2);
    display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s var(--ease); color: var(--ink-900);
}
.sx-minicart.is-open .sx-minicart__bg { opacity: 1; }
.sx-minicart.is-open .sx-minicart__panel { transform: none; }
.sx-minicart__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 20px; border-bottom: 1px solid var(--line); }
.sx-minicart__head h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: .5rem; }
.sx-minicart__list { flex: 1; overflow: auto; overscroll-behavior: contain; }
.sx-minicart__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.sx-minicart__img { width: 56px; height: 56px; border-radius: 12px; background: var(--surface-1); overflow: hidden; display: block; }
.sx-minicart__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sx-minicart__txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sx-minicart__cat { font-size: var(--t-xs); color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-minicart__name { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-minicart__name a:hover { color: var(--brand-700); text-decoration: underline; }
.sx-minicart__qty { font-size: var(--t-xs); font-weight: 600; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.sx-minicart__more { display: flex; align-items: center; justify-content: center; min-height: 48px; font-weight: 700; font-size: var(--t-sm); color: var(--brand-800); }
.sx-minicart__more:hover { text-decoration: underline; }
.sx-minicart__foot { display: grid; gap: 12px; padding: 20px; border-top: 1px solid var(--line); background: var(--surface-1); }
.sx-minicart__sum { font-size: var(--t-sm); color: var(--ink-700); font-variant-numeric: tabular-nums; }
.sx-minicart__sum b { font-weight: 700; color: var(--ink-900); }
.sx-minicart__foot .sx-btn--accent { min-height: 52px; font-size: var(--t-base); }
.sx-minicart__state { padding: var(--s-10) var(--s-6); text-align: center; color: var(--ink-500); font-size: var(--t-sm); }
.sx-minicart__state h3 { font-size: var(--t-lg); color: var(--ink-900); margin-bottom: .35rem; }
.sx-minicart__state .sx-btn { margin-top: var(--s-4); }

/* Ortak: ikon düğmesi (kaldır) */
.sx-iconbtn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-500); display: grid; place-items: center; cursor: pointer; font-size: 18px; transition: background .15s, color .15s; flex: none; }
.sx-iconbtn:hover { background: rgb(194 65 12 / .08); color: var(--danger); }

/* 7. SEPET SAYFASI (§3.6) ------------------------------------------------- */
.sx-cart { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: var(--s-6); align-items: start; padding-block: var(--s-6) var(--s-16); }
@media (min-width: 1200px) { .sx-cart { grid-template-columns: minmax(0, 1fr) 25rem; } }
.sx-cart.is-empty, .sx-cart.is-state { grid-template-columns: minmax(0, 1fr); }
.sx-cart.is-empty .sx-cart__aside, .sx-cart.is-empty .sx-cart__bar, .sx-cart.is-empty .sx-cart__info,
.sx-cart.is-state .sx-cart__aside, .sx-cart.is-state .sx-cart__bar, .sx-cart.is-state .sx-cart__info,
.sx-cart.is-state .sx-cart__strip, .sx-cart.is-state .sx-cart__msg { display: none; }
.sx-cart__main { min-width: 0; }
.sx-cart__aside { position: sticky; top: calc(68px + var(--s-4)); min-width: 0; }
.sx-cart__head-row .sx-btn .sx-ico { font-size: 1rem; }
.sx-cart__bar { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-3); min-height: 44px; margin-bottom: var(--s-3); }
.sx-cart__info { display: flex; gap: .6rem; align-items: flex-start; background: var(--brand-50); border-radius: 14px; padding: 12px 16px; font-size: var(--t-sm); color: var(--brand-900); margin-bottom: var(--s-4); line-height: 1.5; }
.sx-cart__info .sx-ico { color: var(--brand-700); margin-top: .2rem; font-size: 1.05rem; }
.sx-cart__strip { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; background: #faf0ec; color: var(--danger); border-radius: 14px; padding: 8px 8px 8px 16px; font-size: var(--t-sm); margin-bottom: var(--s-4); }
.sx-cart__strip p { display: flex; gap: .5rem; align-items: center; }
.sx-cart__strip .sx-btn { color: var(--danger); border-color: rgb(194 65 12 / .35); background: #fff; }
.sx-cart__list { display: flex; flex-direction: column; gap: 12px; }

/* Kalem kartı */
.sx-citem {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px;
    display: grid; grid-template-columns: 80px minmax(0, 1fr) auto minmax(44px, auto); column-gap: var(--s-4); row-gap: 0; align-items: center;
    grid-template-areas: "img info qty del" ". warn warn warn";
    transition: box-shadow .25s var(--ease), border-color .2s, background-color .6s var(--ease);
}
.sx-citem:hover { box-shadow: var(--shadow-1); }
.sx-citem.is-flash { background-color: var(--brand-50); transition: none; }
.sx-citem.is-off { opacity: .6; }
.sx-citem.is-off:hover, .sx-citem.is-off:focus-within { opacity: 1; }
.sx-citem__img { grid-area: img; width: 80px; height: 80px; border-radius: 12px; background: var(--surface-1); overflow: hidden; display: block; }
.sx-citem__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.sx-citem__info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-citem__cat { font-size: var(--t-xs); color: var(--ink-500); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-citem__title { font-size: var(--t-sm); font-weight: 600; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; letter-spacing: 0; }
.sx-citem__title a:hover { color: var(--brand-700); text-decoration: underline; }
.sx-citem .sx-card__facts { margin-top: 2px; }
.sx-fact--mute { color: var(--ink-500); }
.sx-fact--mute .sx-ico { color: var(--ink-500); }
.sx-citem__act { display: contents; }
.sx-citem__act > .sx-stepper { grid-area: qty; }
.sx-citem__act > .sx-citem__del { grid-area: del; }
.sx-citem__del--text { width: auto; padding: 0 .9rem; border: 1px solid rgb(194 65 12 / .35); color: var(--danger); font-size: var(--t-sm); font-weight: 700; gap: .35rem; display: inline-flex; align-items: center; }
.sx-citem__offbadge { align-self: flex-start; background: #faf0ec; color: var(--danger); }
.sx-citem__warn { grid-area: warn; display: flex; gap: .45rem; align-items: flex-start; margin-top: 10px; background: var(--tint-lemon); color: var(--accent-ink); font-size: 12px; line-height: 1.45; border-radius: 10px; padding: 8px 12px; }
.sx-citem__warn .sx-ico { margin-top: .12rem; flex: none; }
.sx-citem.is-leaving { overflow: hidden; }

/* İskelet (§4.11) */
.sx-skel { background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%); background-size: 200% 100%; animation: sx-shimmer 1.2s linear infinite; border-radius: 8px; }
.sx-citem--skel { grid-template-areas: "img info qty del"; }
.sx-citem--skel .sx-skel--img { grid-area: img; width: 80px; height: 80px; border-radius: 12px; }
.sx-citem--skel .sx-citem__info { gap: 8px; }
.sx-citem--skel .sx-skel--l1 { height: 10px; width: 40%; }
.sx-citem--skel .sx-skel--l2 { height: 14px; width: 85%; }
.sx-citem--skel .sx-skel--l3 { height: 18px; width: 55%; border-radius: 999px; }
.sx-citem--skel .sx-skel--qty { grid-area: qty; width: 132px; height: 44px; border-radius: 10px; }

/* Boş / hata / bilgi durumları */
.sx-cartstate { padding: var(--s-10); text-align: center; border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-500); }
.sx-cartstate h2 { font-size: 22px; color: var(--ink-900); margin-bottom: .45rem; outline: none; }
.sx-cartstate p { font-size: var(--t-sm); max-width: 44ch; margin: 0 auto; }
.sx-cartstate .sx-empty__ico { width: 72px; height: 72px; font-size: 28.8px; }
.sx-cartstate .sx-empty__btns { margin-top: var(--s-5); }
.sx-cartstate--err { border-style: solid; border-color: rgb(194 65 12 / .25); background: #faf0ec; }
.sx-cartstate--err .sx-empty__ico { background: #fff; color: var(--danger); }

/* Özet paneli */
.sx-cart__sum { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: var(--s-4); }
.sx-cart__sum h2 { font-size: 18px; font-weight: 800; }
.sx-cart__dl { margin: 0; }
.sx-cart__dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-block: .6rem; border-bottom: 1px dashed var(--line); }
.sx-cart__dl > div:first-child { padding-top: 0; }
.sx-cart__dl dt { font-size: var(--t-sm); color: var(--ink-500); }
.sx-cart__dl dd { margin: 0; font-size: var(--t-base); font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; text-align: right; }
.sx-cart__dl .sx-cart__who { flex-direction: column; align-items: flex-start; gap: .2rem; border-bottom: 0; }
.sx-cart__dl .sx-cart__who dd { font-size: var(--t-sm); font-weight: 600; text-align: left; color: var(--ink-700); }
.sx-note { display: flex; gap: .45rem; align-items: flex-start; font-size: 12px; line-height: 1.45; border-radius: 10px; padding: 8px 12px; }
.sx-note .sx-ico { flex: none; margin-top: .12rem; }
.sx-note--lemon { background: var(--tint-lemon); color: var(--accent-ink); }
.sx-note--danger { background: #faf0ec; color: var(--danger); }
.sx-note b { font-weight: 700; }
.sx-cart__cta { min-height: 52px; font-size: var(--t-base); }
.sx-cart__cta:disabled, .sx-cart__dock .sx-btn:disabled { opacity: .5; cursor: not-allowed; }
.sx-cart__fine { font-size: 12px; color: var(--ink-500); line-height: 1.5; }
.sx-cart__trust { display: grid; gap: 8px; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.sx-cart__trust li { display: flex; align-items: center; gap: .5rem; font-size: 12px; font-weight: 600; color: var(--ink-700); }
.sx-cart__trust .sx-ico { color: var(--brand-700); font-size: 1rem; }

/* Mobil yapışkan alt çubuk */
.sx-cart__dock { display: none; }

/* Onay diyaloğu (boşalt) */
.sx-dialog--confirm { width: min(26rem, calc(100vw - 2rem)); }
.sx-dialog--confirm .sx-dialog__in { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.sx-btn--danger { background: var(--danger); color: #fff; }
.sx-btn--danger:hover { background: #9a3412; }

/* 8. TEKLİF İSTE (§2.6): meşgul düğme + liste üstü mesaj (hata / 409 bilgi) --- */
.sx-cart__cta.is-busy, .sx-cart__dock .sx-btn.is-busy { cursor: progress; opacity: .85 !important; }
.sx-cart__cta.is-busy .sx-ico, .sx-cart__dock .sx-btn.is-busy .sx-ico { display: none; }
.sx-cart__cta.is-busy::before, .sx-cart__dock .sx-btn.is-busy::before {
    content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
    border: 2px solid currentColor; border-top-color: transparent; animation: sx-spin .7s linear infinite;
}
.sx-cart__warns { display: grid; gap: 8px; }
.sx-cart__warns:empty { display: none; }
.sx-cart[aria-busy="true"] ~ .sx-cart__dock { display: none; }
.sx-cart__emptybtn .sx-ico { font-size: 1rem; }
.sx-cart__msg { display: flex; flex-direction: column; gap: var(--s-3); border-radius: 14px; padding: 12px 16px; margin-bottom: var(--s-4); font-size: var(--t-sm); }
.sx-cart__msg p { display: flex; gap: .5rem; align-items: flex-start; font-weight: 700; line-height: 1.45; outline: none; }
.sx-cart__msg p .sx-ico { flex: none; margin-top: .2rem; }
.sx-cart__msg--hata { background: #faf0ec; color: var(--danger); border: 1px solid rgb(194 65 12 / .25); }
.sx-cart__msg--bilgi { background: var(--brand-50); color: var(--brand-900); }
.sx-cart__msgbtns { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sx-cart__msgbtns .sx-btn { min-height: 44px; }

/* 9. BAŞARI (§2.7, §4.10) ------------------------------------------------- */
.sx-ok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: 12px 24px 24px; }
.sx-cartstate--ok { border-style: solid; background: #fff; padding: var(--s-8) var(--s-6); box-shadow: var(--shadow-1); }
.sx-cartstate--ok .sx-ok__btns { max-width: 22rem; }
.sx-cartstate--ok .sx-ok__eyebrow { font-size: 12px; margin-top: var(--s-2); }
.sx-ok__mark { position: relative; width: 88px; height: 88px; margin: 8px 0 4px; }
.sx-ok__circle { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; animation: sx-okpop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.sx-ok__circle .sx-ico { font-size: 44px; stroke-width: 2.5; }
.sx-ok__ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; animation: sx-wave 1.4s var(--ease) .2s 2 both; pointer-events: none; }
.sx-ok__eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--brand-700); text-transform: uppercase; }
.sx-ok h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); outline: none; font-variant-numeric: tabular-nums; }
.sx-ok h2 b { color: var(--brand-800); }
.sx-ok p { color: var(--ink-500); font-size: var(--t-sm); max-width: 40ch; }
.sx-ok__txt { animation: sx-rise .45s var(--ease) .18s both; display: flex; flex-direction: column; gap: var(--s-2); align-items: center; }
.sx-ok__btns { display: flex; flex-direction: column; gap: var(--s-2); width: 100%; margin-top: var(--s-2); }
.sx-ok__btns .sx-btn { min-height: 52px; font-size: var(--t-base); }

/* 10. TOAST EKLERİ (§5.3) ------------------------------------------------- */
/* Toast'lar header'daki sepet ikonunu (uçan noktanın hedefi) örtmesin: masaüstünde header'ın altında,
   ≤991px'te altta (sepet sayfasında yapışkan çubuğun üstünde). */
body.sx .sx-toasts { top: 100px; }
body.sx.sx-mini-open .sx-toasts { right: calc(min(26rem, 100vw) + 16px); }
@media (max-width: 991px) {
    body.sx .sx-toasts { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); align-items: stretch; }
    body.sx .sx-toast { max-width: none; }
    body.sx.sx-has-dock .sx-toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
.sx-toast__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sx-toast__txt b { font-weight: 700; }
.sx-toast__sub { font-size: var(--t-xs); opacity: .8; font-variant-numeric: tabular-nums; }
.sx-toast__act { flex: none; align-self: center; min-height: 44px; padding: 0 .8rem; margin: -.5rem -.4rem -.5rem .25rem; border: 0; border-radius: 8px; background: rgb(255 255 255 / .12); color: #fff; font: inherit; font-size: var(--t-sm); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; text-decoration: none !important; white-space: nowrap; }
.sx-toast__act:hover { background: rgb(255 255 255 / .22); }
.sx-toast.is-out { opacity: 0; transition: opacity .2s var(--ease); }

/* 11. ANİMASYONLAR (§4) --------------------------------------------------- */
.sx-fly { position: fixed; left: 0; top: 0; z-index: 130; pointer-events: none; will-change: transform; }
.sx-fly__dot { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--brand-800); box-shadow: var(--shadow-2); will-change: transform, opacity; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-draw { to { stroke-dashoffset: 0; } }
@keyframes sx-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes sx-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes sx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes sx-okpop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sx-wave { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.9); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .sx-skel { animation: none !important; background: var(--surface-1); }
    .sx-cartbtn[aria-busy="true"]::after, .sx-cart__cta.is-busy::before, .sx-cart__dock .sx-btn.is-busy::before { animation: none !important; opacity: .6; }
    .sx-cartbtn.is-done .sx-cartbtn__ok { stroke-dashoffset: 0; }
    .sx-ok__ring { display: none; }
    .sx-fly { display: none; }
}

/* 12. DUYARLI ------------------------------------------------------------- */
@media (max-width: 991px) {
    .sx-cart { grid-template-columns: minmax(0, 1fr); padding-bottom: 96px; }
    .sx-cart__aside { position: static; }
    .sx-cart__sum .sx-cart__cta { display: none; }
    .sx-cart__dock {
        display: flex; gap: 12px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px rgb(10 58 52 / .10);
    }
    .sx-cart.is-empty ~ .sx-cart__dock, .sx-cart.is-state ~ .sx-cart__dock { display: none; }
    .sx-cart__dock-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
    .sx-cart__dock-txt b { font-size: var(--t-sm); font-weight: 700; }
    .sx-cart__dock-txt b { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sx-cart__dock-txt small { font-size: 12px; color: var(--danger); line-height: 1.35; }
    .sx-cart__dock .sx-btn { min-height: 48px; padding: 0 20px; flex: none; }
    body.sx-has-dock .sx-totop { bottom: 96px; }
}
@media (max-width: 640px) {
    /* §3.3: dar ekranda kart altı düğmesi küçülür, ok ikonu gizlenir */
    .sx-card__foot .sx-btn { padding-inline: 10px; font-size: .78rem; }
    .sx-card__foot .sx-ico--arrow { display: none; }
    .sx-citem {
        grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; padding: 12px;
        grid-template-areas: "img info" "act act" "warn warn";
    }
    .sx-citem__img { width: 64px; height: 64px; }
    .sx-citem__act { display: flex; grid-area: act; align-items: center; gap: var(--s-2); margin-top: 10px; min-width: 0; }
    .sx-citem__act > .sx-citem__del { margin-left: auto; }
    .sx-citem .sx-stepper__in { width: 44px; }
    .sx-citem--skel { grid-template-areas: "img info"; }
    .sx-citem--skel .sx-skel--qty { display: none; }
    .sx-pd__cartrow .sx-stepper--lg .sx-stepper__btn { width: 44px; }
    .sx-pd__cartrow .sx-stepper--lg .sx-stepper__in { width: 44px; }
    .sx-pd__row2 > .sx-btn:not(.sx-pd__fav) { flex: 1 1 0; min-width: 0; white-space: normal; }
}