/* ====================================================================
   satis-pop.css — REVIEW YOUR SALE penceresi v2 (2026-10-12)
   Kabuk (.tpp, .tpp-x, .tpp-btn) tarama-pop.css'ten. NADIRLIK RENGI YOK
   (kullanici: var(--nadir) olmasin). Karemsi, hover yok, yuvarlak hap yok.
   5 tasarim: body'de degil pencerede .rv-N  (?rv=1..5)
   ==================================================================== */
.spp { width:min(470px, 100%); }
.spp.gir { animation:sppGir .34s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes sppGir { from { transform:translateY(14px) scale(.97); opacity:0; } }
.spp-govde { display:flex; flex-direction:column; padding:26px 26px 22px; }
.spp-yan, .spp-ana { display:contents; }
.spp-bas { order:1; padding-right:44px; }
.spp-yigin { order:2; display:none; }
.spp-liste { order:3; }
.spp-al, .spp-fis-top { order:4; }
.spp-onay { order:5; }
.spp-not { order:6; }
.spp-bas h3 { margin:0; font-size:20px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.spp-alt { margin:4px 0 16px; font-size:13px; font-weight:600; color:var(--ink-3); }

/* liste (ortak) */
.spp-liste { display:flex; flex-direction:column; max-height:252px; overflow:auto; margin:0 -6px 16px; padding:0 6px;
    overscroll-behavior:contain; }
.spp-s { display:flex; align-items:center; gap:12px; min-width:0; }
.spp-g { flex:0 0 auto; width:44px; height:44px; border-radius:11px; display:grid; place-items:center; background:var(--kd-basik, #F3F6FA); overflow:hidden; }
.spp-g img { width:36px; height:36px; object-fit:contain; }
.spp-ad { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.spp-ad b { font-size:14px; font-weight:750; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spp-ad small { font-size:11.5px; font-weight:600; color:var(--ink-3); text-transform:capitalize; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spp-nokta { display:none; }
.spp-q { flex:0 0 auto; height:24px; min-width:30px; padding:0 7px; border-radius:6px; display:grid; place-items:center;
  background:var(--kd-basik, #F3F6FA); color:var(--ink-2); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.spp-f { flex:0 0 auto; min-width:72px; text-align:right; font-size:14px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }

/* toplam: mavi kart (ortak) */
.spp-al { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 12px; padding:15px 17px; margin-bottom:14px; border-radius:15px; color:#fff;
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.18), transparent 55%), linear-gradient(150deg,#1E40AF,#2563EB 60%,#3B82F6);
  box-shadow:0 14px 28px -16px rgba(37,99,235,.9); }
.spp-al span { font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; opacity:.82; }
.spp-al b { grid-row:span 2; font-size:27px; font-weight:850; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.spp-al small { font-size:12px; font-weight:600; opacity:.75; font-variant-numeric:tabular-nums; }
.spp-al small:empty { display:none; }
.spp-fis-top { display:none; }
.spp-onay span { display:inline-block; }
.spp-onay svg { transition:transform .25s ease; }
.spp-onay.yukleniyor { opacity:.85; }
.spp-onay.yukleniyor svg { transform:translateX(5px); }
.spp-not { display:flex; align-items:center; justify-content:center; gap:6px; }
.spp-not svg { width:14px; height:14px; flex:0 0 auto; color:var(--ink-3); }

/* ---------------------------------------------- 1 · NOTR LISTE (varsayilan) */
.rv-1 .spp-liste { gap:0; }
.rv-1 .spp-s { padding:9px 0; border-bottom:1px solid var(--cizgi); }
.rv-1 .spp-s:first-child { border-top:1px solid var(--cizgi); }

/* ---------------------------------------------- 2 · KART IZGARA */
.rv-2 .spp-liste { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:292px; }
.rv-2 .spp-s { position:relative; flex-direction:column; align-items:stretch; gap:6px; padding:8px; border-radius:13px; background:var(--kd-yuzey, #fff);
  box-shadow:inset 0 0 0 1px var(--cizgi); }
.rv-2 .spp-g { width:auto; height:72px; border-radius:9px; }
.rv-2 .spp-g img { width:58px; height:58px; }
.rv-2 .spp-ad b { font-size:12.5px; }
.rv-2 .spp-ad small { display:none; }
.rv-2 .spp-q { position:absolute; top:12px; right:12px; height:20px; min-width:24px; font-size:11px; background:var(--kd-yuzey, #fff); box-shadow:inset 0 0 0 1px var(--cizgi); }
.rv-2 .spp-f { text-align:left; min-width:0; font-size:14.5px; }
.rv-2 .spp-al { background:var(--kd-basik, #F5F8FD); color:var(--ink); box-shadow:inset 0 0 0 1px var(--mavi-ln); }
.rv-2 .spp-al span { color:var(--ink-3); opacity:1; }
.rv-2 .spp-al b { color:var(--mavi-koyu); }
.rv-2 .spp-al small { color:var(--ink-3); opacity:1; }

/* ---------------------------------------------- 3 · FIS */
.spp.rv-3 { --dis:9px;
  -webkit-mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--dis)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--dis) * 2) var(--dis) repeat-x;
          mask:linear-gradient(#000 0 0) top / 100% calc(100% - var(--dis)) no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--dis) * 2) var(--dis) repeat-x;
  border-radius:20px 20px 0 0; }
.rv-3 .spp-govde { padding-bottom:30px; }
.rv-3 .spp-bas { text-align:center; padding:0 40px; }
.rv-3 .spp-bas h3::before { content:"mm2.money · receipt"; display:block; margin-bottom:6px; font-size:10.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.rv-3 .spp-alt { padding-bottom:14px; border-bottom:2px dashed var(--cizgi-2); }
.rv-3 .spp-liste { gap:9px; }
.rv-3 .spp-g { width:28px; height:28px; border-radius:7px; }
.rv-3 .spp-g img { width:24px; height:24px; }
.rv-3 .spp-ad { flex:0 1 auto; }
.rv-3 .spp-ad b { font-size:13.5px; font-weight:650; }
.rv-3 .spp-ad small { display:none; }
.rv-3 .spp-nokta { display:block; flex:1; min-width:16px; height:1px; margin-top:6px; border-bottom:2px dotted var(--cizgi-2); }
.rv-3 .spp-q { background:none; min-width:0; padding:0; color:var(--ink-3); font-weight:700; }
.rv-3 .spp-f { min-width:64px; }
.rv-3 .spp-al { display:none; }
.rv-3 .spp-fis-top { display:flex; align-items:baseline; justify-content:space-between; padding:14px 0 16px; margin-bottom:12px;
  border-top:2px dashed var(--cizgi-2); }
.rv-3 .spp-fis-top span { font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.rv-3 .spp-fis-top b { font-size:30px; font-weight:850; letter-spacing:-.04em; color:var(--mavi-koyu); font-variant-numeric:tabular-nums; }

/* ---------------------------------------------- 4 · YIGIN */
.rv-4 .spp-bas { order:2; text-align:center; padding:0; }
.rv-4 .spp-yigin { order:1; display:flex; justify-content:center; height:96px; margin:4px 0 14px; }
.rv-4 .spp-yigin span { width:76px; height:76px; margin:0 -14px; border-radius:16px; display:grid; place-items:center; background:#fff;
  box-shadow:0 0 0 1px var(--cizgi), 0 10px 22px -12px rgba(15,42,86,.35);
  transform:translateY(calc((var(--i) - (var(--n) - 1) / 2) * (var(--i) - (var(--n) - 1) / 2) * 3px)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7deg));
  animation:sppYelpaze .5s cubic-bezier(.2,.9,.3,1.3) both; animation-delay:calc(var(--i) * 60ms + 80ms); }
.rv-4 .spp-yigin span img { width:60px; height:60px; object-fit:contain; }
@keyframes sppYelpaze { from { transform:translateY(30px) scale(.6); opacity:0; } }
.rv-4 .spp-alt { margin-bottom:12px; }
.rv-4 .spp-al { order:3; display:flex; flex-direction:column; align-items:center; gap:0; padding:0 0 14px; margin-bottom:12px; background:none; border-radius:0; box-shadow:none; color:var(--ink);
  border-bottom:1px solid var(--cizgi); }
.rv-4 .spp-al span { color:var(--ink-3); opacity:1; }
.rv-4 .spp-al b { font-size:38px; color:var(--mavi-koyu); }
.rv-4 .spp-al small { color:var(--ink-3); opacity:1; }
.rv-4 .spp-liste { order:4; gap:4px; max-height:150px; }
.rv-4 .spp-s { padding:4px 0; }
.rv-4 .spp-g { width:32px; height:32px; border-radius:8px; }
.rv-4 .spp-g img { width:26px; height:26px; }
.rv-4 .spp-ad small { display:none; }

/* ---------------------------------------------- 5 · YAN YANA */
.spp.rv-5 { width:min(720px, 100%); }
.rv-5 .spp-govde { display:grid; grid-template-columns:250px minmax(0,1fr); padding:0; }
.rv-5 .spp-yan { display:flex; flex-direction:column; justify-content:space-between; gap:18px; padding:22px; color:#fff;
  background:radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.2), transparent 55%), linear-gradient(160deg,#1E40AF,#2563EB 55%,#3B82F6); }
.rv-5 .spp-ana { display:flex; flex-direction:column; padding:24px 24px 20px; min-width:0; }
.rv-5 .spp-yigin { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.rv-5 .spp-yigin span { aspect-ratio:1; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); animation:sppMozaik .45s cubic-bezier(.2,.9,.3,1.2) both; animation-delay:calc(var(--i) * 55ms + 60ms); }
.rv-5 .spp-yigin span:nth-child(5) { display:none; }
.rv-5 .spp-yigin span img { width:72%; height:72%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
@keyframes sppMozaik { from { transform:scale(.7); opacity:0; } }
.rv-5 .spp-al { display:flex; flex-direction:column; gap:2px; padding:0; margin:0; background:none; box-shadow:none; }
.rv-5 .spp-al b { font-size:32px; }
.rv-5 .spp-liste { gap:0; flex:1; max-height:240px; }
.rv-5 .spp-s { padding:9px 0; border-bottom:1px solid var(--cizgi); }
.rv-5 .spp-s:first-child { border-top:1px solid var(--cizgi); }

@media (max-width:560px) {
  .spp-govde { padding:22px 18px 18px; }
  .rv-2 .spp-liste { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rv-5 .spp-govde { grid-template-columns:1fr; padding:0; }
  .rv-5 .spp-yigin { grid-template-columns:repeat(4,1fr); }
  .rv-5 .spp-yan { gap:14px; padding:20px 18px; }
  .rv-5 .spp-ana { padding:20px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { .spp, .spp * { animation:none !important; } }