/* Servelio Storefront v3 — ortak tasarim degiskenleri.
   Tum temalar bunlari kullanir. --sv-brand admin panelden gelir. */
:root{
  --sv-brand:#14B8A6;
  --sv-brand-dark:color-mix(in srgb,var(--sv-brand) 68%,#000);
  --sv-brand-soft:color-mix(in srgb,var(--sv-brand) 12%,#fff);
  --sv-ink:#0F2A2E;
  --sv-muted:#5E7377;
  --sv-line:#E3EAEA;
  --sv-bg:#F5F8F8;
  --sv-surface:#FFFFFF;
  --sv-deep:#0C2124;
  --sv-ok:#15803D;
  --sv-bad:#B91C1C;
  --sv-radius:20px;
  --sv-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sv-shadow:0 1px 2px rgba(15,42,46,.05),0 8px 24px -12px rgba(15,42,46,.18);
  --sv-shadow-lg:0 24px 48px -20px rgba(15,42,46,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sv-font);background:var(--sv-bg);color:var(--sv-ink);-webkit-font-smoothing:antialiased}
.sv-boot{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
.sv-boot-spin{width:38px;height:38px;border-radius:50%;border:4px solid var(--sv-brand-soft);border-top-color:var(--sv-brand);animation:sv-spin 1s linear infinite}
.sv-boot-msg{font-weight:700;color:var(--sv-muted)}
@keyframes sv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Yukleniyor iskeleti (tum temalarda ortak, tema yuklenince kaybolur) */
.sv-skel{min-height:100vh;background:var(--sv-bg)}
.sv-skel .sk{display:block;border-radius:14px;background:linear-gradient(90deg,#E6EDED 0%,#F3F7F7 40%,#E6EDED 80%) 0 0/300% 100%;animation:sv-sk 1.3s ease-in-out infinite}
.sv-skel .sk-top{height:66px;background:#fff;border-bottom:1px solid var(--sv-line);display:flex;align-items:center;gap:12px;padding:0 clamp(16px,3vw,56px)}
.sv-skel .sk-c{width:44px;height:44px;border-radius:50%}
.sv-skel .sk-l{width:180px;height:16px}
.sv-skel .sk-wrap{max-width:1840px;margin:0 auto;padding:20px clamp(16px,3vw,56px)}
.sv-skel .sk-hero{height:min(540px,70vh);border-radius:32px}
.sv-skel .sk-row{display:flex;gap:10px;margin:24px 0}
.sv-skel .sk-pill{width:110px;height:42px;border-radius:999px}
.sv-skel .sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.sv-skel .sk-card{height:320px;border-radius:22px}
@keyframes sv-sk{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.sv-skel .sk{animation:none}}