/* SPACETOOLS_SHOP_V3 — yalnızca /shop sayfası; tüm sınıflar .sp- ile başlar. Mağaza temalı hareketli tasarım. */
.sp{--o:#f58a3c;--o2:#ffb272;--p:#b280ff;--p2:#7c5cd6;--card:#14111c;--line:#2a2634;--ink:#f3f1f8;--mut:#a39fb3;
  position:relative;width:min(1200px,calc(100% - 32px));margin:20px auto 80px;color:var(--ink);box-sizing:border-box}
.sp *,.sp *::before,.sp *::after{box-sizing:border-box}
.sp svg{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-muted{color:var(--mut);font-size:13px}

/* ---------- vitrin (ince başlık) ---------- */
.sp-front{position:relative;padding:50px 0 14px;isolation:isolate}
.sp-awning{position:absolute;left:0;right:0;top:0;height:42px;z-index:3;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
  transform-origin:50% 0;animation:spDrop .8s cubic-bezier(.2,.9,.25,1.15) both,spSway 7s ease-in-out 1s infinite}
.sp-awning-body{position:absolute;left:0;right:0;top:0;height:28px;border-radius:12px 12px 0 0;
  background:repeating-linear-gradient(90deg,var(--o) 0 28px,#f6dfc8 28px 56px)}
.sp-awning-body::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.2),transparent 45%,rgba(0,0,0,.2))}
.sp-awning-edge{position:absolute;left:0;right:0;top:27px;height:14px;
  background:radial-gradient(circle at 14px 0,var(--o) 13px,transparent 14.2px) 0 0/56px 14px repeat-x,
             radial-gradient(circle at 42px 0,#f6dfc8 13px,transparent 14.2px) 0 0/56px 14px repeat-x}
@keyframes spDrop{from{transform:translateY(-110%);opacity:0}to{transform:none;opacity:1}}
@keyframes spSway{0%,100%{transform:perspective(900px) rotateX(0)}50%{transform:perspective(900px) rotateX(1.4deg)}}

.sp-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 4px}
.sp-head-main{display:flex;align-items:center;gap:12px;min-width:0}
.sp-title{margin:0;font-size:clamp(22px,3.6vw,32px);line-height:1.15;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.sp-title-hl{background:linear-gradient(100deg,var(--o2),var(--o) 45%,var(--p) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:spShine 6s ease-in-out infinite}
@keyframes spShine{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.sp-info{flex:0 0 28px;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(245,138,60,.6);background:rgba(245,138,60,.1);color:var(--o2);font:inherit;font-size:15px;font-weight:800;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .2s,box-shadow .2s}
.sp-info:hover,.sp-info[aria-expanded="true"]{background:var(--o);color:#1a1208;transform:scale(1.08);box-shadow:0 0 16px rgba(245,138,60,.45)}
.sp-info:focus-visible{outline:2px solid var(--o2);outline-offset:3px}
.sp-infopop{position:absolute;left:0;top:calc(100% + 10px);z-index:6;width:min(420px,100%);padding:16px 18px;border-radius:14px;border:1px solid rgba(245,138,60,.4);
  background:#1a1626;box-shadow:0 18px 40px rgba(0,0,0,.55);font-size:14px;line-height:1.55;color:#cfc9df;transform-origin:20px 0;animation:spPop .18s ease-out}
.sp-infopop[hidden]{display:none}
.sp-infopop strong{display:block;margin-bottom:4px;color:var(--ink);font-size:15px}
.sp-infopop p{margin:0}.sp-infopop b{color:var(--ink)}
@keyframes spPop{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:none}}
.sp-ghost{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(245,138,60,.5);color:var(--o2);
  text-decoration:none;font-weight:600;font-size:14px;transition:background .2s,border-color .2s}
.sp-ghost svg{width:16px;height:16px;transition:transform .2s}
.sp-ghost:hover{background:rgba(245,138,60,.12);border-color:var(--o)}
.sp-ghost:hover svg{transform:translate(2px,-2px)}

/* yönetici */
.sp-admin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;margin-bottom:20px;border:1px dashed #5b4a8a;border-radius:14px;background:rgba(124,92,214,.08)}
.sp-admin>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.sp-admin-actions{display:flex;flex-wrap:wrap;gap:8px}
.sp-btn-soft{background:transparent;color:#d6d2e2;border:1px solid #5b4a8a}
.sp-btn-soft:hover{background:rgba(124,92,214,.2)}
.sp-btn-soft.is-armed{background:var(--o);border-color:var(--o);color:#1a1208}

/* tezgâh (arama + sıralama) */
.sp-counter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 36px;padding:12px 14px;border-radius:16px;
  border:1px solid var(--line);background:linear-gradient(180deg,#1a1626,#14111c);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.sp-counter-label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#d9d4e8}
.sp-counter-label svg{width:20px;height:20px;color:var(--o)}
.sp-bar{display:flex;flex-wrap:wrap;gap:10px}
.sp-field{position:relative;display:block}
.sp-field svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--mut);pointer-events:none}
.sp-field input,.sp-field select{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:#0f0c16;color:var(--ink);font:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}
.sp-field-search input{padding-left:42px;width:min(280px,100%)}
.sp-field input:focus,.sp-field select:focus{outline:none;border-color:var(--o);box-shadow:0 0 0 3px rgba(245,138,60,.18)}

/* raflar + kartlar */
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:62px 24px;padding-bottom:6px}
.sp-card{--rx:0deg;--ry:0deg;--ty:0px;--mx:50%;--my:50%;position:relative;min-width:0;display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:18px;background:var(--card);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));transition:transform .22s ease-out,opacity .6s ease,border-color .2s,box-shadow .25s;
  box-shadow:0 14px 30px rgba(0,0,0,.35)}
.sp-card[hidden]{display:none}
/* raf tahtası: yan yana kartlar kesintisiz bir raf oluşturur */
.sp-card::after{content:"";position:absolute;left:-12px;right:-12px;bottom:-24px;height:9px;border-radius:3px;z-index:-1;
  background:linear-gradient(180deg,#4a3a6e,#241b38);box-shadow:0 16px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12)}
.sp-card:hover{border-color:rgba(245,138,60,.55);--ty:-6px;box-shadow:0 26px 44px rgba(0,0,0,.5),0 0 34px rgba(245,138,60,.12)}
.sp-card.is-hidden{opacity:.55;border-style:dashed}
.sp-photo{position:relative;aspect-ratio:1/1;border-radius:17px 17px 0 0;background:#1c1830;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sp-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sp-card:hover .sp-photo img{transform:scale(1.07)}
.sp-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px 200px at var(--mx) var(--my),rgba(255,255,255,.22),transparent 65%)}
.sp-card:hover .sp-sheen{opacity:1}
.sp-noimg{font-size:34px;font-weight:800;color:rgba(255,255,255,.35)}
.sp-badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:#2a2634;color:#d6d2e2;border-radius:999px;padding:5px 10px}

/* asılı fiyat etiketi */
.sp-tag{position:absolute;right:16px;top:-2px;z-index:2;transform-origin:50% 0;animation:spTag 5s ease-in-out infinite;animation-delay:calc(var(--n,0) * -.7s)}
.sp-tag::before{content:"";display:block;width:1px;height:14px;margin:0 auto;background:rgba(255,255,255,.55)}
.sp-card:nth-child(3n+2) .sp-tag{--n:2}.sp-card:nth-child(3n) .sp-tag{--n:4}
.sp-price{display:block;position:relative;padding:6px 12px 7px;border-radius:4px 4px 8px 8px;background:linear-gradient(180deg,var(--o2),var(--o));color:#1a1208;
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 8px 14px rgba(0,0,0,.45)}
.sp-price::before{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#14111c;opacity:.0}
.sp-card:hover .sp-tag{animation-duration:1.8s}
@keyframes spTag{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

.sp-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px;flex-grow:1}
.sp-name{margin:0;font-size:16px;line-height:1.35;font-weight:700;min-height:43px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sp-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 16px;border:0;border-radius:12px;
  background:linear-gradient(180deg,var(--o2),var(--o));color:#1a1208;font:inherit;font-size:14px;font-weight:800;text-decoration:none;cursor:pointer;margin-top:auto;
  transition:transform .15s,box-shadow .2s}
.sp-btn svg{width:18px;height:18px;stroke-width:1.9}
.sp-btn .sp-arrow{transition:transform .2s;margin-left:-2px}
.sp-btn::before{content:"";position:absolute;top:0;left:-70%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.sp-btn:hover{box-shadow:0 8px 22px rgba(245,138,60,.4);transform:translateY(-1px)}
.sp-btn:hover::before{animation:spGlint .7s ease}
.sp-btn:hover .sp-arrow{transform:translateX(4px)}
.sp-btn:active{transform:translateY(1px)}
@keyframes spGlint{to{left:130%}}
.sp-btn-admin{background:var(--p2);color:#fff;margin-top:0}
.sp-btn-admin::before{display:none}
.sp-btn[disabled]{opacity:.6;cursor:wait}
.sp-toggle{min-height:40px;border-radius:10px;border:1px solid #3a3447;background:transparent;color:#d6d2e2;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sp-toggle[data-on="1"]{border-color:#7fd1a0;color:#7fd1a0}

/* kayıt (JS açıksa kartlar sırayla belirir; JS yoksa hepsi görünür) */
.sp-js .sp-card:not(.sp-in){opacity:0;--ty:34px}

/* boş vitrin */
.sp-empty,.sp-empty-state{padding:24px 8px 8px;color:var(--mut);font-size:16px;line-height:1.6;text-align:center}
.sp-empty-state p{margin:6px 0}
.sp-empty-title{font-size:22px;font-weight:800;color:var(--ink)}
.sp-shelves{display:flex;flex-direction:column;gap:46px;max-width:620px;margin:6px auto 34px}
.sp-shelf-row{position:relative;display:flex;justify-content:space-around;align-items:flex-end;height:64px}
.sp-shelf-row::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-12px;height:9px;border-radius:3px;background:linear-gradient(180deg,#4a3a6e,#241b38);box-shadow:0 14px 20px rgba(0,0,0,.5)}
.sp-shelf-row i{width:56px;height:56px;border-radius:12px;border:1.5px dashed rgba(178,128,255,.45);background:rgba(124,92,214,.08);animation:spBob 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * .22s)}
.sp-shelf-row i:nth-child(odd){height:44px}
@keyframes spBob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-8px);opacity:1}}

/* güven şeridi */
.sp-trust{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.sp-trust li{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#14111c;transition:transform .2s,border-color .2s}
.sp-trust li:hover{transform:translateY(-3px);border-color:rgba(178,128,255,.4)}
.sp-trust svg{flex:0 0 28px;width:28px;height:28px;color:var(--o);animation:spFloat 4s ease-in-out infinite}
.sp-trust li:nth-child(2) svg{animation-delay:-1.3s;color:var(--p)}.sp-trust li:nth-child(3) svg{animation-delay:-2.6s}
.sp-trust b{display:block;font-size:15px}.sp-trust span{display:block;font-size:13px;color:var(--mut);margin-top:2px}
@keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.sp-foot{margin-top:40px;padding-top:24px;border-top:1px solid #231f2e;color:var(--mut);font-size:14px;line-height:1.6}
.sp-foot p{margin:0 0 8px}
.sp-fine{font-size:12px;color:#8a8599;max-width:760px}

@media (max-width:560px){
  .sp-awning-body{height:22px}.sp-awning-edge{top:21px}.sp-awning{height:35px}.sp-front{padding-top:44px}
  .sp-counter{padding:12px}.sp-bar,.sp-field,.sp-field input,.sp-field select{width:100%}
  .sp-field-search input{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sp *,.sp *::before,.sp *::after{animation:none!important;transition:none!important}
  .sp-js .sp-card:not(.sp-in){opacity:1;--ty:0px}
}