/* ReStore Premium Servis — Design System v1.0 (Adım 1) */
/* =====================================================================
   1) DESIGN TOKENS  — Tailwind kullanılmasa da tek kaynak burasıdır
   ===================================================================== */
:root{
  --navy-950:#0B1120; --navy-900:#0F172A; --navy-800:#1E293B; --navy-700:#334155; --navy-600:#475569;
  --accent-50:#F0F9FF; --accent-100:#E0F2FE; --accent-200:#BAE6FD; --accent-400:#38BDF8;
  --accent-500:#0EA5E9; --accent-600:#0284C7; --accent-700:#0369A1;
  --silver-25:#FCFDFE; --silver-50:#F8FAFC; --silver-100:#F1F5F9; --silver-200:#E2E8F0; --silver-300:#CBD5E1; --silver-400:#94A3B8;
  --space-500:#64748B;
  --success-50:#ECFDF5; --success-600:#059669; --success-700:#047857;
  --warning-50:#FFFBEB; --warning-600:#D97706; --warning-700:#B45309;
  --danger-50:#FEF2F2;  --danger-600:#DC2626;  --danger-700:#B91C1C;

  --font-display:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-sans:Inter,system-ui,sans-serif;

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;
  --sh-xs:0 1px 2px rgba(15,23,42,.05);
  --sh-card:0 1px 3px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.04);
  --sh-hover:0 8px 24px rgba(15,23,42,.08),0 2px 6px rgba(15,23,42,.04);
  --sh-focus:0 0 0 4px rgba(14,165,233,.22);
  --sh-cta:0 6px 18px rgba(14,165,233,.30);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* =====================================================================
   2) BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--silver-50);color:var(--navy-800);font:400 16px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--navy-900);margin:0}
.price,.num{font-family:var(--font-display);font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:var(--sh-focus)}

/* =====================================================================
   3) COMPONENTS  (Tailwind'de: @layer components { ... } içine kopyalanır)
   ===================================================================== */

/* --- Buton --- */
.rs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:44px;padding:0 1.25rem;
  border-radius:var(--r-md);border:1px solid transparent;font:600 15px/1 var(--font-display);letter-spacing:.005em;
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:all .25s var(--ease)}
.rs-btn svg{width:18px;height:18px}
.rs-btn--sm{height:36px;padding:0 .875rem;font-size:14px}
.rs-btn--lg{height:52px;padding:0 1.75rem;font-size:16px}
.rs-btn--block{width:100%}
/* Birincil CTA: turkuaz zemin + navy metin (beyaz metin turkuazda kontrast sağlamaz) */
.rs-btn--primary{background:var(--accent-500);color:var(--navy-900);box-shadow:var(--sh-cta)}
.rs-btn--primary:hover{background:var(--accent-400);transform:translateY(-1px)}
.rs-btn--primary:active{transform:translateY(0);background:var(--accent-600);color:#fff}
/* İkincil: kurumsal navy */
.rs-btn--secondary{background:var(--navy-800);color:#fff}
.rs-btn--secondary:hover{background:var(--navy-900)}
/* Çerçeveli: gümüş kenarlık */
.rs-btn--outline{background:#fff;color:var(--navy-800);border-color:var(--silver-300)}
.rs-btn--outline:hover{border-color:var(--navy-800);box-shadow:var(--sh-xs)}
/* Hayalet & link */
.rs-btn--ghost{background:transparent;color:var(--navy-700)}
.rs-btn--ghost:hover{background:var(--silver-100)}
.rs-btn--link{background:none;height:auto;padding:0;color:var(--accent-700);text-decoration:underline;text-underline-offset:3px}
/* Koyu zemin (hero) üzerinde çerçeveli */
.rs-btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.rs-btn--on-dark:hover{background:rgba(255,255,255,.08);border-color:#fff}
/* WhatsApp */
.rs-btn--whatsapp{background:#25D366;color:#063B1E}
.rs-btn--whatsapp:hover{background:#1FBF5B}
/* Durumlar */
.rs-btn:disabled,.rs-btn[aria-disabled=true]{background:var(--silver-200);color:var(--silver-400);border-color:transparent;box-shadow:none;cursor:not-allowed;transform:none}
.rs-btn.is-loading{color:transparent!important;position:relative;pointer-events:none}
.rs-btn.is-loading::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;border:2px solid var(--navy-900);border-right-color:transparent;animation:rs-spin .7s linear infinite}
@keyframes rs-spin{to{transform:rotate(360deg)}}

/* --- Form alanları --- */
.rs-field{display:flex;flex-direction:column;gap:6px}
.rs-label{font:500 14px/1.4 var(--font-sans);color:var(--navy-800)}
.rs-label .req{color:var(--danger-600);margin-left:2px}
.rs-input,.rs-select,.rs-textarea{width:100%;height:48px;padding:0 14px;background:#fff;color:var(--navy-900);
  border:1px solid var(--silver-300);border-radius:var(--r-md);font:400 16px/1.4 var(--font-sans); /* 16px: iOS zoom'u engeller */
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.rs-textarea{height:auto;min-height:120px;padding:12px 14px;resize:vertical;line-height:1.6}
.rs-input::placeholder,.rs-textarea::placeholder{color:var(--silver-400)}
.rs-input:hover,.rs-select:hover,.rs-textarea:hover{border-color:var(--silver-400)}
.rs-input:focus,.rs-select:focus,.rs-textarea:focus{outline:none;border-color:var(--accent-500);box-shadow:var(--sh-focus)}
.rs-select{appearance:none;padding-right:40px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center}
.rs-input:disabled,.rs-select:disabled{background:var(--silver-100);color:var(--silver-400);cursor:not-allowed}
.rs-help{font-size:13px;color:var(--space-500)}
.rs-field.is-error .rs-input,.rs-field.is-error .rs-select,.rs-field.is-error .rs-textarea{border-color:var(--danger-600)}
.rs-field.is-error .rs-input:focus{box-shadow:0 0 0 4px rgba(220,38,38,.15)}
.rs-field.is-error .rs-help{color:var(--danger-600)}
.rs-field.is-valid .rs-input{border-color:var(--success-600)}
/* Ek (prefix/suffix): TL, +90 */
.rs-affix{position:relative;display:flex}
.rs-affix .rs-input{padding-left:52px}
.rs-affix__txt{position:absolute;left:1px;top:1px;bottom:1px;width:44px;display:grid;place-items:center;
  border-right:1px solid var(--silver-200);color:var(--space-500);font:500 14px var(--font-sans);background:var(--silver-50);border-radius:9px 0 0 9px}
.rs-affix--suffix .rs-input{padding-left:14px;padding-right:52px}
.rs-affix--suffix .rs-affix__txt{left:auto;right:1px;border-right:0;border-left:1px solid var(--silver-200);border-radius:0 9px 9px 0}

/* Checkbox & radio */
.rs-check{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer;font-size:15px;color:var(--navy-800)}
.rs-check input{appearance:none;flex:none;width:20px;height:20px;margin:0;border:1.5px solid var(--silver-300);background:#fff;
  border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer;transition:all .15s var(--ease)}
.rs-check input[type=radio]{border-radius:50%}
.rs-check input:hover{border-color:var(--accent-500)}
.rs-check input:checked{background:var(--accent-500);border-color:var(--accent-500)}
.rs-check input[type=checkbox]:checked::after{content:"";width:5px;height:10px;border:solid var(--navy-900);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.rs-check input[type=radio]:checked{background:#fff;border-width:6px}
.rs-check .count{margin-left:auto;font:500 12px var(--font-sans);color:var(--space-500);background:var(--silver-100);padding:2px 8px;border-radius:999px}
/* Seçim kartı (radio'nun büyük versiyonu — Cihaz Sat formu) */
.rs-choice{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--silver-300);border-radius:var(--r-md);cursor:pointer;transition:all .2s var(--ease)}
.rs-choice:hover{border-color:var(--accent-400)}
.rs-choice:has(input:checked){border-color:var(--accent-500);background:var(--accent-50);box-shadow:0 0 0 1px var(--accent-500)}
.rs-choice input{accent-color:var(--accent-600);width:18px;height:18px;margin:0}

/* --- Badge --- */
.rs-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-sm);
  font:600 12px/1 var(--font-sans);letter-spacing:.01em;white-space:nowrap;border:1px solid transparent}
.rs-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.rs-badge--plain::before{display:none}
/* Kozmetik durum (Cihaz Al) */
.rs-badge--flawless{background:var(--success-50);color:var(--success-700);border-color:#A7F3D0}
.rs-badge--verygood{background:var(--accent-50);color:var(--accent-700);border-color:var(--accent-200)}
.rs-badge--good{background:var(--silver-100);color:var(--navy-700);border-color:var(--silver-300)}
/* Garanti & güven */
.rs-badge--warranty{background:var(--navy-800);color:#fff}
.rs-badge--warranty::before{background:var(--accent-400)}
.rs-badge--official{background:#fff;color:var(--navy-800);border-color:var(--silver-300)}
/* Kampanya / fiyat */
.rs-badge--promo{background:var(--accent-500);color:var(--navy-900)}
.rs-badge--promo::before{display:none}
.rs-badge--expiring{background:var(--warning-50);color:var(--warning-700);border-color:#FDE68A}
/* Stok sayacı (filtre) */
.rs-badge--count{height:20px;padding:0 7px;border-radius:999px;background:var(--silver-100);color:var(--space-500);font-weight:500}
.rs-badge--count::before{display:none}
/* Talep durumları (Admin — Adım 7'de kullanılacak) */
.rs-status--new{background:var(--accent-50);color:var(--accent-700);border-color:var(--accent-200)}
.rs-status--offer{background:#EEF2FF;color:#4338CA;border-color:#C7D2FE}
.rs-status--transit{background:var(--warning-50);color:var(--warning-700);border-color:#FDE68A}
.rs-status--review{background:#F5F3FF;color:#6D28D9;border-color:#DDD6FE}
.rs-status--done{background:var(--success-50);color:var(--success-700);border-color:#A7F3D0}
.rs-status--cancel{background:var(--danger-50);color:var(--danger-700);border-color:#FECACA}

/* --- Kart --- */
.rs-card{background:#fff;border:1px solid var(--silver-200);border-radius:var(--r-lg);box-shadow:var(--sh-card);transition:all .3s var(--ease)}
.rs-card--interactive:hover{box-shadow:var(--sh-hover);transform:translateY(-2px);border-color:var(--silver-300)}