/* ==========================================================================
   Sepet Popup / Sayfa — kurumsal, kendine yeten (spop- scoped). Tüm temalarda güvenli.
   ========================================================================== */
:root{
    --spop-bg:#f8fafc; --spop-card:#ffffff; --spop-line:#e8edf3; --spop-line2:#eef2f7;
    --spop-ink:#0f172a; --spop-ink2:#64748b; --spop-ink3:#94a3b8;
    --spop-green:#16a34a; --spop-green-d:#15803d; --spop-red:#ef4444; --spop-red-bg:#fef2f2;
    --spop-radius:16px; --spop-shadow:0 10px 40px rgba(15,23,42,.14);
}

/* ---------- Drawer (popup) ---------- */
/* z-index: çark overlay (100000), canlı destek (~10000), alt-bar (9999) ÜSTÜNDE kalmalı */
.spop-overlay{position:fixed;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(2px);z-index:200000;opacity:0;transition:opacity .28s ease}
.spop-overlay.spop-acik{opacity:1}
.spop-drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:var(--spop-bg);
    z-index:200001;display:flex;flex-direction:column;box-shadow:var(--spop-shadow);
    transform:translateX(105%);transition:transform .32s cubic-bezier(.4,0,.2,1);will-change:transform}
.spop-drawer.spop-acik{transform:translateX(0)}
.spop-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;background:var(--spop-card);border-bottom:1px solid var(--spop-line);flex:0 0 auto}
.spop-drawer-title{font-size:17px;font-weight:800;color:var(--spop-ink);display:flex;align-items:center;gap:9px}
.spop-drawer-title i{color:var(--spop-green)}
.spop-close{width:38px;height:38px;border:none;background:#f1f5f9;border-radius:10px;color:var(--spop-ink2);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.spop-close:hover{background:#e2e8f0;color:var(--spop-ink)}
.spop-body{flex:1 1 auto;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
.spop-drawer-foot{flex:0 0 auto;padding:16px 18px;background:var(--spop-card);border-top:1px solid var(--spop-line)}

/* ---------- Yükleniyor ---------- */
.spop-yukleniyor{display:flex;align-items:center;justify-content:center;padding:60px 0}
.spop-spin{width:34px;height:34px;border:3px solid #e2e8f0;border-top-color:var(--spop-green);border-radius:50%;animation:spop-spin .8s linear infinite}
@keyframes spop-spin{to{transform:rotate(360deg)}}

/* ---------- Kartlar ---------- */
.spop-wrap{display:flex;flex-direction:column;gap:16px}
.spop-card{background:var(--spop-card);border:1px solid var(--spop-line);border-radius:var(--spop-radius);overflow:hidden}
.spop-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--spop-line2)}
.spop-title{font-size:16px;font-weight:800;color:var(--spop-ink);display:flex;align-items:center;gap:8px}
.spop-title i{font-size:19px}
.spop-count{background:var(--spop-ink);color:#fff;font-size:12px;font-weight:700;min-width:22px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.spop-clear{display:inline-flex;align-items:center;gap:6px;background:#f1f5f9;border:1px solid var(--spop-line);color:var(--spop-ink2);font-size:13px;font-weight:600;padding:8px 14px;border-radius:10px;cursor:pointer;transition:.15s}
.spop-clear:hover{background:var(--spop-red-bg);border-color:#fecaca;color:var(--spop-red)}

/* ---------- Ürün satırı ---------- */
.spop-items{display:flex;flex-direction:column}
.spop-item{display:grid;grid-template-columns:64px 1fr auto;grid-template-areas:"img info qty" "img meta remove";gap:4px 14px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--spop-line2);position:relative}
.spop-item:last-child{border-bottom:none}
.spop-img{grid-area:img;width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--spop-line);background:#f8fafc}
.spop-info{grid-area:info;min-width:0}
.spop-name{font-size:14.5px;font-weight:700;color:var(--spop-ink);line-height:1.3;margin-bottom:3px;overflow-wrap:anywhere;word-break:break-word}
.spop-sec{font-weight:500;color:var(--spop-ink3);font-size:13px}
.spop-price{font-size:15px;font-weight:800;color:var(--spop-ink)}
.spop-meta{grid-area:meta;display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:5px;font-size:12px;color:var(--spop-ink3)}
.spop-meta span{display:inline-flex;align-items:center;gap:4px}
.spop-qty{grid-area:qty;display:inline-flex;align-items:center;background:#f8fafc;border:1px solid var(--spop-line);border-radius:12px;overflow:hidden;align-self:start}
.spop-q-btn{width:34px;height:34px;border:none;background:transparent;color:var(--spop-ink);font-size:18px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.12s;line-height:1}
.spop-q-btn:hover{background:#eef2f7;color:var(--spop-green)}
.spop-q-btn:disabled{opacity:.4;cursor:not-allowed}
.spop-q-val{min-width:34px;text-align:center;font-size:14px;font-weight:700;color:var(--spop-ink)}
.spop-remove{grid-area:remove;justify-self:end;align-self:start;width:30px;height:30px;border:none;background:var(--spop-red-bg);color:var(--spop-red);border-radius:8px;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.spop-remove:hover{background:#fee2e2;transform:scale(1.06)}

/* ---------- Sipariş özeti ---------- */
.spop-summary{padding:6px 0}
.spop-sum-title{font-size:15px;font-weight:800;color:var(--spop-ink);display:flex;align-items:center;gap:8px;padding:14px 18px 10px}
.spop-sum-row{display:flex;align-items:center;justify-content:space-between;padding:9px 18px;font-size:13.5px;color:var(--spop-ink2)}
.spop-sum-row span:first-child{display:inline-flex;align-items:center;gap:8px}
.spop-sum-row span:last-child{font-weight:600;color:var(--spop-ink)}
.spop-ind span:last-child{color:var(--spop-green)}
.spop-sum-total{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding:15px 18px;border-top:2px dashed var(--spop-line);font-size:16px;font-weight:800;color:var(--spop-ink)}
.spop-sum-total span:last-child{color:var(--spop-green);font-size:18px}
.spop-sum-not{margin:0;padding:2px 18px 16px;font-size:11.5px;color:var(--spop-ink3);display:flex;align-items:flex-start;gap:6px;line-height:1.5}

/* ---------- Boş sepet (animasyonlu, kurumsal) ---------- */
.spop-bos{text-align:center;padding:46px 24px 52px;animation:spop-bos-in .55s cubic-bezier(.22,1,.36,1) both}
@keyframes spop-bos-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.spop-bos-ikon{position:relative;width:132px;height:132px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center}
.spop-bos-ikon::before{content:"";position:absolute;inset:16px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#ecfdf5,#f0fdf4 72%);box-shadow:inset 0 0 0 1px #d1fae5,0 10px 26px rgba(22,163,74,.10)}
.spop-bos-ring{position:absolute;inset:8px;border-radius:50%;border:2px solid var(--spop-green);opacity:0;animation:spop-ring 2.8s ease-out infinite}
.spop-bos-ring2{animation-delay:1.4s}
@keyframes spop-ring{0%{transform:scale(.62);opacity:.42}75%{opacity:0}100%{transform:scale(1.12);opacity:0}}
.spop-bos-ikon i{position:relative;font-size:54px;color:var(--spop-green);animation:spop-float 3s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(22,163,74,.18))}
@keyframes spop-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.spop-bos-nokta{position:absolute;border-radius:50%;opacity:0}
.spop-bos-nokta.n1{top:12px;left:26px;width:7px;height:7px;background:var(--spop-green);animation:spop-twinkle 2.6s ease-in-out infinite}
.spop-bos-nokta.n2{top:28px;right:20px;width:5px;height:5px;background:#34d399;animation:spop-twinkle 2.6s ease-in-out .9s infinite}
.spop-bos-nokta.n3{bottom:22px;right:30px;width:6px;height:6px;background:#6ee7b7;animation:spop-twinkle 2.6s ease-in-out 1.7s infinite}
@keyframes spop-twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:.95;transform:scale(1)}}
.spop-bos-baslik{font-size:18px;font-weight:800;color:var(--spop-ink);margin:0 0 8px}
.spop-bos-alt{font-size:13.5px;color:var(--spop-ink3);line-height:1.55;margin:0 auto 24px;max-width:290px}
/* Kendine yeten (spop-btn-tamamla'ya bağlı DEĞİL → drawer+sayfa tutarlı kompakt pill) */
.spop-bos-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--spop-green);color:#fff;font-size:14.5px;font-weight:700;padding:13px 30px;border-radius:12px;border:none;text-decoration:none;cursor:pointer;transition:.18s;box-shadow:0 4px 14px rgba(22,163,74,.28)}
.spop-bos-btn:hover{background:var(--spop-green-d);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(22,163,74,.36)}
@media (prefers-reduced-motion:reduce){
    .spop-bos,.spop-bos-ikon i,.spop-bos-ring,.spop-bos-nokta{animation:none!important}
    .spop-bos-ring{display:none}.spop-bos-nokta{opacity:.6}
}

/* ---------- Butonlar ---------- */
.spop-btn-tamamla{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--spop-green);color:#fff;font-size:15px;font-weight:700;padding:15px 20px;border-radius:12px;border:none;cursor:pointer;text-decoration:none;transition:.18s;box-shadow:0 4px 14px rgba(22,163,74,.28)}
.spop-btn-tamamla:hover{background:var(--spop-green-d);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(22,163,74,.36)}
.spop-btn-devam{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--spop-ink);font-size:14px;font-weight:600;padding:12px 20px;border-radius:12px;border:1px solid var(--spop-line);text-decoration:none;transition:.15s}
.spop-btn-devam:hover{background:#f8fafc;border-color:#cbd5e1;color:var(--spop-ink)}

/* ---------- Tam sayfa (/sepet.php) ---------- */
.spop-page{background:var(--spop-bg);min-height:60vh;padding:32px 16px 56px}
.spop-page-inner{max-width:640px;margin:0 auto}
.spop-page-baslik{font-size:24px;font-weight:800;color:var(--spop-ink);margin:0 0 22px;display:flex;align-items:center;gap:10px}
.spop-page-baslik i{color:var(--spop-green)}
.spop-page .spop-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.spop-page .spop-btn-tamamla{width:auto;flex:1 1 220px}

/* ---------- Toast + Onay (native alert/confirm yerine kurumsal) ---------- */
.spop-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:200020;background:var(--spop-ink);color:#fff;font-size:13.5px;font-weight:600;padding:12px 20px;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.25);max-width:88vw;text-align:center;opacity:0;transition:opacity .28s,transform .28s;pointer-events:none}
.spop-toast.spop-acik{opacity:1;transform:translate(-50%,0)}
.spop-toast-hata{background:var(--spop-red)}
.spop-onay-katman{position:fixed;inset:0;z-index:200015;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s}
.spop-onay-katman.spop-acik{opacity:1}
.spop-onay{background:#fff;border-radius:16px;padding:26px 24px;max-width:340px;width:100%;text-align:center;box-shadow:var(--spop-shadow);transform:scale(.94);transition:transform .2s}
.spop-onay-katman.spop-acik .spop-onay{transform:scale(1)}
.spop-onay-mesaj{font-size:15px;font-weight:600;color:var(--spop-ink);margin:0 0 20px;line-height:1.5}
.spop-onay-btnlar{display:flex;gap:10px}
.spop-onay-btnlar button{flex:1;padding:12px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--spop-line);transition:.15s}
.spop-onay-vazgec{background:#fff;color:var(--spop-ink2)}
.spop-onay-vazgec:hover{background:#f1f5f9}
.spop-onay-evet{background:var(--spop-red);color:#fff;border-color:var(--spop-red)}
.spop-onay-evet:hover{background:#dc2626}

body.spop-kilit{overflow:hidden}

@media (max-width:480px){
    .spop-drawer{width:100%;max-width:100%}
    .spop-item{grid-template-columns:52px 1fr auto;gap:3px 10px;padding:14px 14px}
    .spop-img{width:52px;height:52px}
    .spop-name{font-size:13.5px}
    .spop-q-btn{width:30px;height:30px;font-size:16px}
    .spop-q-val{min-width:28px}
    .spop-body{padding:12px}
    .spop-page .spop-actions{flex-direction:column-reverse}
    .spop-page .spop-btn-devam,.spop-page .spop-btn-tamamla{width:100%;justify-content:center}
}