/* Açılır sepet özeti: sepetten çıkan parça fişi · assets/js/mini-sepet.js. Değişkenler header-premium.css :root'tan gelir. */
.msp{
  --msp-kagit: #f1ece3; --msp-murekkep: #0a1424; --msp-cizgi: rgba(10, 20, 36, .22);
  position: fixed; z-index: 1001; width: min(390px, calc(100vw - 24px)); box-sizing: border-box; color: var(--msp-murekkep); font-family: var(--sx-sans);
  filter: drop-shadow(0 24px 36px rgba(3, 7, 15, .55));
}
.msp[hidden]{ display: none; }
.msp *{ box-sizing: border-box; }
.msp a{ text-decoration: none; }
.msp a:focus-visible, .msp button:focus-visible{ outline: 2px solid #8a6526; outline-offset: 2px; }
/* Fişin çıktığı yarık */
.msp-yarik{ position: relative; z-index: 2; height: 10px; margin: 0 -7px; border-radius: 5px; background: #060c17; box-shadow: 0 0 0 1px rgba(232, 210, 166, .42), inset 0 3px 4px rgba(0, 0, 0, .8); }
/* Fiş: kırpma alanı aşağı açılır, kâğıt yukarıdan iner */
.msp-kes{ overflow: hidden; margin-top: -5px; padding-bottom: 12px; clip-path: inset(0 -30px 100% -30px); transition: clip-path .62s cubic-bezier(.22, .8, .2, 1); }
.msp.is-acik .msp-kes{ clip-path: inset(0 -30px -12px -30px); }
.msp-fis{ position: relative; padding: 22px 20px 18px; background: var(--msp-kagit); transform: translateY(-100%); transition: transform .62s cubic-bezier(.22, .8, .2, 1); }
.msp.is-acik .msp-fis{ transform: none; }
.msp-fis::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(-45deg, transparent 6.5px, var(--msp-kagit) 0) 0 0 / 14px 10px repeat-x, linear-gradient(45deg, transparent 6.5px, var(--msp-kagit) 0) 0 0 / 14px 10px repeat-x; }
.msp-ust{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1.5px solid var(--msp-murekkep); }
.msp-sayi{ font: 700 66px/.82 var(--sx-display); letter-spacing: -.06em; background: linear-gradient(100deg, #b98f4e, #8a6526 60%, #6e4b17); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.msp-sag{ text-align: right; }
.msp-baslik{ margin: 0 0 6px; font: 700 22px/1 var(--sx-display); letter-spacing: -.035em; color: var(--msp-murekkep); }
.msp-adet{ font: 500 10px/1 var(--sx-mono); letter-spacing: .18em; text-transform: uppercase; color: #6d6a62; }
.msp-liste{ max-height: min(320px, 42vh); margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; scrollbar-color: rgba(10, 20, 36, .3) transparent; }
.msp-urun{ position: relative; display: flex; align-items: center; gap: 4px; padding: 12px 0; border-bottom: 1px dashed var(--msp-cizgi); max-height: 120px; opacity: 0; transform: translateY(-14px); transition: opacity .35s, transform .45s cubic-bezier(.22, .8, .2, 1), max-height .28s, padding .28s; transition-delay: calc(.22s + var(--i, 0) * 70ms); }
.msp.is-acik .msp-urun{ opacity: 1; transform: none; }
.msp .msp-urun.is-gid{ max-height: 0; padding-block: 0; opacity: 0; transform: translateX(46px); transition-delay: 0s; border-bottom-color: transparent; overflow: hidden; }
.msp-bag{ display: flex; align-items: center; gap: 13px; flex: 1; min-width: 0; color: inherit; }
.msp-gor{ flex: none; width: 60px; height: 60px; padding: 1px; background: #8a6526; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.msp-gor img{ display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; clip-path: polygon(0 0, calc(100% - 11.6px) 0, 100% 11.6px, 100% 100%, 5.6px 100%, 0 calc(100% - 5.6px)); }
.msp-metin{ min-width: 0; }
.msp-metin b{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-bottom: 7px; font: 700 15px/1.18 var(--sx-display); letter-spacing: -.02em; color: var(--msp-murekkep); transition: color .2s; }
.msp-bag:hover b{ color: #8a6526; }
.msp-etk{ position: relative; display: inline-block; padding: 4px 11px 4px 15px; background: linear-gradient(100deg, #f0dfba, #c9a46b 70%, #a98248); color: #0a1424; font: 700 11px/1 var(--sx-sans); letter-spacing: .02em; transform: rotate(-2deg); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
.msp-etk::before{ content: ""; position: absolute; left: 5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #0a1424; }
.msp-sil{ position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: background .2s; }
.msp-sil:hover{ background: rgba(10, 20, 36, .09); }
.msp-sil::before, .msp-sil::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; margin: -.75px 0 0 -6.5px; background: var(--msp-murekkep); transform: rotate(45deg); }
.msp-sil::after{ transform: rotate(-45deg); }
.msp-bos{ margin: 18px 0; font: 400 15px/1.5 var(--sx-sans); color: #3b4553; }
.msp-btn{ display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-top: 14px; padding: 0 8px 0 24px; border-radius: 999px; background: var(--msp-murekkep); color: #fff !important; font: 600 15px/1 var(--sx-sans); opacity: 0; transition: opacity .4s .42s, transform .35s; }
.msp.is-acik .msp-btn{ opacity: 1; }
.msp-btn i{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(100deg, #e8d2a6, #c9a46b); transition: transform .35s cubic-bezier(.22, .8, .2, 1); }
.msp-btn:hover i{ transform: translateX(-4px) rotate(-45deg); }
.msp-btn svg{ width: 16px; height: 16px; fill: none; stroke: #0a1424; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msp-btn-cizgi{ background: none; color: var(--msp-murekkep) !important; box-shadow: 0 0 0 1px var(--msp-murekkep) inset; }
.msp-btn-cizgi i{ background: var(--msp-murekkep); }
.msp-btn-cizgi svg{ stroke: #e8d2a6; }
@media (prefers-reduced-motion: reduce){ .msp *, .msp{ transition: none !important; } }