/* ═══════════════════════════════════════
   Ware Hub — Tema
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-void:     #050508;
  --bg-deep:     #080b12;
  --bg-dark:     #0d1117;
  --bg-card:     #111827;
  --bg-card2:    #161f2e;
  --bg-hover:    #1a2234;

  --accent-cyan:    var(--accent-cyan);
  --accent-orange:  #ff6b35;
  --accent-purple:  #7c3aed;
  --accent-green:   #10b981;
  --accent-gold:    #f59e0b;
  --accent-red:     #ef4444;
  --accent-pink:    #ec4899;

  --text-bright:  #f0f6ff;
  --text-primary: #b8c5d9;
  --text-muted:   #6b7a94;
  --text-dim:     #3d4a5e;

  --border-dim:   rgba(var(--accent-rgb),0.08);
  --border-glow:  rgba(var(--accent-rgb),0.25);
  --border-hot:   rgba(var(--accent-rgb),0.5);

  --font-head: 'Rajdhani', sans-serif;
  --font-body: 'Exo 2', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  --shadow-glow: 0 0 20px rgba(var(--accent-rgb),0.15);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--accent-cyan); opacity: 0.4; border-radius: 3px; }

/* ── Background grid ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--accent-rgb),0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb),0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* ── Navbar ── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(5,5,8,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-dim);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 2rem;
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-logo {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent-cyan);
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  cursor: pointer;
}

.nav-logo::before {
  content: '⬡';
  margin-right: 8px;
  opacity: 0.8;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}

.nav-links a, .nav-links button {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  display: block;
}

.nav-links a:hover, .nav-links button:hover,
.nav-links a.active, .nav-links button.active {
  color: var(--accent-cyan);
  background: rgba(var(--accent-rgb),0.08);
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-balance {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--accent-green);
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-md);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-dim);
  transition: var(--transition);
}

.nav-user:hover { border-color: var(--border-glow); background: var(--bg-card); }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--bg-void);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ── Page Layout ── */
#app {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  min-height: 100vh;
}

.page { display: none; }
.page.active { display: block; }

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

/* ── Hero ── */
.hero {
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
}

.hero-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(var(--accent-rgb),0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(var(--accent-rgb),0.08);
  border: 1px solid rgba(var(--accent-rgb),0.2);
  color: var(--accent-cyan);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  margin-bottom: 2rem;
}

.hero-badge::before { content: '●'; font-size: 0.5rem; animation: pulse 2s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  color: var(--text-bright);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.hero h1 span {
  color: var(--accent-cyan);
  position: relative;
}

.hero-sub {
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--text-muted);
  max-width: 600px;
  margin: 1rem auto 3rem;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 600px;
  margin: 5rem auto 0;
  border-top: 1px solid var(--border-dim);
  padding-top: 3rem;
}

.hero-stat-num {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-cyan);
  display: block;
}

.hero-stat-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-cyan);
  color: var(--bg-void);
}
.btn-primary:hover { background: #33dcff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.3); }

.btn-outline {
  background: transparent;
  color: var(--accent-cyan);
  border: 1px solid var(--accent-cyan);
}
.btn-outline:hover { background: rgba(var(--accent-rgb),0.08); }

.btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  border: 1px solid var(--border-dim);
}
.btn-ghost:hover { border-color: var(--border-glow); color: var(--text-bright); }

.btn-danger {
  background: rgba(239,68,68,0.15);
  color: var(--accent-red);
  border: 1px solid rgba(239,68,68,0.3);
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

.btn-success {
  background: rgba(16,185,129,0.15);
  color: var(--accent-green);
  border: 1px solid rgba(16,185,129,0.3);
}
.btn-success:hover { background: rgba(16,185,129,0.25); }

.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.btn-lg { padding: 0.9rem 2.2rem; font-size: 1rem; }
.btn-full { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ── Cards ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: var(--transition);
}

.card:hover { border-color: var(--border-glow); }

.card-glow {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-xl);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.card-glow::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.5;
}

/* ── Product Grid ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* Kart artık sadece taşıyıcı: çerçevesi/zemini yok.
   Görsel üstte tek başına durur, isim-fiyat altta kendi kutusunda (.product-body). */
.product-card {
  background: none;
  border: 0;
  padding: 0;
  position: relative;
  overflow: visible;
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

/* İsim / fiyat kutusu — çerçeve burada */
.product-body {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-xl);
  padding: .9rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
}

.product-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  transform: scaleX(0);
  transition: var(--transition);
  z-index: 1;
}

.product-card:hover { transform: translateY(-3px); }

.product-card:hover .product-body {
  border-color: var(--border-glow);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), var(--shadow-glow);
}

.product-card:hover .product-body::before { transform: scaleX(1); }

.product-category {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(var(--accent-rgb),0.1);
  border: 1px solid rgba(var(--accent-rgb),0.15);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  display: inline-block;
}

.product-name {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: 0.02em;
}

.product-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.product-price {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent-green);
}

.product-stock {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.product-stock.low { color: var(--accent-orange); }
.product-stock.out { color: var(--accent-red); }

/* ── Forms ── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-input, .form-select, .form-textarea {
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  width: 100%;
  transition: var(--transition);
  outline: none;
  -webkit-appearance: none;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1);
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-hint { font-size: 0.78rem; color: var(--text-dim); }
.form-error { font-size: 0.8rem; color: var(--accent-red); }

/* ── Auth Modal ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-backdrop.active { display: flex; }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  width: 100%;
  max-width: 440px;
  max-height: 88vh;      /* YENİ — modal ekrandan taşmıyor */
  overflow-y: auto;       /* YENİ — içerik uzun olursa kayar */
  position: relative;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
}

.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  line-height: 1;
}

.modal-close:hover { color: var(--text-bright); background: var(--bg-hover); }

.modal-title {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.modal-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.auth-switch a {
  color: var(--accent-cyan);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}

.auth-switch a:hover { text-decoration: underline; }

/* ── Alert / Toast ── */
.alert {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.alert-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #fca5a5; }
.alert-success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: #6ee7b7; }
.alert-info { background: rgba(var(--accent-rgb),0.08); border: 1px solid rgba(var(--accent-rgb),0.2); color: var(--accent-cyan); }

/* ── Toast Notification ── */
#toast-container {
  position: fixed;
  top: 80px; right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
}

.toast {
  background: var(--bg-card2);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.2rem;
  font-size: 0.875rem;
  color: var(--text-bright);
  min-width: 280px;
  max-width: 380px;
  pointer-events: auto;
  animation: toastIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.toast.success { border-color: rgba(16,185,129,0.4); }
.toast.error   { border-color: rgba(239,68,68,0.4); }
.toast.info    { border-color: rgba(var(--accent-rgb),0.4); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Leaderboard ── */
.leaderboard-table { width: 100%; border-collapse: collapse; }

.leaderboard-table th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-dim);
}

.leaderboard-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-dim);
  transition: var(--transition);
}

.leaderboard-table tr:hover td { background: var(--bg-hover); }
.leaderboard-table tr:last-child td { border-bottom: none; }

.rank-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}

.rank-1 { color: var(--accent-gold); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); }
.rank-2 { color: #94a3b8; background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.2); }
.rank-3 { color: var(--accent-orange); background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.2); }
.rank-n { color: var(--text-dim); background: var(--bg-deep); border: 1px solid var(--border-dim); }

/* ── Admin ── */
.admin-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  min-height: calc(100vh - 64px - 4rem);
}

.admin-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1rem;
  height: fit-content;
  position: sticky;
  top: 80px;
}

.admin-sidebar-title {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.admin-nav-item:hover { color: var(--text-bright); background: var(--bg-hover); }
.admin-nav-item.active { color: var(--accent-cyan); background: rgba(var(--accent-rgb),0.08); }

.admin-content { flex: 1; }

.admin-section { display: none; }
.admin-section.active { display: block; }

/* ── Stats Cards ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
}

.stat-card.cyan::after  { background: var(--accent-cyan); }
.stat-card.green::after { background: var(--accent-green); }
.stat-card.orange::after{ background: var(--accent-orange); }
.stat-card.gold::after  { background: var(--accent-gold); }
.stat-card.purple::after{ background: var(--accent-purple); }
.stat-card.pink::after  { background: var(--accent-pink); }

.stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.stat-value {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
}

/* ── Table ── */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-dim); }

.data-table { width: 100%; border-collapse: collapse; }

.data-table th {
  background: var(--bg-deep);
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-dim);
}

.data-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border-dim);
  font-size: 0.875rem;
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--bg-hover); }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.badge-success { background: rgba(16,185,129,0.15); color: var(--accent-green); border: 1px solid rgba(16,185,129,0.25); }
.badge-danger  { background: rgba(239,68,68,0.15);  color: var(--accent-red);   border: 1px solid rgba(239,68,68,0.25); }
.badge-warning { background: rgba(245,158,11,0.15); color: var(--accent-gold);  border: 1px solid rgba(245,158,11,0.25); }
.badge-info    { background: rgba(var(--accent-rgb),0.1);   color: var(--accent-cyan);  border: 1px solid rgba(var(--accent-rgb),0.2); }
.badge-muted   { background: var(--bg-deep);        color: var(--text-muted);   border: 1px solid var(--border-dim); }

/* ── Key reveal ── */
.key-box {
  font-family: var(--font-mono);
  font-size: 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--accent-cyan);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  color: var(--accent-cyan);
  letter-spacing: 0.08em;
  word-break: break-all;
  user-select: all;
  cursor: text;
  position: relative;
}

/* ── Loading ── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-dim);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Page Header ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-dim);
}

.page-title {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-bright);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-title span { color: var(--accent-cyan); }

/* ── Tab switcher ── */
.tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  padding: 4px;
  width: fit-content;
  margin-bottom: 1.5rem;
}

.tab-btn {
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border: none;
  background: none;
  transition: var(--transition);
  letter-spacing: 0.03em;
}

.tab-btn.active {
  background: var(--bg-card);
  color: var(--accent-cyan);
  border: 1px solid var(--border-glow);
}

/* ── Search ── */
.search-box {
  position: relative;
  max-width: 360px;
}

.search-box input {
  padding-left: 2.5rem;
}

.search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 0.9rem;
}

/* ── Profile ── */
.profile-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.avatar-lg {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2rem;
  color: var(--bg-void);
  flex-shrink: 0;
}

/* ── Category Filter ── */
.filter-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.filter-btn {
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid var(--border-dim);
  background: none;
  transition: var(--transition);
  letter-spacing: 0.04em;
}

.filter-btn:hover { border-color: var(--border-glow); color: var(--text-bright); }
.filter-btn.active { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(var(--accent-rgb),0.08); }

/* ══════════════════════════════════════
   EKSİK STİLLER
══════════════════════════════════════ */
.stat-card.red::after   { background: var(--accent-red); }
.stat-card.teal::after  { background: #14b8a6; }
.debt-card { background: rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25); border-radius:var(--radius-lg); padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
.debt-card-title { font-family:var(--font-head); font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-red); margin-bottom:.75rem; }
.bayi-card { background:rgba(245,158,11,.06); border:1px solid rgba(245,158,11,.2); border-radius:var(--radius-lg); padding:1.25rem 1.5rem; margin-bottom:1.5rem; }
.bayi-card-title { font-family:var(--font-head); font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-gold); margin-bottom:.75rem; }
.sidebar-badge { background:var(--accent-red); color:#fff; font-size:.6rem; font-weight:700; padding:.15rem .45rem; border-radius:100px; margin-left:auto; }
.toggle-row { display:flex; align-items:center; gap:.75rem; }
.toggle-row input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent-cyan); }
.form-select option { background:var(--bg-card); color:var(--text-bright); }
.form-input-sm { padding:.4rem .65rem; font-size:.85rem; }
.nav-notif { display:inline-block; background:var(--accent-red); color:#fff; font-size:.55rem; font-weight:800; padding:.1rem .3rem; border-radius:100px; margin-left:3px; vertical-align:super; }
/* Görsel: kare, çerçeve boşluğu yok — resim alanı tamamen doldurur.
   Altında sadece küçük bir ayrım bırakılır, sonra isim/fiyat gelir. */
/* SADECE FOTOĞRAF — kutu yok, zemin yok, çerçeve yok.
   Ürün görselleri köşeleri şeffaf PNG; arkada zemin olursa köşelerde
   koyu bir çerçeve görünüyordu. Zemin kaldırıldı, şeffaflık korunuyor. */
.product-img { width:100%; aspect-ratio:1/1; height:auto; border-radius:0; overflow:visible; margin-bottom:0; background:none; border:0; display:flex; align-items:center; justify-content:center; }
.product-img img { width:100%; height:100%; object-fit:contain; padding:0; display:block; background:none; transition:transform .3s ease; }
/* Görseli olmayan ürünlerde ikon tek başına kalmasın diye hafif bir zemin */
.product-img-placeholder { background:var(--bg-deep); border-radius:var(--radius-lg); }
.product-card:hover .product-img img { transform:scale(1.04); }
.product-img-placeholder { font-size:2rem; }
.key-inline { display:inline-block; font-family:var(--font-mono); font-size:.72rem; background:rgba(var(--accent-rgb),.07); border:1px solid rgba(var(--accent-rgb),.2); color:var(--accent-cyan); padding:.15rem .5rem; border-radius:4px; cursor:pointer; letter-spacing:.04em; word-break:break-all; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; transition:background .15s; }
.key-inline:hover { background:rgba(var(--accent-rgb),.15); white-space:normal; max-width:none; }
.key-sold { opacity:.4; cursor:default; }
.upload-zone { border:2px dashed var(--border-dim); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition); }
.upload-zone:hover { border-color:var(--accent-cyan); }
#upload-zone-content { padding:1.5rem; text-align:center; }
.ticket-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; background:var(--bg-card2); border:1px solid var(--border-dim); border-radius:var(--radius-lg); cursor:pointer; transition:var(--transition); }
.ticket-row:hover { border-color:var(--border-glow); background:var(--bg-hover); }
.ticket-row-new { border-color:rgba(var(--accent-rgb),.2); }
.ticket-row-left { display:flex; align-items:center; gap:.85rem; }
.ticket-icon { font-size:1.4rem; flex-shrink:0; }
.ticket-new-dot { color:var(--accent-cyan); font-size:.6rem; animation:pulse 2s infinite; }
.ticket-msg { display:flex; gap:.9rem; }
.ticket-msg-admin { flex-direction:row; }
.ticket-msg-user  { flex-direction:row-reverse; }
.ticket-msg-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:.82rem; flex-shrink:0; }
.ticket-msg-body { flex:1; max-width:calc(100% - 50px); }
.ticket-msg-header { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; flex-wrap:wrap; }
.ticket-msg-text { background:var(--bg-card2); border:1px solid var(--border-dim); border-radius:var(--radius-md); padding:.75rem 1rem; font-size:.875rem; line-height:1.6; color:var(--text-primary); word-break:break-word; }
.ticket-msg-admin .ticket-msg-text { border-color:rgba(255,107,53,.2); background:rgba(255,107,53,.04); }
.atf-btn.active { color:var(--accent-cyan); border-color:var(--accent-cyan); }
.fade-in { animation:fadeIn .4s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.scan-line { position:relative; overflow:hidden; }
.scan-line::after { content:''; position:absolute; top:0; left:-100%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.04),transparent); animation:scan 3s ease-in-out infinite; }
@keyframes scan { to{left:200%} }
.price-main { font-family:var(--font-mono); font-size:1.3rem; font-weight:700; color:var(--accent-green); }
.price-sub  { font-family:var(--font-mono); font-size:.95rem; font-weight:600; color:var(--text-primary); letter-spacing:.02em; margin-top:1px; }

/* ══════════════════════════════════════
   CURRENCY TOGGLE — SİLİNDİRİK SLIDER
══════════════════════════════════════ */
.cur-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Slider kapsayıcı */
.cur-slider {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-deep);
  border: 1px solid rgba(var(--accent-rgb),.15);
  border-radius: 100px;
  padding: 3px;
  gap: 0;
}
/* Hareketli arka plan top */
.cur-pill {
  position: absolute;
  top: 3px; bottom: 3px;
  width: calc(33.3333% - 2px);
  left: 3px;
  border-radius: 100px;
  background: linear-gradient(135deg, var(--accent-cyan) 0%, #0099bb 100%);
  box-shadow: 0 0 14px rgba(var(--accent-rgb),.45);
  transition: left .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 0;
}
.cur-pill[data-pos="1"] { left: calc(33.3333% + 1px); }
.cur-pill[data-pos="2"] { left: calc(66.6666% - 1px); }
/* Butonlar */
.cur-btn {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  padding: .28rem .85rem;
  border-radius: 100px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-muted);
  transition: color .25s;
  letter-spacing: .06em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  min-width: 50px;
  text-align: center;
  user-select: none;
}
.cur-btn.active { color: #050508; font-weight: 800; }
/* Kur etiketi */
.cur-rate-tag {
  font-size: .62rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  white-space: nowrap;
  background: var(--bg-deep);
  border: 1px solid var(--border-dim);
  padding: .18rem .5rem;
  border-radius: var(--radius-sm);
  letter-spacing: .04em;
  min-width: 80px;
  text-align: center;
}

/* ══════════════════════════════════════
   HAMBURGER + MOBİL DRAWER
══════════════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 7px 5px;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(var(--accent-rgb),.08); }
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text-primary); border-radius: 2px;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:var(--accent-cyan); }
.nav-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:var(--accent-cyan); }

.nav-mobile-drawer {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0;
  background: rgba(5,5,8,.97);
  border-bottom: 1px solid var(--border-dim);
  z-index: 997;
  flex-direction: column;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-mobile-drawer.open { display: flex; }

.nav-mobile-drawer a,
.nav-mobile-drawer .mob-link {
  display: block; width: 100%;
  background: none; border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .9rem 1.25rem;
  cursor: pointer; text-decoration: none;
  text-align: left;
  border-left: 3px solid transparent;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.nav-mobile-drawer a:hover,
.nav-mobile-drawer .mob-link:hover { color:var(--text-bright); background:rgba(255,255,255,.04); border-left-color:var(--border-glow); }
.nav-mobile-drawer a.mob-active,
.nav-mobile-drawer .mob-link.mob-active { color:var(--accent-cyan); background:rgba(var(--accent-rgb),.06); border-left-color:var(--accent-cyan); }
.mob-divider { height:1px; background:var(--border-dim); margin:.3rem 0; }
.mob-user-card { display:flex; align-items:center; gap:.85rem; padding:.85rem 1.25rem; background:var(--bg-card); margin:.5rem .75rem .25rem; border-radius:var(--radius-lg); border:1px solid var(--border-dim); }
.mob-user-name { color:var(--text-bright); font-weight:600; font-size:.88rem; }
.mob-user-meta { color:var(--accent-green); font-family:var(--font-mono); font-size:.76rem; margin-top:2px; }
.mob-currency-row { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; }
.mob-currency-label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); white-space:nowrap; }
.mob-auth-row { display:flex; gap:.5rem; padding:.5rem .75rem .85rem; }
.mob-auth-row .btn { flex:1; justify-content:center; }

/* ══════════════════════════════════════
   RESPONSIVE — TABLET (≤ 900px)
══════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-links        { display: none !important; }
  .nav-hamburger    { display: flex !important; }
  .cur-wrap         { display: none !important; }

  .admin-grid { grid-template-columns: 1fr; gap: 1rem; }
  .admin-sidebar {
    position: static !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-lg);
  }
  .admin-sidebar-title { display: none; }
  .admin-nav-item { width: auto; padding: .38rem .7rem; font-size: .76rem; gap: .35rem; }

  .hero-stats { grid-template-columns: repeat(3,1fr); gap: 1rem; }
  .stats-grid { grid-template-columns: repeat(3,1fr); gap: .75rem; }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBİL (≤ 600px)
══════════════════════════════════════ */
@media (max-width: 600px) {
  .container { padding: 1rem; }

  /* Hero */
  .hero { padding: 2.5rem 1rem; min-height: auto; }
  .hero h1 { font-size: clamp(1.9rem,8vw,2.8rem); }
  .hero-sub { font-size: .88rem; margin-bottom: 1.5rem; }
  .hero-badge { font-size: .62rem; }
  .hero-stats { max-width:100%; margin-top:2.5rem; padding-top:1.5rem; gap:.75rem; }
  .hero-stat-num { font-size:1.6rem; }
  .hero-stat-label { font-size:.62rem; }
  .hero-cta { gap:.5rem; }
  .btn-lg { padding:.65rem 1.2rem; font-size:.88rem; }

  /* Ürünler */
  .product-grid { grid-template-columns: repeat(2,1fr); gap:.65rem; }
  .product-card { padding:.9rem; gap:.6rem; }
  .product-name { font-size:.95rem; }
  .product-desc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.78rem; }
  .price-main   { font-size:1.1rem; }
  .price-sub    { font-size:.85rem; }

  /* Stats */
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:.65rem; }
  .stat-value { font-size:1.6rem; }

  /* Page header */
  .page-header { margin-bottom:1rem; padding-bottom:.75rem; flex-wrap:wrap; gap:.5rem; }
  .page-title  { font-size:1.3rem; }

  /* Modaller — alt sheet */
  .modal-backdrop { align-items:flex-end; padding:0; }
  .modal {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: 100%; max-height: 92vh;
    overflow-y: auto; padding:1.5rem 1.25rem;
    margin: 0;
    animation: mobileSlideUp .3s ease;
  }
  @keyframes mobileSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

  /* Admin sidebar */
  .admin-nav-item { font-size:.7rem; padding:.32rem .55rem; }

  /* Profil */
  .profile-header { flex-wrap:wrap; gap:.75rem; }
  .profile-header > div:last-child { margin-left:0 !important; width:100%; }
  .avatar-lg { width:58px; height:58px; font-size:1.5rem; }

  /* Tablo */
  .data-table th, .data-table td { padding:.55rem .65rem; font-size:.78rem; }

  /* Ticket */
  .ticket-row { flex-direction:column; align-items:flex-start; gap:.4rem; }
  .ticket-msg-user { flex-direction:row; }
  .ticket-msg-text { font-size:.83rem; }

  /* Toast */
  #toast-container { right:.5rem; left:.5rem; top:70px; }
  .toast { min-width:unset; max-width:100%; font-size:.82rem; }
}

/* ══════════════════════════════════════
   RESPONSIVE — KÜÇÜK MOBİL (≤ 420px)
══════════════════════════════════════ */
@media (max-width: 420px) {
  .navbar { padding:0 .85rem; }
  .nav-logo { font-size:1.2rem; letter-spacing:1.5px; }

  /* Nav right küçük ekranda sadeleş */
  .nav-right .btn.btn-ghost { display:none; }
  .nav-right .btn.btn-primary { display:none; }
  .nav-balance { font-size:.75rem; padding:.2rem .45rem; }
  .nav-user span:not(.avatar):not(.badge) { display:none; }
  .nav-user { padding:.2rem .4rem; }

  .product-grid { grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .product-card { padding:.75rem; }
  .product-name { font-size:.88rem; }
  .product-desc { display:none; }
  .stats-grid   { grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .stat-value   { font-size:1.4rem; }
  .hero h1      { font-size:1.8rem; }
}

/* ══════════════════════════════════════
   RESPONSIVE — ÇOK KÜÇÜK (≤ 360px)
══════════════════════════════════════ */
@media (max-width: 360px) {
  /* Görsel kare olduğu için tek sütunda devasa kalıyordu — 2 sütun kalsın. */
  .product-grid { grid-template-columns:repeat(2,1fr); gap:.4rem; }
  .product-card { padding:.42rem; }
  .hero h1 { font-size:1.6rem; }
}

/* Touch optimize */
@media (hover: none) {
  .product-card:hover { transform:none; box-shadow:none; }
  .product-card:active { transform:scale(.98); border-color:var(--border-glow); }
  .btn:hover { transform:none !important; box-shadow:none !important; }
  .btn:active { opacity:.85; }
}

/* ══════════════════════════════════════
   KUR ŞERİDİ — KAYAN GEÇİŞ
══════════════════════════════════════ */
.cur-rate-tag {
  position: relative;
  overflow: hidden;
  height: 1.35rem;
  min-width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .5rem;
}
.cur-rate-line {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .42s cubic-bezier(.4,0,.2,1), opacity .42s ease;
  will-change: transform, opacity;
}
.cur-rate-line.is-out { transform: translateY(-115%); opacity: 0; }
.cur-btn { min-width: 44px; padding: .28rem .6rem; }
@media (prefers-reduced-motion: reduce) {
  .cur-rate-line { transition: opacity .2s ease; }
  .cur-rate-line.is-out { transform: none; opacity: 0; }
  .cur-pill { transition: none; }
}

/* Ürün kartı fiyat alt satırı — kayan geçiş */
.price-sub {
  display: inline-block;
  transition: transform .34s cubic-bezier(.4,0,.2,1), opacity .34s ease;
  will-change: transform, opacity;
}
.price-sub.tick-out { transform: translateY(-70%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .price-sub { transition: opacity .2s ease; }
  .price-sub.tick-out { transform: none; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   WARE HUB — TEMA
   Rafine koyu yüzeyler, menekşe imza rengi, cam efektli kartlar.
   Para birimi sistemi (.cur-*, .price-*) yapısına dokunulmadı.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Zemin — hafif menekşe alt tonlu, saf siyahtan sıcak */
  --bg-void:  #060609;
  --bg-deep:  #0a0a11;
  --bg-dark:  #0e0e17;
  --bg-card:  #14141f;
  --bg-card2: #191926;
  --bg-hover: #20202f;

  /* İmza rengi — menekşe */
  --accent-rgb:    167,139,250;
  --accent-cyan:   #a78bfa;
  --accent-purple: #8b5cf6;
  --accent-orange: #fb923c;
  --accent-green:  #34d399;
  --accent-gold:   #fbbf24;
  --accent-red:    #f43f5e;
  --accent-pink:   #f472b6;

  --text-bright:  #f6f6fb;
  --text-primary: #c3c3d4;
  --text-muted:   #8a8aa3;
  --text-dim:     #55556c;

  --border-dim:  rgba(255,255,255,.06);
  --border-glow: rgba(var(--accent-rgb),.28);
  --border-hot:  rgba(var(--accent-rgb),.55);

  --font-head: 'Outfit', system-ui, sans-serif;
  --font-body: 'Sora', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-glow: 0 0 28px rgba(var(--accent-rgb),.16);
  --shadow-card: 0 12px 40px rgba(0,0,0,.55);
  --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* Zemin dokusu — çok ince ışık huzmesi */
body {
  font-family: var(--font-body);
  background:
    radial-gradient(ellipse 80% 60% at 50% -15%, rgba(var(--accent-rgb),.10), transparent 65%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(244,114,182,.05), transparent 60%),
    var(--bg-void);
  background-attachment: fixed;
  letter-spacing: .005em;
}

/* ── Tipografi ── */
h1, h2, h3, .nav-logo, .admin-sidebar-title { font-family: var(--font-head); letter-spacing: -.015em; }
.nav-logo {
  font-weight: 800; font-size: 1.32rem; letter-spacing: -.02em;
  background: linear-gradient(120deg, #ffffff 0%, var(--accent-cyan) 60%, var(--accent-pink) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Navbar — cam ── */
.navbar {
  background: rgba(10,10,17,.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border-dim);
}
.nav-links a {
  border-radius: 100px; padding: .45rem .95rem; font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.nav-links a:hover { background: rgba(255,255,255,.05); }
.nav-links a.active {
  background: rgba(var(--accent-rgb),.14);
  color: var(--accent-cyan);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.22);
}

/* ── Kartlar — cam yüzey ──
   .product-card bu listeden ÇIKARILDI: ürün kartında zemin/çerçeve
   artık sadece alttaki bilgi kutusunda (.product-body). Fotoğraf çıplak durur. */
.product-body, .stat-card, .feature-card, .admin-sidebar, .admin-content,
.ticket-row, .table-wrap, .modal {
  background: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%), var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.product-card {
  background: none;
  border: 0;
  box-shadow: none;
  transition: transform var(--transition);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
}
.product-card:hover .product-body {
  border-color: rgba(var(--accent-rgb),.34);
  box-shadow: 0 18px 46px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--accent-rgb),.18), var(--shadow-glow);
}

/* ── Butonlar ── */
.btn {
  border-radius: 100px; font-family: var(--font-body); font-weight: 600;
  letter-spacing: .01em; transition: var(--transition);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%);
  border: none; color: #0a0a11; font-weight: 700;
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),.32);
}
.btn-primary:hover {
  filter: brightness(1.1); transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(var(--accent-rgb),.42);
}
.btn-ghost { border: 1px solid var(--border-dim); background: rgba(255,255,255,.03); }
.btn-ghost:hover { border-color: var(--border-glow); background: rgba(var(--accent-rgb),.08); }
.btn-danger { background: linear-gradient(135deg, #e11d48, var(--accent-red)); border: none; color: #fff; }

/* ── Form ── */
.form-input, .form-select, .form-textarea {
  background: rgba(0,0,0,.32); border: 1px solid var(--border-dim);
  border-radius: var(--radius-md); transition: var(--transition);
  font-family: var(--font-body);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: rgba(var(--accent-rgb),.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12);
  outline: none;
}

/* ── Tablolar ── */
.data-table thead th {
  background: rgba(255,255,255,.03); color: var(--text-muted);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:hover { background: rgba(var(--accent-rgb),.05); }

/* ── Admin kenar çubuğu ── */
.admin-nav-item {
  border-radius: var(--radius-md); font-weight: 500;
  transition: var(--transition); border: 1px solid transparent;
}
.admin-nav-item:hover { background: rgba(255,255,255,.045); }
.admin-nav-item.active {
  background: rgba(var(--accent-rgb),.13);
  border-color: rgba(var(--accent-rgb),.26);
  color: var(--accent-cyan);
}

/* ── Para birimi seçici — rafine ── */
.cur-slider {
  background: rgba(0,0,0,.36);
  border: 1px solid var(--border-dim);
}
.cur-pill {
  background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-cyan) 100%);
  box-shadow: 0 0 18px rgba(var(--accent-rgb),.45);
}
.cur-btn.active { color: #0a0a11; }
.cur-rate-tag {
  background: rgba(0,0,0,.34); border: 1px solid var(--border-dim);
  color: var(--text-muted); border-radius: 100px;
}

/* ── Fiyatlar ── */
.price-main {
  font-family: var(--font-mono); font-weight: 700;
  background: linear-gradient(120deg, var(--accent-green), #6ee7b7);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.price-sub { color: var(--text-muted); }

/* ── Ban sekmeleri ── */
.ban-tabs { display: flex; gap: .5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.ban-tab {
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  padding: .5rem 1.05rem; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.035); color: var(--text-muted);
  border: 1px solid var(--border-dim); transition: var(--transition);
}
.ban-tab:hover { background: rgba(255,255,255,.06); color: var(--text-primary); }
.ban-tab.active {
  background: rgba(var(--accent-rgb),.15); color: var(--accent-cyan);
  border-color: rgba(var(--accent-rgb),.35);
  box-shadow: 0 0 16px rgba(var(--accent-rgb),.16);
}

/* ── Rozetler ── */
.badge { border-radius: 100px; font-weight: 600; letter-spacing: .04em; }

/* ── Modal ── */
.modal-backdrop { backdrop-filter: blur(10px); background: rgba(4,4,8,.72); }

/* ── Kaydırma çubuğu ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb),.22); border-radius: 100px;
  border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),.4); }
::selection { background: rgba(var(--accent-rgb),.3); color: var(--text-bright); }

/* Tarama animasyonu — daha sakin */
.scan-line::after { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.055), transparent); }

/* Navbar taşma düzeltmesi — logo ve menü tek satırda kalsın */
.nav-logo { white-space: nowrap; flex-shrink: 0; }
.nav-links a { white-space: nowrap; }
.nav-inner { gap: .9rem; }
.nav-links { gap: .15rem; }
@media (max-width: 1150px) {
  .nav-links a { padding: .42rem .7rem; font-size: .88rem; }
  .cur-btn { min-width: 38px; padding: .26rem .5rem; font-size: .68rem; }
  .cur-rate-tag { min-width: 92px; font-size: .58rem; }
}

/* Owner rozeti — altın */
.badge-gold {
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(251,191,36,.08));
  color: var(--accent-gold);
  border: 1px solid rgba(251,191,36,.4);
  box-shadow: 0 0 14px rgba(251,191,36,.18);
}

/* ═══════════════════════════════════════
   OWNER PANELİ
═══════════════════════════════════════ */
.owner-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .7rem; margin-bottom: 1.4rem;
}
.owner-stat {
  display: flex; flex-direction: column; gap: .18rem;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  border: 1px solid var(--border-dim); border-radius: var(--radius-md);
  padding: .85rem .9rem; position: relative; overflow: hidden;
}
.owner-stat::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: linear-gradient(180deg, var(--accent-purple), var(--accent-cyan));
  opacity: .7;
}
.owner-stat-ic { font-size: 1rem; line-height: 1; }
.owner-stat-v  { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--text-bright); }
.owner-stat-l  { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }

.owner-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--border-dim); border-radius: var(--radius-lg);
  padding: 1.25rem 1.3rem; margin-bottom: 1.1rem;
}
.owner-card-title {
  font-family: var(--font-head); font-size: 1rem; font-weight: 700;
  color: var(--text-bright); margin-bottom: 1rem;
}
.owner-card.owner-danger { border-color: rgba(244,63,94,.28); background: linear-gradient(180deg, rgba(244,63,94,.05), transparent); }

.owner-toggles { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.owner-toggle {
  display: flex; align-items: center; gap: .7rem; cursor: pointer;
  background: rgba(0,0,0,.28); border: 1px solid var(--border-dim);
  border-radius: var(--radius-md); padding: .7rem .95rem; flex: 1 1 240px;
  transition: var(--transition);
}
.owner-toggle:hover { border-color: var(--border-glow); }
.owner-toggle input { width: 18px; height: 18px; accent-color: var(--accent-cyan); cursor: pointer; flex-shrink: 0; }
.owner-toggle span { display: flex; flex-direction: column; gap: .12rem; }
.owner-toggle b { font-size: .86rem; color: var(--text-bright); font-weight: 600; }
.owner-toggle small { font-size: .7rem; color: var(--text-muted); }

.owner-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem; }

.owner-sys { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .5rem; }
.owner-sys-row {
  display: flex; justify-content: space-between; gap: .8rem;
  background: rgba(0,0,0,.25); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: .55rem .8rem;
  font-family: var(--font-mono); font-size: .76rem;
}
.owner-sys-row span { color: var(--text-muted); }
.owner-sys-row b { color: var(--text-bright); font-weight: 600; }

@media (max-width: 640px) {
  .owner-stats { grid-template-columns: repeat(2, 1fr); }
  .owner-fields { grid-template-columns: 1fr; }
}

/* Duyuru şeridi */
.site-announcement {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .6rem 1.2rem; font-size: .85rem; font-weight: 500;
  color: #0a0a11; text-align: center;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan), var(--accent-pink));
  box-shadow: 0 4px 20px rgba(var(--accent-rgb),.3);
}
.site-announcement .ann-ic { font-size: 1rem; flex-shrink: 0; }

/* Avatar fotoğrafı */
.avatar.avatar-img { padding: 0; overflow: hidden; background: var(--bg-card2); }
.avatar.avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-lg.avatar-img { padding: 0; overflow: hidden; }
.avatar-lg.avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Profil fotoğrafı değiştirme */
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-wrap .avatar { border: 2px solid rgba(var(--accent-rgb),.35); }
.avatar-edit {
  position: absolute; right: -4px; bottom: -4px;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; line-height: 1;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  border: 2px solid var(--bg-card); color: #0a0a11;
  box-shadow: 0 3px 12px rgba(var(--accent-rgb),.4);
  transition: var(--transition);
}
.avatar-edit:hover { transform: scale(1.1); }

/* ═══════════════════════════════════════
   KEY RESET
═══════════════════════════════════════ */
.kr-item {
  border: 1px solid var(--border-dim); border-radius: var(--radius-lg);
  overflow: hidden; margin-bottom: .8rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
}
.kr-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.2rem; cursor: pointer;
  background: none; border: none; color: var(--text-bright);
  font-family: var(--font-head); font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.01em; text-align: left; transition: var(--transition);
}
.kr-head:hover { background: rgba(var(--accent-rgb),.06); }
.kr-head.open  { background: rgba(var(--accent-rgb),.09); color: var(--accent-cyan); }
.kr-title { display: flex; align-items: center; gap: .5rem; }
.kr-title::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  box-shadow: 0 0 10px rgba(var(--accent-rgb),.6); flex-shrink: 0;
}
.kr-arrow { font-size: .85rem; color: var(--text-muted); transition: transform .25s ease; }
.kr-head.open .kr-arrow { transform: rotate(180deg); color: var(--accent-cyan); }

.kr-body[hidden] { display: none; }
.kr-body .kr-inner { animation: krIn .26s cubic-bezier(.2,.7,.3,1) both; }
@keyframes krIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.kr-inner { padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--border-dim); padding-top: 1rem; }
.kr-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.kr-row .form-input { flex: 1 1 240px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

.kr-result { margin-top: .9rem; font-size: .86rem; line-height: 1.55; padding: .75rem .9rem;
  border-radius: var(--radius-md); border: 1px solid transparent; display: none; }
.kr-result.kr-ok, .kr-result.kr-err, .kr-result.kr-wait { display: block; }
.kr-result.kr-ok   { background: rgba(52,211,153,.1);  border-color: rgba(52,211,153,.35);  color: var(--accent-green); }
.kr-result.kr-err  { background: rgba(244,63,94,.1);   border-color: rgba(244,63,94,.35);   color: var(--accent-red); }
.kr-result.kr-wait { background: rgba(var(--accent-rgb),.08); border-color: var(--border-glow); color: var(--text-muted); }
.kr-note { margin-top: .4rem; font-family: var(--font-mono); font-size: .76rem; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .kr-arrow { transition: none; }
  .kr-body .kr-inner { animation: none; }
}

/* Key Reset yetkilendirme listesi */
.kr-roles { display: flex; flex-direction: column; gap: .5rem; }
.kr-roles .owner-toggle { padding: .6rem .85rem; }
.kr-roles input:disabled + span b { color: var(--text-muted); }

/* ── Footer ── */
.site-footer { margin-top:4rem; padding:2.5rem 1.5rem 2rem; border-top:1px solid var(--border-dim);
  background:linear-gradient(180deg,transparent,rgba(var(--accent-rgb),.04)); text-align:center; }
.footer-brand { font-family:var(--font-head); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; margin-bottom:1.1rem;
  background:linear-gradient(120deg,#fff,var(--accent-cyan),var(--accent-pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.footer-links { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.3rem; }
.footer-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem; border-radius:100px;
  font-size:.86rem; font-weight:600; text-decoration:none; color:var(--text-bright);
  border:1px solid var(--border-dim); background:rgba(255,255,255,.04); transition:var(--transition); }
.footer-btn:hover { transform:translateY(-2px); }
.fb-wa:hover { border-color:#25d366; box-shadow:0 6px 20px rgba(37,211,102,.25); color:#25d366; }
.fb-tg:hover { border-color:#29b6f6; box-shadow:0 6px 20px rgba(41,182,246,.25); color:#29b6f6; }
.fb-dc:hover { border-color:#5865f2; box-shadow:0 6px 20px rgba(88,101,242,.25); color:#5865f2; }
.footer-copy { font-size:.74rem; color:var(--text-dim); }

/* ── Ödeme yöntemi seçimi ── */
.pay-methods { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem; }
.pay-m { display:flex; flex-direction:column; gap:.15rem; text-align:left; cursor:pointer;
  padding:.7rem .85rem; border-radius:var(--radius-md); border:1px solid var(--border-dim);
  background:rgba(0,0,0,.28); color:var(--text-primary); transition:var(--transition); font-family:var(--font-body); }
.pay-m:hover { border-color:var(--border-glow); }
.pay-m.sec { border-color:rgba(var(--accent-rgb),.6); background:rgba(var(--accent-rgb),.12); box-shadow:0 0 16px rgba(var(--accent-rgb),.18); }
.pay-m b { font-size:.84rem; color:var(--text-bright); font-weight:600; }
.pay-m small { font-size:.68rem; color:var(--text-muted); }
.buy-topup { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:.6rem;
  font-size:.82rem; color:var(--accent-red); }

/* Key Reset kullanıcı seçimi */
.kru-results { margin-top:.5rem; display:flex; flex-direction:column; gap:.3rem; max-height:180px; overflow-y:auto; }
.kru-hit { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; cursor:pointer;
  padding:.5rem .7rem; border-radius:var(--radius-md); border:1px solid var(--border-dim);
  background:rgba(0,0,0,.28); color:var(--text-primary); transition:var(--transition); font-family:var(--font-body); }
.kru-hit:hover { border-color:var(--border-glow); background:rgba(var(--accent-rgb),.1); }
.kru-hit span { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.kru-hit b { font-size:.84rem; color:var(--text-bright); }
.kru-hit small { font-size:.68rem; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; }
.kru-list { display:flex; flex-direction:column; gap:.4rem; max-height:240px; overflow-y:auto; margin-top:.4rem; }
.kru-row { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:var(--radius-md);
  border:1px solid var(--border-dim); background:rgba(255,255,255,.03); }
.kru-info { display:flex; flex-direction:column; gap:.1rem; flex:1; min-width:0; }
.kru-info b { font-size:.85rem; color:var(--text-bright); }
.kru-info small { font-size:.68rem; color:var(--text-muted); }
.kru-empty { padding:.9rem; text-align:center; font-size:.8rem; color:var(--text-dim);
  border:1px dashed var(--border-dim); border-radius:var(--radius-md); }

/* ═══════════════════════════════════════════════════════════
   MOBİL DÜZELTMELERİ
   Sorun: grid/flex çocukları varsayılan min-width:auto ile
   gelir, içindeki geniş tablo tüm düzeni şişirir ve sayfa
   yatay kayar. Aşağısı bunu ve diğer mobil hatalarını çözer.
═══════════════════════════════════════════════════════════ */

/* 1) Yatay taşmanın kökü — daralabilmeyi mümkün kıl */
.admin-grid > *,
.admin-content,
.admin-sidebar,
.page,
.container { min-width: 0; }

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* 2) Dekoratif parıltı taşırmasın */
.hero-glow { max-width: 100%; overflow: hidden; pointer-events: none; }

/* 3) Bildirimler ekranı aşmasın */
#toast-container { max-width: calc(100vw - 1.5rem); }
.toast { max-width: 100%; box-sizing: border-box; word-break: break-word; }

/* 4) Görsel ve gömülü içerik asla taşmasın */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

@media (max-width: 900px) {
  /* Admin tabloları kendi içinde kaysın, sayfayı kaydırmasın */
  .admin-content { width: 100%; }
  .data-table { min-width: 640px; }          /* okunabilir kalsın, wrap kaydırır */
  .table-wrap { border-radius: var(--radius-md); }
}

@media (max-width: 600px) {
  /* Dokunma hedefleri — parmakla basılabilir olsun */
  .btn { min-height: 40px; padding-inline: 1rem; }
  .btn-sm { min-height: 34px; font-size: .78rem; }
  .admin-nav-item { min-height: 36px; }
  .cur-btn { min-height: 32px; }

  /* iOS'ta input'a basınca sayfa zoom yapmasın (16px altı zoom tetikler) */
  .form-input, .form-select, .form-textarea, input, select, textarea { font-size: 16px; }

  /* Modallar ekrana otursun */
  .modal { width: calc(100vw - 1.5rem); max-width: calc(100vw - 1.5rem); max-height: 88vh; }
  .modal-body { max-height: 62vh; overflow-y: auto; }

  /* Uzun metinler kutuyu patlatmasın */
  .product-name, .product-desc, .kru-hit small, .owner-sys-row b,
  .meta-v, .kr-note { overflow-wrap: anywhere; }

  /* Ürün ızgarası: 2 sütun dar ekranda sıkışıyordu */
  .product-grid { gap: .6rem; }
  .product-card { padding: .7rem; }

  /* Owner paneli sayaçları */
  .owner-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
  .owner-sys   { grid-template-columns: 1fr; }
  .owner-fields{ grid-template-columns: 1fr; }
  .owner-toggle{ flex: 1 1 100%; }

  /* Footer butonları alt alta binmesin */
  .footer-links { gap: .45rem; }
  .footer-btn { padding: .55rem .9rem; font-size: .8rem; }

  /* Key Reset satırı */
  .kr-row { flex-direction: column; align-items: stretch; }
  .kr-row .btn { width: 100%; }

  /* Ödeme yöntemi kutuları */
  .pay-methods { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .owner-stats { grid-template-columns: 1fr; }
  /* Kare görselle tek sütun çok büyük duruyor — 2 sütun kalsın. */
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .nav-logo { font-size: 1.1rem; }
}

/* Rozetler mobilde satır kırıp daireye dönüşmesin */
.badge {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1.2;
}

@media (max-width: 600px) {
  /* Tablo hücreleri gereksiz yer kaplamasın */
  .data-table th, .data-table td { padding: .55rem .6rem; vertical-align: middle; }
  .data-table td .avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; }
  .badge { font-size: .62rem; padding: .2rem .5rem; }

  /* Admin sekme çubuğu tek satırda yatay kaysın, sayfayı uzatmasın */
  .admin-sidebar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-sidebar::-webkit-scrollbar { display: none; }
  .admin-nav-item { flex: 0 0 auto; white-space: nowrap; }

  /* Navbar sıkışıklığı — bakiye rozetini küçült */
  .nav-balance { font-size: .7rem; padding: .25rem .5rem; }
  .nav-user .badge { display: none; }   /* rol rozeti hamburger menüde zaten var */
  .nav-inner { gap: .5rem; }
}

@media (max-width: 900px) {
  /* Sütunlar sıkışıp satırı dikey şişirmesin — tablo zaten yatay kayıyor */
  .data-table { min-width: 860px; }
  /* İşlem butonları tek satırda kalsın */
  .data-table td:last-child > div { flex-wrap: nowrap !important; }
  .data-table td:last-child { min-width: 300px; }
  .data-table td { white-space: nowrap; }
  /* Kullanıcı adı/e-posta sütunu sarılabilir kalsın */
  .data-table td:first-child { white-space: normal; }
}

@media (max-width: 900px) {
  /* Satırlar boş yere esneyip aralarında boşluk bırakmasın */
  .admin-grid { align-content: start; align-items: start; }
}

/* ═══════════════════════════════════════════════════════════
   MOBİL MODAL — GÜVENLİ KONUMLANDIRMA
   Sorun: alt-sheet animasyonu ekranın tamamen dışından
   (translateY(100%)) başlıyordu. Animasyon herhangi bir
   sebeple ilerlemezse pencere ekran altında kalıp
   görünmez oluyordu — giriş yapılamıyordu.
   Çözüm: son konum animasyona bağlı olmasın; hareket
   mesafesi kısa olsun ki takılsa bile pencere görünür kalsın.
═══════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
    overflow-y: auto;
  }
  .modal {
    animation: mobilAc .28s cubic-bezier(.2,.7,.3,1) both !important;
    transform: none;
    margin-top: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  /* Hareket sadece 22px — takılsa bile pencere ekranda kalır */
  @keyframes mobilAc {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Animasyonu kapalı olanlarda da dogru konum */
  @media (prefers-reduced-motion: reduce) {
    .modal { animation: none !important; transform: none !important; opacity: 1 !important; }
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBİL NAVBAR — HAMBURGER HER ZAMAN ERİŞİLEBİLİR
   Sorun: borç rozeti + bakiye + kullanıcı + çıkış butonu
   yan yana sığmayınca hamburger ekranın dışına itiliyordu,
   menü açılamıyor, panellere ulaşılamıyordu.
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-inner {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .nav-logo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* Orta blok daralabilsin, taşarsa kırpılsın */
  .nav-right {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    justify-content: flex-end;
    gap: .4rem;
  }

  /* Hamburger her koşulda görünür ve tıklanabilir kalsın */
  .nav-hamburger {
    flex: 0 0 auto !important;
    display: flex !important;
    margin-left: auto;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
  }

  /* Çıkış butonu 0px'e sıkışıyordu — menüde zaten var, gizle */
  .nav-right > .btn { display: none; }
  .nav-user span { display: none; }        /* kullanıcı adı metni */
  .nav-user { padding: 0; background: none; border: none; }
}

@media (max-width: 480px) {
  /* Dar ekranda borç rozeti navbarı taşırıyordu — profilde ve
     menüde görünüyor, buradan kaldır */
  .nav-right .nav-balance:first-child:not(:only-of-type) { display: none; }
  .nav-balance { font-size: .68rem; padding: .22rem .45rem; max-width: 90px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-logo { font-size: 1.05rem; }
}

@media (max-width: 600px) {
  /* Menüdeki para birimi satırı sağdan taşıyordu */
  .mob-currency-row { flex-wrap: wrap; gap: .5rem; }
  .mob-currency-row .cur-rate-tag { flex: 1 1 100%; min-width: 0; text-align: center; }
  .nav-mobile-drawer { overflow-x: hidden; }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════ */
.dash-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: .8rem; margin-bottom: 1.5rem;
}
.dash-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .15rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--border-dim); border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem; transition: var(--transition);
}
.dash-card::after {
  content:''; position:absolute; inset:0 auto 0 0; width:3px;
  background: linear-gradient(180deg, var(--accent-purple), var(--accent-cyan));
}
.dash-card.yesil::after  { background: linear-gradient(180deg, var(--accent-green), #6ee7b7); }
.dash-card.mavi::after   { background: linear-gradient(180deg, #38bdf8, var(--accent-cyan)); }
.dash-card.kirmizi::after{ background: linear-gradient(180deg, var(--accent-red), #fb7185); }
.dash-card:hover { border-color: var(--border-glow); transform: translateY(-2px); }
.dash-card-ik { font-size: 1.15rem; line-height: 1; }
.dash-card-dg { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: var(--text-bright); }
.dash-card-et { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.dash-card-alt{ font-size: .68rem; color: var(--text-dim); margin-top: .1rem; }

.dash-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.dash-tab {
  font-family: var(--font-body); font-size: .84rem; font-weight: 600;
  padding: .55rem 1.1rem; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.035); color: var(--text-muted);
  border: 1px solid var(--border-dim); transition: var(--transition);
}
.dash-tab:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.dash-tab.active {
  background: rgba(var(--accent-rgb),.15); color: var(--accent-cyan);
  border-color: rgba(var(--accent-rgb),.35);
}
.dash-panel { display: none; }
.dash-panel.active { display: block; }

/* Key satırı */
.dash-key {
  display: flex; align-items: center; gap: 1rem; margin-bottom: .7rem;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: .85rem 1rem;
  transition: var(--transition);
}
.dash-key:hover { border-color: rgba(var(--accent-rgb),.3); }
.dash-key-img {
  width: 64px; height: 64px; flex-shrink: 0; border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg-deep);
  display: flex; align-items: center; justify-content: center;
}
.dash-key-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.dash-key-ph { font-size: 1.6rem; }
.dash-key-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.dash-key-ad { font-weight: 600; color: var(--text-bright); font-size: .95rem; }
.dash-key-meta { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
                 font-size: .72rem; color: var(--text-muted); }
.dash-key-kutu {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: rgba(0,0,0,.32); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: .4rem .6rem;
}
.dash-key-kutu code {
  font-family: var(--font-mono); font-size: .8rem; color: var(--accent-cyan);
  letter-spacing: .04em; word-break: break-all; flex: 1; min-width: 0;
}
.dash-key-yok { color: var(--text-dim); font-size: .76rem; }
.btn.kopyalandi { color: var(--accent-green) !important; border-color: rgba(52,211,153,.4) !important; }
.dash-key-fiyat {
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem;
  color: var(--accent-green); flex-shrink: 0;
}

/* Ürün kartı */
.dash-urun-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: .8rem; }
.dash-urun {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border: 1px solid var(--border-dim); border-radius: var(--radius-lg);
  padding: .9rem; display: flex; flex-direction: column; gap: .45rem;
}
.dash-urun-img { width: 100%; height: 120px; border-radius: var(--radius-md); overflow: hidden;
                 background: var(--bg-deep); display: flex; align-items: center; justify-content: center; }
.dash-urun-img img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.dash-urun-ad { font-weight: 600; color: var(--text-bright); font-size: .88rem; line-height: 1.35; }
.dash-urun-ack { font-size: .74rem; color: var(--text-muted); line-height: 1.45;
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-urun-alt { display: flex; justify-content: space-between; align-items: center;
                 border-top: 1px solid var(--border-dim); padding-top: .5rem; margin-top: auto; }
.dash-urun-adet { font-size: .78rem; color: var(--text-primary); font-weight: 600; }
.dash-urun-tut { font-family: var(--font-mono); font-weight: 700; color: var(--accent-green); }
.dash-urun-son { font-size: .68rem; color: var(--text-dim); }

.dash-bos {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: 3rem 1.5rem; text-align: center;
  border: 1px dashed var(--border-dim); border-radius: var(--radius-lg);
}
.dash-bos span { font-size: 2.5rem; }
.dash-bos b { color: var(--text-bright); font-size: 1rem; }
.dash-bos p { font-size: .84rem; color: var(--text-muted); max-width: 320px; }

@media (max-width: 600px) {
  .dash-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; }
  .dash-card { padding: .8rem .85rem; }
  .dash-card-dg { font-size: 1.15rem; }
  .dash-key { flex-wrap: wrap; gap: .7rem; padding: .75rem; }
  .dash-key-img { width: 48px; height: 48px; }
  .dash-key-fiyat { width: 100%; text-align: right; }
  .dash-urun-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dash-tab { font-size: .76rem; padding: .45rem .8rem; }
}
@media (max-width: 340px) {
  .dash-stats { grid-template-columns: 1fr; }
  .dash-urun-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   ÜRÜN DETAY SAYFASI
═══════════════════════════════════════════════════════════ */
.urun-detay { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.ud-gorsel {
  grid-row: span 2; background: var(--bg-deep); border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg); min-height: 300px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ud-gorsel img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; padding: 12px; }
.ud-ph { font-size: 4rem; }
.ud-ust { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ud-ad { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800;
         color: var(--text-bright); line-height: 1.2; margin-bottom: .6rem; }
.ud-ack { font-size: .9rem; color: var(--text-primary); line-height: 1.65; margin-bottom: 1rem; }
.ud-fiyat { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
            padding-top: 1rem; border-top: 1px solid var(--border-dim); }
.ud-fiyat-dg {
  font-family: var(--font-mono); font-size: 2.1rem; font-weight: 700;
  background: linear-gradient(120deg, var(--accent-green), #6ee7b7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.ud-odeme { grid-column: 2; display: flex; flex-direction: column; gap: .5rem; }
.ud-baslik { font-family: var(--font-head); font-size: .78rem; font-weight: 700;
             text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: .2rem; }
.ud-yontem {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; cursor: pointer;
  padding: .85rem 1rem; border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  border: 1px solid var(--border-dim); color: var(--text-primary);
  font-family: var(--font-body); transition: var(--transition);
}
.ud-yontem:hover { border-color: rgba(var(--accent-rgb),.4); background: rgba(var(--accent-rgb),.07); transform: translateX(2px); }
.ud-yontem.ud-hizli { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.08); }
.ud-yontem.ud-hizli:hover { border-color: rgba(52,211,153,.6); background: rgba(52,211,153,.13); }
.ud-y-ik { font-size: 1.3rem; flex-shrink: 0; }
.ud-y-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.ud-y-orta b { color: var(--text-bright); font-size: .92rem; font-weight: 600; }
.ud-y-orta small { font-size: .74rem; color: var(--text-muted); }
.ud-y-ok { color: var(--text-dim); flex-shrink: 0; transition: transform .25s ease; }
.ud-yontem.acik .ud-ok-don { transform: rotate(180deg); color: var(--accent-cyan); }

.ud-kripto { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin: -.15rem 0 .35rem; }
.ud-kripto[hidden] { display: none; }
.ud-kripto-sec {
  display: flex; flex-direction: column; gap: .1rem; cursor: pointer; text-align: center;
  padding: .7rem .5rem; border-radius: var(--radius-md);
  background: rgba(0,0,0,.3); border: 1px solid var(--border-dim);
  color: var(--text-primary); font-family: var(--font-body); transition: var(--transition);
}
.ud-kripto-sec:hover { border-color: rgba(var(--accent-rgb),.5); background: rgba(var(--accent-rgb),.12); }
.ud-kripto-sec b { color: var(--text-bright); font-size: .86rem; }
.ud-kripto-sec small { font-size: .64rem; color: var(--text-muted); }

/* Sipariş özeti + onay */
.siparis-ozet, .iban-kutu {
  background: rgba(0,0,0,.28); border: 1px solid var(--border-dim);
  border-radius: var(--radius-md); padding: .9rem 1rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.so-satir { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.so-satir span { color: var(--text-muted); }
.so-satir b { color: var(--text-bright); text-align: right; }
.so-tutar { font-family: var(--font-mono); color: var(--accent-green) !important; font-size: 1.05rem; }

.onay-kutu { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.onay-link {
  display: inline-block; cursor: pointer; font-size: .82rem; font-weight: 600;
  color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 3px;
}
.onay-link:hover { color: var(--accent-pink); }
.onay-tik { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
            font-size: .78rem; color: var(--text-primary); line-height: 1.5; }
.onay-tik input { width: 18px; height: 18px; accent-color: var(--accent-cyan); flex-shrink: 0; margin-top: .1rem; cursor: pointer; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

/* IBAN sayfası */
.iban-hizli { border: 1px solid rgba(var(--accent-rgb),.28); border-radius: var(--radius-lg);
              padding: 1.2rem; background: rgba(var(--accent-rgb),.06); }
.iban-hizli-et { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--accent-cyan); margin-bottom: .7rem; }
.iban-hizli-btn { display: flex; gap: .6rem; flex-wrap: wrap; }
.iban-not { font-size: .78rem; color: var(--text-muted); margin-top: .7rem; line-height: 1.55; }
.iban-ayirac { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0; color: var(--text-dim); font-size: .78rem; }
.iban-ayirac::before, .iban-ayirac::after { content: ''; flex: 1; height: 1px; background: var(--border-dim); }

/* Koşullar sayfası */
.kosul-kutu { background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
              border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; }
.kosul-kutu h3 { font-family: var(--font-head); font-size: 1rem; color: var(--accent-cyan);
                 margin: 1.4rem 0 .5rem; }
.kosul-kutu h3:first-child { margin-top: 0; }
.kosul-kutu p { font-size: .88rem; color: var(--text-primary); line-height: 1.7; }
.kosul-kutu b { color: var(--text-bright); }

@media (max-width: 780px) {
  .urun-detay { grid-template-columns: 1fr; }
  .ud-gorsel { grid-row: auto; min-height: 220px; }
  .ud-odeme { grid-column: 1; }
  .ud-ad { font-size: 1.35rem; }
  .ud-fiyat-dg { font-size: 1.7rem; }
  .kosul-kutu { padding: 1.1rem 1.15rem; }
}
@media (max-width: 420px) {
  .ud-kripto { grid-template-columns: 1fr; }
  .iban-hizli-btn .footer-btn { flex: 1 1 100%; justify-content: center; }
}

/* ══ ÖDEME EKRANI ═══════════════════════ */
.odeme-kutu{display:flex;flex-direction:column;gap:1rem}
.od-ust{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.1rem}
.od-sipno-et,.od-et{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:700;margin-bottom:.5rem}
.od-sipno{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.od-sipno code{font-family:var(--font-mono);font-size:1.05rem;font-weight:700;color:var(--accent);letter-spacing:.04em;
  background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);border-radius:8px;padding:.35rem .7rem}
.od-urun{margin-top:.7rem;font-weight:600;color:var(--text-bright)}

.od-miktar-kutu{background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(139,92,246,.04));
  border:1px solid rgba(139,92,246,.35);border-radius:14px;padding:1.3rem;text-align:center}
.od-miktar{display:flex;align-items:baseline;justify-content:center;gap:.45rem;margin:.2rem 0 .9rem}
.od-miktar b{font-family:var(--font-mono);font-size:2.1rem;font-weight:800;color:var(--text-bright);line-height:1.1;word-break:break-all}
.od-coin{font-size:1rem;font-weight:700;color:var(--accent)}
.od-kur{margin-top:.8rem;font-size:.78rem;color:var(--text-muted)}

.od-qr-kutu{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.1rem;text-align:center}
.od-qr{width:min(230px,70vw);height:auto;border-radius:12px;background:#fff;padding:.6rem;margin:.3rem auto .8rem;display:block}
.od-qr-not{font-size:.82rem;color:var(--text-muted);line-height:1.55;margin-bottom:.9rem}

.od-adres-kutu{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.1rem}
.od-adres{background:var(--bg-deep);border:1px solid var(--border);border-radius:9px;padding:.7rem;margin-bottom:.7rem}
.od-adres code{font-family:var(--font-mono);font-size:.85rem;color:var(--text-bright);word-break:break-all;white-space:pre-wrap}

.od-uyari{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:1rem}
.od-uyari b{display:block;color:var(--accent-yellow,#f59e0b);margin-bottom:.55rem;font-size:.9rem}
.od-uyari ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.4rem}
.od-uyari li{font-size:.84rem;color:var(--text-muted);line-height:1.5}
.od-uyari li b{display:inline;color:var(--text-bright);margin:0;font-size:inherit}

.bqr-onizleme{display:flex;align-items:center;gap:.8rem}
.bqr-onizleme img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:8px;padding:4px}

@media(max-width:480px){
  .od-miktar b{font-size:1.65rem}
  .od-sipno code{font-size:.92rem}
}

/* Binance kutusundaki fiyat rozeti */
.od-qr-fiyat{display:flex;align-items:baseline;justify-content:center;gap:.5rem;margin:.2rem 0 .9rem;
  background:rgba(240,185,11,.1);border:1px solid rgba(240,185,11,.35);border-radius:10px;padding:.55rem .8rem}
.od-qr-fiyat span{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700}
.od-qr-fiyat b{font-family:var(--font-mono);font-size:1.15rem;font-weight:800;color:#f0b90b;word-break:break-all}
.od-binance-btn{background:#f0b90b;border-color:#f0b90b;color:#1a1a1a;font-weight:800}
.od-binance-btn:hover{background:#d9a70a;border-color:#d9a70a;color:#1a1a1a}

/* Ürün detayında stok yok uyarısı */
.ud-stok-yok{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:1.4rem;text-align:center}
.ud-stok-yok b{display:block;font-size:1.05rem;color:var(--text-bright);margin-bottom:.45rem}
.ud-stok-yok p{font-size:.86rem;color:var(--text-muted);margin:0;line-height:1.55}

/* Shopier — sipariş no uyarısı */
.od-shopier{display:flex;flex-direction:column;gap:.9rem}
.od-kirmizi{background:rgba(239,68,68,.12);border:2px solid rgba(239,68,68,.55);border-radius:12px;padding:1.1rem}
.od-kirmizi b{display:block;color:#ef4444;font-size:.95rem;margin-bottom:.6rem;letter-spacing:.02em}
.od-kirmizi p{font-size:.87rem;color:var(--text-bright);line-height:1.6;margin:0 0 .9rem}
.od-kirmizi p b{display:inline;color:#ef4444;margin:0;font-size:inherit}
.od-kirmizi-no{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:rgba(0,0,0,.35);border-radius:9px;padding:.6rem .75rem}
.od-kirmizi-no code{font-family:var(--font-mono);font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:.08em}
.od-kirmizi-no .btn{background:#ef4444;border-color:#ef4444;color:#fff;font-weight:700}
.od-shopier-btn{background:#7c3aed;border-color:#7c3aed;color:#fff;font-weight:800}

/* Toplu stok */
.ts-arac{display:grid;grid-template-columns:1fr auto;gap:.6rem;margin-bottom:.8rem}
.ts-ust{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .8rem;
  background:var(--bg-deep);border:1px solid var(--border);border-radius:9px;margin-bottom:.6rem}
.ts-hepsi{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.88rem;color:var(--text-bright)}
.ts-sayac{font-size:.8rem;color:var(--accent);font-weight:700}
.ts-liste{max-height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg-deep)}
.ts-satir{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:.7rem;
  padding:.6rem .8rem;border-bottom:1px solid var(--border);cursor:pointer;min-width:0}
.ts-satir:last-child{border-bottom:none}
.ts-satir:hover{background:rgba(139,92,246,.07)}
.ts-satir.sec{background:rgba(139,92,246,.14)}
.ts-ad{font-size:.85rem;color:var(--text-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ts-kat-et{font-size:.72rem;color:var(--text-muted);white-space:nowrap}
.ts-stok{font-family:var(--font-mono);font-size:.75rem;color:var(--accent-green,#22c55e);white-space:nowrap}
.ts-bos{padding:2rem;text-align:center;color:var(--text-muted);font-size:.85rem}
@media(max-width:520px){
  .ts-arac{grid-template-columns:1fr}
  .ts-satir{grid-template-columns:auto 1fr auto}
  .ts-kat-et{display:none}
}

/* ══ GÖRSEL EFEKTLER ════════════════════ */
/* Logo — üzerinden geçen ışık parıltısı. Bitiş durumuna bağlı değil,
   animasyon kapalıyken de logo normal görünür. */
.nav-logo{
  background:linear-gradient(100deg,
    var(--accent,#8b5cf6) 0%, #d8b4fe 25%, #ffffff 40%,
    #d8b4fe 55%, var(--accent,#8b5cf6) 80%, var(--accent,#8b5cf6) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--accent,#8b5cf6);
  animation:wh-parilti 6s linear infinite;
}
@keyframes wh-parilti{ from{background-position:120% 0} to{background-position:-120% 0} }

/* Ana sayfa arka planı — yavaşça dolaşan renk bulutları */
#page-home{position:relative;overflow:hidden}
#page-home::before,#page-home::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(90px);opacity:.30;
}
#page-home::before{
  width:520px;height:520px;top:-160px;left:-120px;
  background:radial-gradient(circle,#8b5cf6 0%,transparent 70%);
  animation:wh-suzul-a 22s ease-in-out infinite alternate;
}
#page-home::after{
  width:460px;height:460px;top:120px;right:-140px;
  background:radial-gradient(circle,#22d3ee 0%,transparent 70%);
  animation:wh-suzul-b 27s ease-in-out infinite alternate;
}
#page-home > *{position:relative;z-index:1}
@keyframes wh-suzul-a{ from{transform:translate(0,0) scale(1)} to{transform:translate(160px,120px) scale(1.25)} }
@keyframes wh-suzul-b{ from{transform:translate(0,0) scale(1.1)} to{transform:translate(-150px,90px) scale(.9)} }

/* Ürün kartı — üzerine gelince hafif kalkma.
   Gölge karta değil, alttaki bilgi kutusuna verilir; kart saydam. */
.product-card{transition:transform .25s ease}
.product-card:hover{transform:translateY(-5px);box-shadow:none}
.product-card:hover .product-body{box-shadow:0 14px 34px rgba(139,92,246,.22)}

/* Hareket azaltma tercihi olan kullanıcıda animasyonlar kapanır */
@media (prefers-reduced-motion:reduce){
  .nav-logo,#page-home::before,#page-home::after{animation:none}
  .product-card{transition:none}
}

/* ═══════════════════════════════════════════════════════════
   ROZETLER — owner rozeti özel, ışıltılı
═══════════════════════════════════════════════════════════ */
.wb-wrap { display:inline-flex; gap:.3rem; flex-wrap:wrap; vertical-align:middle; }
.wb {
  display:inline-flex; align-items:center; gap:.28em;
  font-family:var(--font-head); font-size:.62rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  padding:.18em .62em; border-radius:100px; white-space:nowrap;
  line-height:1.5; position:relative; overflow:hidden;
}
.wb .wb-ico { font-style:normal; font-size:.92em; line-height:1; }

/* Owner — altın degrade + üzerinden geçen ışık */
.wb-owner {
  color:#2a1a00;
  background:linear-gradient(110deg,#fde68a 0%,#f59e0b 42%,#fbbf24 58%,#fde68a 100%);
  box-shadow:0 0 0 1px rgba(253,230,138,.55), 0 2px 14px rgba(245,158,11,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.wb-owner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);
  transform:translateX(-120%);
  animation:wb-shine 4.5s ease-in-out infinite;
}
@keyframes wb-shine { 0%,72% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }

.wb-gold    { color:#3a2600; background:linear-gradient(135deg,#fcd34d,#f59e0b); box-shadow:0 0 0 1px rgba(245,158,11,.4); }
.wb-neon    { color:#032b35; background:linear-gradient(135deg,#67e8f9,#06b6d4); box-shadow:0 0 0 1px rgba(6,182,212,.45), 0 0 12px rgba(6,182,212,.3); }
.wb-ruby    { color:#fff0f0; background:linear-gradient(135deg,#f87171,#dc2626); box-shadow:0 0 0 1px rgba(239,68,68,.45); }
.wb-emerald { color:#042b1d; background:linear-gradient(135deg,#6ee7b7,#059669); box-shadow:0 0 0 1px rgba(16,185,129,.45); }
.wb-glass   { color:var(--text-primary); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }

@media (prefers-reduced-motion:reduce) { .wb-owner::after { animation:none; opacity:0; } }

/* ═══════════════════════════════════════════════════════════
   SOHBET
═══════════════════════════════════════════════════════════ */
.chat-shell { display:grid; grid-template-columns:255px 1fr; gap:1rem; align-items:start; }

.chat-side {
  background:var(--bg-card); border:1px solid var(--border-dim);
  border-radius:var(--radius-xl); padding:.8rem; position:sticky; top:84px;
}
.chat-rooms { display:flex; flex-direction:column; gap:.35rem; }
.chat-room-btn {
  display:flex; align-items:center; gap:.55rem; width:100%;
  padding:.6rem .7rem; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid transparent; color:var(--text-primary);
  font-family:var(--font-body); font-size:.88rem; font-weight:600; text-align:left;
  transition:var(--transition);
}
.chat-room-btn:hover  { background:var(--bg-hover); }
.chat-room-btn.active { background:rgba(var(--accent-rgb),.12); border-color:var(--border-glow); color:var(--text-bright); }
.cr-ico { font-size:1rem; }

.chat-dm-head {
  display:flex; align-items:center; justify-content:space-between;
  margin:1.1rem 0 .5rem; padding-top:.8rem; border-top:1px solid var(--border-dim);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); font-weight:700;
}
.chat-dm-list { display:flex; flex-direction:column; gap:.25rem; max-height:320px; overflow-y:auto; }
.chat-dm-item {
  display:flex; align-items:center; gap:.5rem; width:100%; padding:.45rem .5rem;
  border-radius:9px; cursor:pointer; background:transparent; border:1px solid transparent;
  color:var(--text-primary); text-align:left; transition:var(--transition);
}
.chat-dm-item:hover  { background:var(--bg-hover); }
.chat-dm-item.active { background:rgba(var(--accent-rgb),.12); border-color:var(--border-glow); }
.cdi-main  { display:flex; flex-direction:column; min-width:0; flex:1; }
.cdi-name  { font-size:.82rem; font-weight:600; color:var(--text-bright); display:flex; align-items:center; gap:.3rem; }
.cdi-last  { font-size:.72rem; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cdi-unread{ background:var(--accent-red); color:#fff; font-size:.65rem; font-weight:700;
             min-width:18px; height:18px; border-radius:100px; display:flex; align-items:center; justify-content:center; padding:0 .3rem; }

.chat-main {
  background:var(--bg-card); border:1px solid var(--border-dim);
  border-radius:var(--radius-xl); display:flex; flex-direction:column;
  height:min(72vh,680px); overflow:hidden;
}
.chat-head { padding:.85rem 1.1rem; border-bottom:1px solid var(--border-dim); position:relative; }
.chat-head-title { font-family:var(--font-head); font-size:1.08rem; font-weight:700; color:var(--text-bright); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
.chat-head-sub   { font-size:.74rem; color:var(--text-muted); margin-top:.1rem; }
.chat-back { position:absolute; right:1rem; top:.95rem; }

.chat-log { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.85rem; scroll-behavior:smooth; }
.chat-empty    { text-align:center; padding:2.5rem 1rem; color:var(--text-muted); font-size:.88rem; }
.chat-empty-sm { text-align:center; padding:.9rem; color:var(--text-muted); font-size:.78rem; }

.chat-msg { display:flex; gap:.65rem; align-items:flex-start; }
.cm-av   { flex-shrink:0; }
.cm-body { min-width:0; flex:1; }
.cm-head { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.22rem; }
.cm-name { font-size:.85rem; font-weight:700; color:var(--text-bright); }
.cm-time { font-size:.68rem; color:var(--text-dim); font-family:var(--font-mono); }
.cm-text { font-size:.88rem; color:var(--text-primary); line-height:1.55; word-break:break-word; }

.cm-ops { display:flex; gap:.15rem; margin-left:auto; opacity:0; transition:var(--transition); }
.chat-msg:hover .cm-ops { opacity:1; }
.cm-ops button {
  background:transparent; border:none; cursor:pointer; color:var(--text-muted);
  font-size:.78rem; padding:.1rem .3rem; border-radius:5px; line-height:1;
}
.cm-ops button:hover { background:var(--bg-hover); color:var(--text-bright); }

/* Silinmiş mesaj — kırmızı */
.cm-del-text { color:var(--accent-red); font-style:italic; font-size:.84rem; }
.cm-deleted .cm-name { opacity:.6; }

/* Düzenlendi etiketi — sarı */
.cm-edit-tag { font-size:.68rem; color:var(--accent-gold); margin-top:.18rem; font-weight:600; }

/* Orijinal metin kutusu — yalnızca admin/owner görür */
.cm-original {
  margin-top:.35rem; padding:.45rem .6rem; border-radius:8px;
  font-size:.8rem; line-height:1.45; display:flex; gap:.5rem; align-items:flex-start;
  border-left:3px solid;
}
.cm-orig-tag {
  font-family:var(--font-head); font-size:.58rem; font-weight:800; letter-spacing:.1em;
  padding:.1rem .4rem; border-radius:4px; flex-shrink:0; margin-top:.1rem;
}
.cm-original-del  { background:rgba(239,68,68,.09);  border-color:var(--accent-red);  color:#fca5a5; }
.cm-original-del  .cm-orig-tag { background:rgba(239,68,68,.25); color:#fecaca; }
.cm-original-edit { background:rgba(245,158,11,.09); border-color:var(--accent-gold); color:#fcd34d; }
.cm-original-edit .cm-orig-tag { background:rgba(245,158,11,.25); color:#fde68a; }

.chat-reply-bar {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.5rem 1.1rem; background:rgba(var(--accent-rgb),.07);
  border-top:1px solid var(--border-dim); font-size:.78rem; color:var(--text-primary);
}
.chat-reply-bar button { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:.9rem; }

.chat-form { display:flex; gap:.6rem; padding:.8rem 1.1rem; border-top:1px solid var(--border-dim); align-items:flex-end; }
.chat-input {
  flex:1; resize:none; background:var(--bg-deep); color:var(--text-bright);
  border:1px solid var(--border-dim); border-radius:12px; padding:.65rem .8rem;
  font-family:var(--font-body); font-size:.88rem; line-height:1.4; max-height:120px;
}
.chat-input:focus { outline:none; border-color:var(--border-glow); }
.chat-send { flex-shrink:0; }
.chat-note { padding:0 1.1rem .7rem; font-size:.76rem; min-height:0; }

.dm-dot {
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent-red); margin-left:.3rem; vertical-align:middle;
  animation:pulse 2s infinite;
}

/* ═══════════════════════════════════════════════════════════
   EVENTLER
═══════════════════════════════════════════════════════════ */
.ev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:1.1rem; }
.ev-card {
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--bg-card);
  border:1px solid var(--border-dim); border-radius:var(--radius-xl);
  padding:1.1rem; display:flex; flex-direction:column; gap:.7rem;
  box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.ev-card-off { opacity:.75; }
.ev-top   { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.ev-title { font-family:var(--font-head); font-size:1.12rem; font-weight:700; color:var(--text-bright); line-height:1.25; }
.ev-desc  { font-size:.82rem; color:var(--text-muted); line-height:1.5; }

.ev-live {
  font-size:.62rem; font-weight:800; letter-spacing:.1em; color:var(--accent-green);
  background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3);
  padding:.2rem .55rem; border-radius:100px; white-space:nowrap; animation:pulse 2.5s infinite;
}
.ev-badge {
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.18rem .5rem; border-radius:100px; white-space:nowrap;
  background:rgba(255,255,255,.07); color:var(--text-muted); margin-left:.35rem;
}
.ev-ended   { background:rgba(245,158,11,.15); color:var(--accent-gold); }
.ev-done    { background:rgba(16,185,129,.15); color:var(--accent-green); }
.ev-hidden  { background:rgba(107,122,148,.18); color:var(--text-muted); }
.ev-live-sm { background:rgba(16,185,129,.15); color:var(--accent-green); }

.ev-meta { display:flex; gap:.4rem; flex-wrap:wrap; }
.ev-chip {
  font-size:.7rem; color:var(--text-primary); background:var(--bg-deep);
  border:1px solid var(--border-dim); padding:.2rem .55rem; border-radius:100px; white-space:nowrap;
}
.ev-chip-time { color:var(--accent-gold); border-color:rgba(245,158,11,.25); }

.ev-prize {
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  background:linear-gradient(100deg,rgba(245,158,11,.14),rgba(124,58,237,.1));
  border:1px solid rgba(245,158,11,.25); border-radius:12px; padding:.6rem .75rem;
}
.ev-prize-label {
  font-family:var(--font-head); font-size:.6rem; font-weight:800; letter-spacing:.14em;
  color:var(--accent-gold); background:rgba(245,158,11,.18); padding:.15rem .45rem; border-radius:4px;
}
.ev-prize-text { font-size:.92rem; font-weight:700; color:var(--text-bright); }
.ev-prize-got  { font-size:.76rem; color:var(--accent-gold); font-weight:600; margin-left:auto; }

.ev-sec-title {
  font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); font-weight:700; margin-top:.2rem;
}
.ev-list { display:flex; flex-direction:column; gap:.3rem; }
.ev-row  {
  display:flex; align-items:center; gap:.5rem; padding:.35rem .5rem;
  background:var(--bg-deep); border-radius:8px; font-size:.82rem;
}
.ev-first { background:linear-gradient(100deg,rgba(245,158,11,.12),transparent); }
.ev-rank  { width:22px; text-align:center; font-weight:700; color:var(--text-muted); flex-shrink:0; }
.ev-user  { color:var(--text-bright); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ev-score { font-family:var(--font-mono); font-size:.78rem; color:var(--accent-cyan); flex-shrink:0; }
.ev-winners { border-top:1px solid var(--border-dim); padding-top:.6rem; display:flex; flex-direction:column; gap:.3rem; }

/* Owner panelindeki event kartları */
.ev-admin-card { background:var(--bg-deep); border:1px solid var(--border-dim); border-radius:12px; padding:.85rem; margin-bottom:.8rem; }
.ev-admin-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.ev-admin-ops  { display:flex; gap:.3rem; flex-wrap:wrap; }
.ev-admin-meta { font-size:.75rem; color:var(--text-muted); margin:.45rem 0 .7rem; }
.ev-admin-cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ev-win-row    { display:flex; align-items:center; justify-content:space-between; gap:.5rem;
                 padding:.35rem .5rem; background:var(--bg-card); border-radius:8px; font-size:.8rem; margin-bottom:.25rem; }

.ev-prize-box { background:var(--bg-deep); border:1px solid rgba(245,158,11,.22); border-radius:12px; padding:.9rem; }

.badge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.6rem; }
.badge-card { background:var(--bg-deep); border:1px solid var(--border-dim); border-radius:10px; padding:.7rem; display:flex; flex-direction:column; gap:.4rem; }
.badge-card-meta { font-size:.68rem; color:var(--text-muted); }
.badge-card-ops  { display:flex; gap:.3rem; margin-top:auto; }
.badge-holder-list { display:flex; flex-wrap:wrap; gap:.4rem; }
.badge-holder { font-size:.76rem; background:var(--bg-deep); border:1px solid var(--border-dim);
                padding:.25rem .55rem; border-radius:100px; color:var(--text-primary); }
.badge-holder small { color:var(--text-muted); margin-left:.3rem; }

.btn-xs { padding:.26rem .55rem !important; font-size:.7rem !important; }

@media (max-width:900px) {
  .chat-shell    { grid-template-columns:1fr; }
  .chat-side     { position:static; }
  .chat-dm-list  { max-height:160px; }
  .chat-main     { height:min(66vh,560px); }
  .ev-admin-cols { grid-template-columns:1fr; }
  .ev-grid       { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   WARE HUB — TEMA v2  "AURORA"
   Arka plandaki kareli ızgara kaldırıldı. Yerine çok yavaş süzülen
   ışık bulutları ve ince film grenli bir zemin geldi.
   Yüzeyler: gerçek cam — üstte ışık yakalayan hairline kenar.
═══════════════════════════════════════════════════════════════════ */

:root {
  /* Zemin — mavi-menekşe alt tonlu, mürekkep siyahı */
  --bg-void:  #04040a;
  --bg-deep:  #080810;
  --bg-dark:  #0b0b15;
  --bg-card:  #10101c;
  --bg-card2: #151523;
  --bg-hover: #1c1c2d;

  --accent-rgb:    167,139,250;
  --accent-cyan:   #a78bfa;
  --accent-purple: #8b5cf6;
  --accent-indigo: #6366f1;
  --accent-green:  #34d399;
  --accent-gold:   #fbbf24;
  --accent-red:    #fb7185;
  --accent-pink:   #f472b6;

  --text-bright:  #f7f7fc;
  --text-primary: #c6c6d8;
  --text-muted:   #8585a0;
  --text-dim:     #52526a;

  /* Hairline kenarlar — ışığı üstten yakalar */
  --border-dim:  rgba(255,255,255,.055);
  --border-glow: rgba(var(--accent-rgb),.30);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-glow: 0 0 34px rgba(var(--accent-rgb),.18);
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45), 0 24px 64px rgba(0,0,0,.35);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.55), 0 32px 80px rgba(var(--accent-rgb),.10);
  --transition: .24s cubic-bezier(.22,1,.36,1);

  /* Cam yüzey reçetesi */
  --glass: linear-gradient(170deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.018) 38%, rgba(255,255,255,.008) 100%);
}

/* ── IZGARA KALDIRILDI ────────────────────────────────────── */
body::before { display: none !important; content: none !important; }

/* ── ZEMİN: süzülen ışık bulutları ────────────────────────── */
body {
  background: var(--bg-void);
  font-family: var(--font-body);
  letter-spacing: .004em;
  position: relative;
}

/* Işık bulutları — sabit, çok yavaş nefes alır */
body::after {
  content: '';
  position: fixed; inset: -25%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(42% 38% at 18% 8%,  rgba(139,92,246,.20), transparent 62%),
    radial-gradient(38% 34% at 86% 14%, rgba(99,102,241,.15), transparent 62%),
    radial-gradient(46% 40% at 62% 92%, rgba(244,114,182,.10), transparent 62%),
    radial-gradient(34% 30% at 8% 78%,  rgba(52,211,153,.07), transparent 62%);
  filter: blur(26px);
  animation: wh-aurora 34s ease-in-out infinite alternate;
}
@keyframes wh-aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(1.5%,-1.5%,0) scale(1.07); }
  100% { transform: translate3d(-1.5%,1.5%,0) scale(1.03); }
}

/* İnce film greni — yüzeylere doku verir, bantlaşmayı kırar */
html::after {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* NOT: Buraya bir zamanlar
     .navbar, .page, .modal-backdrop, .toast-wrap, .mobile-menu { position: relative; z-index: 2 }
   yazılmıştı. Bu, navbar ve modalların position:fixed değerini eziyor,
   modalları tamamen bozuyordu. Zemin katmanları artık z-index:-1 ile
   içeriğin ARKASINDA durduğu için böyle bir kurala gerek yok. */
.page { position: relative; }

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
}

/* ── TİPOGRAFİ ────────────────────────────────────────────── */
body { font-size: 15px; line-height: 1.62; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1,h2,h3,.page-title,.nav-logo,.modal-title { font-family: var(--font-head); letter-spacing: -.022em; }

.page-title {
  font-weight: 700; letter-spacing: -.03em;
  background: linear-gradient(104deg, #ffffff 0%, #e7e3ff 46%, var(--accent-cyan) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-title span { -webkit-text-fill-color: var(--accent-cyan); opacity: .55; }

.nav-logo {
  font-weight: 700; letter-spacing: -.028em;
  background: linear-gradient(104deg,#fff 0%,#ddd6fe 52%,var(--accent-pink) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

::selection { background: rgba(var(--accent-rgb),.32); color: #fff; }

/* ── NAVBAR — derin cam ───────────────────────────────────── */
.navbar {
  background: rgba(8,8,16,.62);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 32px rgba(0,0,0,.4);
}
.nav-links a {
  border-radius: 100px; padding: .46rem 1rem; font-weight: 500; font-size: .9rem;
  color: var(--text-primary); position: relative;
}
.nav-links a:hover { background: rgba(255,255,255,.055); color: var(--text-bright); }
.nav-links a.active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),.10));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.30), 0 4px 16px rgba(var(--accent-rgb),.18);
}

/* ── CAM YÜZEYLER ─────────────────────────────────────────── */
.product-body, .stat-card, .feature-card, .card, .owner-card,
.admin-sidebar, .admin-content, .ticket-row, .table-wrap, .modal,
.chat-side, .chat-main, .ev-card {
  background: var(--glass), var(--bg-card);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
}
/* Üstte ışık yakalayan hairline — camın kenarı */
.product-body::after, .card::after, .owner-card::after,
.modal::after, .chat-main::after, .ev-card::after, .stat-card::after {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events: none; border-radius: 1px;
}

.card:hover, .feature-card:hover {
  border-color: rgba(var(--accent-rgb),.22);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.card, .feature-card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }

/* ── BUTONLAR ─────────────────────────────────────────────── */
.btn {
  border-radius: 100px; font-weight: 600; letter-spacing: .005em;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.btn-primary {
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 48%, #7c5cf0 100%);
  color: #0b0618; border: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 20px rgba(var(--accent-rgb),.34);
  font-weight: 700;
}
.btn-primary:hover {
  background: linear-gradient(135deg,#b9a3ff 0%,#9b72ff 48%,#8b6cff 100%);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 10px 30px rgba(var(--accent-rgb),.46);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255,255,255,.045); color: var(--text-primary);
  border: 1px solid rgba(255,255,255,.08);
}
.btn-ghost:hover { background: rgba(255,255,255,.085); color: var(--text-bright); border-color: rgba(255,255,255,.14); }

.btn-outline { border: 1px solid rgba(var(--accent-rgb),.34); color: var(--accent-cyan); background: transparent; }
.btn-outline:hover { background: rgba(var(--accent-rgb),.10); border-color: rgba(var(--accent-rgb),.5); }

.btn-danger {
  background: linear-gradient(135deg,#fb7185,#e11d48); color: #fff; border: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 6px 18px rgba(244,63,94,.32);
}

/* ── FORM ─────────────────────────────────────────────────── */
.form-input, .form-select, .form-textarea, .chat-input {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-sm);
  color: var(--text-bright);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus, .chat-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb),.45);
  background: rgba(0,0,0,.36);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.13);
}
.form-input::placeholder, .form-textarea::placeholder, .chat-input::placeholder { color: var(--text-dim); }
.form-label { font-weight: 600; font-size: .8rem; letter-spacing: .01em; color: var(--text-primary); }

/* ── ÜRÜN KARTI ───────────────────────────────────────────── */
.product-grid { gap: 1.35rem; }
.product-card { gap: .7rem; }
.product-img  { border-radius: var(--radius-lg); }
.product-body { padding: .95rem; border-radius: var(--radius-lg); }
.product-card:hover .product-body {
  border-color: rgba(var(--accent-rgb),.26);
  box-shadow: var(--shadow-lift);
}
.product-name { font-family: var(--font-head); font-weight: 600; letter-spacing: -.012em; }
.product-category {
  background: rgba(var(--accent-rgb),.11);
  border: 1px solid rgba(var(--accent-rgb),.17);
  border-radius: 100px; font-weight: 600; letter-spacing: .07em;
}
.price-main { font-family: var(--font-mono); font-weight: 700; letter-spacing: -.02em; }

/* ── TABLO ────────────────────────────────────────────────── */
.data-table thead th {
  font-family: var(--font-head); font-weight: 600; font-size: .74rem;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border-dim); background: rgba(255,255,255,.015);
}
.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:hover { background: rgba(255,255,255,.028); }

/* ── MODAL ────────────────────────────────────────────────── */
.modal-backdrop { background: rgba(4,4,10,.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal { border-radius: var(--radius-xl); box-shadow: 0 32px 90px rgba(0,0,0,.7), var(--shadow-glow); }
.modal-title { font-weight: 700; letter-spacing: -.022em; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10); border-radius: 100px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb),.42); background-clip: content-box; }

/* ── SOHBET / EVENT ince ayar ─────────────────────────────── */
.chat-side, .chat-main { border-radius: var(--radius-xl); }
.chat-room-btn.active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.08));
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.26);
}
.cm-text { color: var(--text-primary); }
.chat-msg { padding: .1rem 0; }

.ev-card { border-radius: var(--radius-xl); padding: 1.25rem; }
.ev-title { letter-spacing: -.022em; }
.ev-prize {
  background: linear-gradient(104deg, rgba(251,191,36,.14), rgba(139,92,246,.10));
  border: 1px solid rgba(251,191,36,.22);
  border-radius: var(--radius-md);
}

/* Rozetlerin kenarları temada da net dursun */
.wb { box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 10px rgba(0,0,0,.35); }
.wb-owner {
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
              0 0 0 1px rgba(253,230,138,.5),
              0 3px 16px rgba(245,158,11,.45);
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero h1 { letter-spacing: -.035em; font-weight: 700; }
.hero { position: relative; }

/* Mobil */
@media (max-width: 600px) {
  body::after { filter: blur(34px); }
  html::after { opacity: .22; }
}

/* ── TEMA v2 — ince ayarlar ──────────────────────────────── */

/* Gren katmanı çok baskındı, zemini grileştiriyordu. Hafifletildi. */
html::after { opacity: .10 !important; mix-blend-mode: soft-light !important; }

/* Işık bulutları biraz daha derin ve dağınık — üst taraf sütlü görünmesin */
body::after {
  filter: blur(60px) !important;
  opacity: .72;
  background:
    radial-gradient(40% 34% at 16% 4%,  rgba(124,58,237,.30), transparent 64%),
    radial-gradient(34% 30% at 88% 10%, rgba(79,70,229,.22),  transparent 64%),
    radial-gradient(44% 38% at 66% 96%, rgba(236,72,153,.14), transparent 64%),
    radial-gradient(30% 26% at 4% 82%,  rgba(16,185,129,.09), transparent 64%) !important;
}

/* Üstten aşağı inen koyultma — içerik zeminden net ayrılsın */
body { background: linear-gradient(180deg, rgba(4,4,10,.55) 0%, rgba(4,4,10,.86) 42%, var(--bg-void) 100%), var(--bg-void) !important; }

/* Duyuru şeridi — neon bant yerine sakin cam */
.site-announcement {
  background: linear-gradient(90deg, rgba(139,92,246,.16), rgba(167,139,250,.12), rgba(244,114,182,.12)) !important;
  color: var(--text-bright) !important;
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: none !important;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  font-weight: 500; letter-spacing: .005em;
}

/* Kategori filtre çipleri */
.cat-chip, .cat-filter, .filter-chip {
  border-radius: 100px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.035) !important;
  transition: var(--transition);
}
.cat-chip:hover, .cat-filter:hover, .filter-chip:hover { background: rgba(255,255,255,.07) !important; }
.cat-chip.active, .cat-filter.active, .filter-chip.active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.10)) !important;
  border-color: rgba(var(--accent-rgb),.34) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),.20);
}

/* Hero başlığı — degradeyi yumuşat */
.hero h1 {
  background: linear-gradient(104deg,#ffffff 0%,#f0ecff 40%,#c4b5fd 72%,#a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Tema kuralı .chat-side'in sticky konumunu ezmişti; geri alındı. */
.chat-side { position: sticky !important; top: 84px; align-self: start; }
@media (max-width: 900px) { .chat-side { position: static !important; top: auto; } }

/* ═══════════════════════════════════════════════════════════
   ZEMİN KATMANI — DÜZELTME
   Önceki sürümde zemin, içeriğin ÜSTÜNDE bir katmandaydı ve
   bunu telafi etmek için konumlar değiştirilmişti; bu da
   modalları bozdu. Artık zemin z-index:-1 ile tamamen arkada.
   Taban rengi html'e taşındı ki arkadaki katman görünebilsin.
═══════════════════════════════════════════════════════════ */
html {
  background:
    linear-gradient(180deg, rgba(4,4,10,.50) 0%, rgba(4,4,10,.84) 44%, var(--bg-void) 100%),
    var(--bg-void) !important;
}
body { background: transparent !important; }

/* Işık bulutları — en arkada */
body::before {
  display: block !important; content: '' !important;
  position: fixed !important; inset: -25% !important;
  z-index: -2 !important; pointer-events: none !important;
  background-image: none;
  background:
    radial-gradient(40% 34% at 16% 4%,  rgba(124,58,237,.30), transparent 64%),
    radial-gradient(34% 30% at 88% 10%, rgba(79,70,229,.22),  transparent 64%),
    radial-gradient(44% 38% at 66% 96%, rgba(236,72,153,.14), transparent 64%),
    radial-gradient(30% 26% at 4% 82%,  rgba(16,185,129,.09), transparent 64%);
  filter: blur(60px);
  opacity: .75;
  animation: wh-aurora 34s ease-in-out infinite alternate;
}

/* Film greni — bulutların üstünde, içeriğin altında */
body::after {
  content: '' !important;
  position: fixed !important; inset: 0 !important;
  z-index: -1 !important; pointer-events: none !important;
  opacity: .10; mix-blend-mode: soft-light;
  filter: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: none !important;
}

/* html::after artık kullanılmıyor */
html::after { display: none !important; content: none !important; }

/* Konumları orijinaline geri getir — tema bunları ezmişti.
   (.toast-wrap ve .mobile-menu diye sınıf yok; mobil menü .nav-mobile-drawer
    ve ona hiç dokunulmadı.) */
.navbar         { position: fixed !important; z-index: 1000 !important; }
.modal-backdrop { position: fixed !important; z-index: 2000 !important; inset: 0 !important; }

@media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } }

/* Bakiye yetersizken de "Bakiyemle Al" görünür — tıklayınca bakiye yükleme açılır */
.ud-yontem.ud-yetersiz {
  border-color: rgba(251,191,36,.32);
  background: rgba(251,191,36,.06);
}
.ud-yontem.ud-yetersiz:hover {
  border-color: rgba(251,191,36,.58);
  background: rgba(251,191,36,.11);
}
.ud-yontem.ud-yetersiz .ud-y-orta small { color: var(--accent-gold); }
.ud-yontem.ud-yetersiz .ud-y-ok { color: var(--accent-gold); font-weight: 700; }

/* Onaylı bayi / yönetim — borçlu alım */
.ud-yontem.ud-borc {
  border-color: rgba(167,139,250,.32);
  background: rgba(167,139,250,.06);
}
.ud-yontem.ud-borc:hover {
  border-color: rgba(167,139,250,.58);
  background: rgba(167,139,250,.11);
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR OTOMATİK SIĞDIRMA
   Sorun: .nav-inner'da max-width:1400px vardı. Menü 1833px
   istiyordu, bu yüzden 2000px ekranda bile taşıyor ve maddeler
   yarıdan kesiliyordu.
   Çözüm: genişlik sınırı kalktı + js/navfit.js gerçek ölçüyle
   kademe kademe sadeleştiriyor (s1→s4). Böylece kullanıcı adı
   uzunluğu, dil veya rol değişse de asla taşmaz.
═══════════════════════════════════════════════════════════ */
.navbar    { overflow: hidden; }
.nav-inner { max-width: none; min-width: 0; flex-wrap: nowrap; }
.nav-links { min-width: 0; flex-shrink: 0; }   /* kırpma yok */
.nav-right { flex-shrink: 0; min-width: 0; }
.nav-logo  { flex-shrink: 0; white-space: nowrap; }

/* Dar ekran döviz düğmesi */
.cur-mini {
  display: none; flex-shrink: 0; cursor: pointer; align-items: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  color: var(--accent-cyan); background: rgba(var(--accent-rgb),.10);
  border: 1px solid rgba(var(--accent-rgb),.26); border-radius: 100px;
  padding: .32rem .7rem; white-space: nowrap; transition: var(--transition);
}
.cur-mini:hover { background: rgba(var(--accent-rgb),.18); border-color: rgba(var(--accent-rgb),.45); }

/* KADEME 1 — kur göstergesi gizlenir */
.navbar.nav-s1 .cur-rate-tag { display: none !important; }

/* KADEME 2 — tam döviz seçici yerine tek düğme */
.navbar.nav-s2 #cur-wrap-desktop { display: none !important; }
.navbar.nav-s2 .cur-mini         { display: inline-flex; }

/* KADEME 3 — menü ve logo sıkışır, "Çıkış" gizlenir (drawer'da var) */
.navbar.nav-s3                { padding: 0 1.1rem; }
.navbar.nav-s3 .nav-inner     { gap: .6rem; }
.navbar.nav-s3 .nav-links     { gap: .06rem; }
.navbar.nav-s3 .nav-links a   { padding: .4rem .52rem; font-size: .79rem; }
.navbar.nav-s3 .nav-logo      { font-size: 1.12rem; letter-spacing: .5px; }
.navbar.nav-s3 .nav-right     { gap: .4rem; }
.navbar.nav-s3 .nav-right > .btn.btn-ghost { display: none; }
.navbar.nav-s3 .nav-user span:not(.avatar):not(.badge) {
  max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* KADEME 4 — hamburger */
.navbar.nav-s4 .nav-links     { display: none !important; }
.navbar.nav-s4 .nav-hamburger { display: flex !important; }
.navbar.nav-s4 .cur-mini      { display: none !important; }
.navbar.nav-s4 .cur-wrap      { display: none !important; }
.navbar.nav-s4                { padding: 0 1rem; }
.navbar.nav-s4 .nav-inner     { gap: .7rem; justify-content: space-between; }
.navbar.nav-s4 .nav-logo      { font-size: 1.22rem; letter-spacing: 1.5px; }

/* JS çalışmazsa diye güvenlik ağı (JS varken navfit.js ölçerek karar verir) */
@media (max-width: 1400px) {
  html:not(.lx-js) .nav-links     { display: none; }
  html:not(.lx-js) .nav-hamburger { display: flex; }
}
/* ═══════════════════════════════════════════════════════════
   ADMİN TABLOSU TAŞMA DÜZELTMESİ
   1) .admin-content bir grid hücresi; min-width:0 verilmeyince
      içerikten dar olamıyor ve geniş tablo tüm paneli dışarı
      taşırıyordu ("grid blowout").
   2) İşlem butonları dar sütunda alt alta diziliyor, satırlar
      devasa oluyordu. Artık tek satırda kalıyor, tablo yatay
      kayıyor.
═══════════════════════════════════════════════════════════ */
.admin-grid    { min-width: 0; }
.admin-content { min-width: 0; max-width: 100%; overflow: hidden; }
.admin-section { min-width: 0; }

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  min-width: 0;
}

/* İşlem sütunu: butonlar alt alta düşmesin */
.data-table td:last-child > div {
  flex-wrap: nowrap !important;
  gap: .3rem;
}
.data-table td:last-child { min-width: 330px; white-space: nowrap; }
.data-table td            { white-space: nowrap; }
.data-table td:first-child{ white-space: normal; }   /* ad/e-posta sarılabilir */
.data-table               { min-width: 900px; }      /* dar ekranda wrap kaydırır */

/* Satırlar boşuna uzamasın */
.admin-grid     { align-content: start; align-items: start; }
.data-table tbody tr { height: auto; }
.data-table td  { vertical-align: middle; }

/* Yatay kaydırma çubuğu ince ve belli olsun */
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb),.3); border-radius: 100px;
}

/* Hiçbir sayfa gövdeyi yatay taşırmasın */
body, .page, .container { max-width: 100%; }
body { overflow-x: hidden; }

/* ═══════════════════════════════════════════════════════════
   HAMBURGER HER ZAMAN KÖŞEDE
   Üst menüdeki her şey (+ Profilim) drawer'da da var; böylece
   menü daralıp maddeler gizlense bile hepsine buradan ulaşılır.
═══════════════════════════════════════════════════════════ */
.nav-hamburger {
  display: flex !important;
  margin-left: .15rem;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.035);
}
.nav-hamburger:hover { background: rgba(var(--accent-rgb),.14); border-color: rgba(var(--accent-rgb),.3); }
.nav-hamburger span { width: 18px; height: 2px; border-radius: 2px; background: var(--text-primary); transition: var(--transition); }
.nav-hamburger.open span { background: var(--accent-cyan); }

/* ═══════════════════════════════════════════════════════════
   ÜRÜN KARTLARI — DAHA KÜÇÜK
   280px'lik kartlar kare görselle çok yer kaplıyordu.
   Artık satıra daha fazla ürün sığıyor.
═══════════════════════════════════════════════════════════ */
.product-grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: .85rem;
}
.product-card { gap: .45rem; }
.product-img  { border-radius: var(--radius-md); }
.product-body { padding: .6rem .65rem; border-radius: var(--radius-md); gap: .35rem; }

.product-name     { font-size: .86rem; line-height: 1.3; }
.product-desc     { font-size: .74rem; }
.product-category { font-size: .58rem; padding: .14rem .45rem; letter-spacing: .05em; }
.price-main       { font-size: 1.02rem; }
.price-sub        { font-size: .76rem; }
.product-stock    { font-size: .68rem; }
.product-footer   { gap: .4rem; }

/* Bayi fiyatı rozeti de küçülsün */
.product-body .badge { font-size: .56rem; padding: .12rem .4rem; }

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
  .product-body { padding: .5rem .55rem; }
  .product-name { font-size: .8rem; }
  .price-main   { font-size: .95rem; }
}
@media (max-width: 420px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
}

/* ═══════════════════════════════════════════════════════════
   MENÜ PANELİ — masaüstünde sağdan kayan panel
   Hamburger artık her ekranda var; tam genişlik drawer geniş
   ekranda tüm sayfayı kaplıyordu.
═══════════════════════════════════════════════════════════ */
@media (min-width: 701px) {
  .nav-mobile-drawer {
    top: 72px !important;
    left: auto !important;
    right: 14px !important;
    width: 320px;
    max-height: calc(100vh - 90px) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: var(--radius-lg);
    background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), rgba(12,12,22,.94) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(var(--accent-rgb),.06);
    padding: .35rem 0 .5rem;
    transform-origin: top right;
  }
  .nav-mobile-drawer.open { animation: wh-drawer-in .22s cubic-bezier(.22,1,.36,1); }
  .nav-mobile-drawer a,
  .nav-mobile-drawer .mob-link {
    font-size: .84rem; letter-spacing: .03em;
    padding: .66rem 1.1rem;
    border-radius: 0 10px 10px 0;
    width: calc(100% - .6rem);
  }
  .nav-mobile-drawer .mob-user-card { margin: .4rem .6rem .3rem; }
  .nav-mobile-drawer .mob-currency-row { padding: .65rem 1.1rem; flex-wrap: wrap; }
}
@keyframes wh-drawer-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* Masaüstünde açıkken sayfa kaydırması kilitlenmesin */
@media (min-width: 701px) { body.wh-drawer-acik { overflow: auto !important; } }
@media (prefers-reduced-motion: reduce) { .nav-mobile-drawer.open { animation: none; } }

/* ═══════════════════════════════════════════════════════════
   ÜRÜN AİLESİ KARTI — sadece görsel + isim
═══════════════════════════════════════════════════════════ */
.fam-card { gap: .55rem; }
.fam-img  { position: relative; }
.fam-img-yok { background: var(--bg-deep); border-radius: var(--radius-md); }
.fam-ad {
  font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  letter-spacing: -.01em; line-height: 1.3; color: var(--text-bright);
  text-align: center; padding: 0 .2rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--transition);
}
.fam-card:hover .fam-ad { color: #fff; }
.fam-card:hover .product-img img { transform: scale(1.035); }

.fam-say {
  position: absolute; left: 8px; bottom: 8px;
  font-size: .62rem; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: rgba(8,8,16,.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  padding: .16rem .5rem; border-radius: 100px;
}
.fam-stok-yok {
  position: absolute; right: 8px; top: 8px;
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fecdd3; background: rgba(225,29,72,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: .15rem .45rem; border-radius: 100px;
}
.fam-tukendi .product-img img { filter: grayscale(.55) brightness(.75); }
.fam-tukendi .fam-ad { color: var(--text-muted); }

.fam-bos { grid-column: 1/-1; text-align: center; padding: 4rem 1rem; color: var(--text-muted); }
.fam-bos-ik { font-size: 2.4rem; opacity: .4; margin-bottom: .6rem; }

/* ═══════════════════════════════════════════════════════════
   ÜRÜN SAYFASI — SÜRE SEÇİCİ
═══════════════════════════════════════════════════════════ */
.ud-varyant { margin: 1rem 0 .4rem; }
.ud-varyant-baslik {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .55rem;
}
.ud-varyant-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .5rem; }
.ud-v {
  display: flex; flex-direction: column; align-items: flex-start; gap: .18rem;
  padding: .65rem .8rem; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-md);
  color: var(--text-primary); font-family: var(--font-body);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.ud-v:hover { border-color: rgba(var(--accent-rgb),.38); background: rgba(var(--accent-rgb),.06); transform: translateY(-1px); }
.ud-v.aktif {
  border-color: rgba(var(--accent-rgb),.7);
  background: linear-gradient(170deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.06));
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12), 0 8px 22px rgba(var(--accent-rgb),.18);
}
.ud-v-ad    { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--text-bright); }
.ud-v-fiyat { font-family: var(--font-mono); font-weight: 700; font-size: .86rem; color: var(--accent-green); display: flex; gap: .4rem; align-items: baseline; }
.ud-v-fiyat s { color: var(--text-dim); font-size: .72rem; font-weight: 500; }
.ud-v-stok  { font-size: .66rem; color: var(--text-muted); }
.ud-v.yok   { opacity: .55; }
.ud-v.yok .ud-v-stok { color: var(--accent-red); }

/* ═══════════════════════════════════════════════════════════
   CANLI ARAMA LİSTESİ
═══════════════════════════════════════════════════════════ */
.search-box { position: relative; }
.srch-drop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 900;
  width: min(440px, 92vw);
  background: linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), rgba(12,12,22,.96);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.65), 0 0 0 1px rgba(var(--accent-rgb),.06);
  padding: .4rem; animation: wh-drawer-in .18s cubic-bezier(.22,1,.36,1);
  max-height: 70vh; overflow-y: auto;
}
.srch-drop[hidden] { display: none; }
.srch-item {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .5rem .55rem; border-radius: 11px; cursor: pointer;
  background: transparent; border: 1px solid transparent; text-align: left;
  color: var(--text-primary); font-family: var(--font-body);
  transition: background .14s, border-color .14s;
}
.srch-item:hover, .srch-item.secili { background: rgba(var(--accent-rgb),.09); border-color: rgba(var(--accent-rgb),.18); }
.srch-img { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-deep); }
.srch-img img { width: 100%; height: 100%; object-fit: cover; }
.srch-orta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.srch-ad { font-weight: 600; font-size: .84rem; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-ad mark { background: none; color: var(--accent-cyan); font-weight: 700; }
.srch-alt { font-size: .7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-yok { color: var(--accent-red); }
.srch-fiyat { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.srch-fiyat b { font-family: var(--font-mono); font-size: .86rem; color: var(--accent-green); }
.srch-fiyat s { font-family: var(--font-mono); font-size: .7rem; color: var(--text-dim); }
.srch-hepsi {
  display: flex; justify-content: center; gap: .4rem; width: 100%;
  margin-top: .3rem; padding: .6rem; border-radius: 10px; cursor: pointer;
  background: transparent; border: none; border-top: 1px solid var(--border-dim);
  color: var(--accent-cyan); font-weight: 600; font-size: .8rem; font-family: var(--font-body);
}
.srch-hepsi:hover { background: rgba(var(--accent-rgb),.07); }
.srch-hepsi span { transition: transform var(--transition); }
.srch-hepsi:hover span { transform: translateX(3px); }
.srch-bos { padding: 1rem; text-align: center; color: var(--text-muted); font-size: .82rem; }
@media (max-width: 600px) { .srch-drop { left: 0; right: auto; width: 100%; } }

/* ═══════════════════════════════════════════════════════════
   RENK CANLANDIRMA
   Stoksuz ürün görselleri gri+karartılıyordu; yerelde neredeyse
   hiç stok olmadığı için tüm vitrin soluk duruyordu. Artık
   görseller her zaman tam renkli — stok durumu sadece etiketle.
═══════════════════════════════════════════════════════════ */
.fam-tukendi .product-img img { filter: none !important; }
.fam-tukendi .fam-ad { color: var(--text-bright) !important; }
.product-img img, .ud-gorsel img, .srch-img img { filter: saturate(1.12) contrast(1.03); }
.ud-v.yok { opacity: 1; }
.ud-v.yok .ud-v-ad, .ud-v.yok .ud-v-fiyat { opacity: .7; }
.ev-card-off { opacity: .92; }

/* Tema renkleri — daha doygun, daha canlı */
:root {
  --accent-rgb:    168,132,255;
  --accent-cyan:   #a884ff;
  --accent-purple: #8b5cf6;
  --accent-pink:   #f472b6;
  --accent-green:  #3ee8a8;
  --accent-gold:   #fcc23d;
  --accent-red:    #ff6b8b;
  --text-bright:   #ffffff;
  --text-primary:  #d4d4e6;
  --text-muted:    #9494b2;
}

/* Arka plan ışık bulutları biraz daha belirgin ve renkli */
body::before {
  opacity: 1 !important;
  background:
    radial-gradient(40% 34% at 14% 4%,  rgba(139,92,246,.42), transparent 64%),
    radial-gradient(34% 30% at 88% 8%,  rgba(56,189,248,.24), transparent 64%),
    radial-gradient(44% 38% at 66% 96%, rgba(236,72,153,.26), transparent 64%),
    radial-gradient(30% 26% at 4% 82%,  rgba(16,185,129,.16), transparent 64%) !important;
}
html {
  background:
    linear-gradient(180deg, rgba(4,4,10,.30) 0%, rgba(4,4,10,.66) 50%, rgba(4,4,10,.88) 100%),
    #05050c !important;
}

/* Fiyatlar ve vurgular daha parlak */
.price-main, .ud-fiyat-dg, .ud-v-fiyat, .srch-fiyat b { color: var(--accent-green); text-shadow: 0 0 18px rgba(62,232,168,.25); }
.page-title span { opacity: .85; }
.product-category { background: rgba(var(--accent-rgb),.16); border-color: rgba(var(--accent-rgb),.3); color: #c8b4ff; }

/* Ürün görseli hafif ışıltı — kartlar zeminden ayrılsın */
.fam-card .product-img img { box-shadow: 0 10px 30px rgba(0,0,0,.45); border-radius: var(--radius-md); }
.fam-card:hover .product-img img { box-shadow: 0 14px 40px rgba(var(--accent-rgb),.28); }

/* Stok yok etiketi daha net ama görseli boğmasın */
.fam-stok-yok { background: rgba(225,29,72,.82); color: #fff; }

/* Aile açıkken üst şerit: geri düğmesi + aile adı */
.fam-baslik {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .2rem 0 .4rem;
}
.fam-baslik-ad  { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--text-bright); letter-spacing: -.015em; }
.fam-baslik-say { font-size: .72rem; color: var(--text-muted); background: rgba(255,255,255,.05); border: 1px solid var(--border-dim); padding: .15rem .55rem; border-radius: 100px; }

/* Köşe düzeltmesi: box-shadow dikdörtgen olduğu için şeffaf PNG
   köşelerinden siyah görünüyordu. drop-shadow görselin gerçek
   şeklini (yuvarlak köşeleri) takip eder. */
.fam-card .product-img img,
.product-card .product-img img {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: none !important;
  filter: saturate(1.12) contrast(1.03) drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
.fam-card:hover .product-img img,
.product-card:hover .product-img img {
  box-shadow: none !important;
  filter: saturate(1.15) contrast(1.04) drop-shadow(0 12px 26px rgba(var(--accent-rgb),.35));
}
.fam-card .product-img, .product-card .product-img { background: none !important; box-shadow: none !important; }
.fam-tukendi .product-img img       { filter: saturate(1.12) contrast(1.03) drop-shadow(0 8px 18px rgba(0,0,0,.45)) !important; }
.fam-tukendi:hover .product-img img { filter: saturate(1.15) contrast(1.04) drop-shadow(0 12px 26px rgba(var(--accent-rgb),.35)) !important; }

/* ═══════════════════════════════════════════════════════════
   LİDERLİK — İLK 3 KÜRSÜ + ŞAMPİYON ROZETİ
═══════════════════════════════════════════════════════════ */
.lb-podium-card { border-color: rgba(252,194,61,.24) !important; padding: 1.1rem 1rem 1rem; }
.lb-podium-title {
  text-align: center; font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  letter-spacing: .04em; color: var(--accent-gold); margin-bottom: 1rem;
}
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .45rem; }
.lb-pod { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; position: relative; }
.lb-pod-av { line-height: 0; }
.lb-pod-1 .lb-pod-av .avatar, .lb-pod-1 .lb-pod-av img {
  box-shadow: 0 0 0 3px #fcc23d, 0 0 22px rgba(252,194,61,.55);
}
.lb-pod-2 .lb-pod-av .avatar, .lb-pod-2 .lb-pod-av img { box-shadow: 0 0 0 2px #cbd5e1; }
.lb-pod-3 .lb-pod-av .avatar, .lb-pod-3 .lb-pod-av img { box-shadow: 0 0 0 2px #e0915b; }
.lb-crown { font-size: 1.25rem; line-height: 1; margin-bottom: -.1rem; filter: drop-shadow(0 2px 6px rgba(252,194,61,.6)); animation: lb-float 3s ease-in-out infinite; }
@keyframes lb-float { 50% { transform: translateY(-3px); } }
.lb-pod-ad { font-size: .78rem; font-weight: 700; color: var(--text-bright); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod-puan { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--accent-cyan); }
.lb-pod-blok {
  width: 100%; border-radius: 10px 10px 4px 4px; margin-top: .25rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: rgba(255,255,255,.9);
}
.lb-pod-1 .lb-pod-blok { height: 64px; background: linear-gradient(180deg, rgba(252,194,61,.55), rgba(252,194,61,.12)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.lb-pod-2 .lb-pod-blok { height: 46px; background: linear-gradient(180deg, rgba(203,213,225,.38), rgba(203,213,225,.08)); }
.lb-pod-3 .lb-pod-blok { height: 34px; background: linear-gradient(180deg, rgba(224,145,91,.42), rgba(224,145,91,.08)); }
.lb-pod-bos .lb-pod-blok { opacity: .35; }

/* Şampiyon rozeti — sadece liderlik sayfasında */
.lb-champ-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  font-family: var(--font-head); font-size: .58rem; font-weight: 800; letter-spacing: .12em;
  color: #2a1700; padding: .16rem .55rem; border-radius: 100px; position: relative; overflow: hidden;
  background: linear-gradient(110deg, #fff1b8 0%, #fcc23d 40%, #ff9f1c 70%, #fff1b8 100%);
  box-shadow: 0 0 0 1px rgba(255,241,184,.6), 0 2px 14px rgba(252,194,61,.55);
  white-space: nowrap;
}
.lb-champ-badge::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%);
  transform: translateX(-120%); animation: wb-shine 3.6s ease-in-out infinite;
}
.lb-row-1 td { background: linear-gradient(90deg, rgba(252,194,61,.09), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .lb-crown, .lb-champ-badge::after { animation: none; } }
@media (max-width: 900px) { #page-leaderboard .container > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } }
.lb-row-1 td { background: none !important; }
.lb-row-1 { background: linear-gradient(90deg, rgba(252,194,61,.12), rgba(252,194,61,.03) 60%, transparent) !important; }

/* ═══════════════════════════════════════════════════════════
   YÖNETİM PANELİ — DÜZEN
   Menü başlıklı gruplara ayrıldı; her bölümün aynı tip başlığı var.
═══════════════════════════════════════════════════════════ */
.admin-sidebar { padding: .7rem .55rem !important; display: flex; flex-direction: column; gap: .1rem; }
.adm-grup {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); padding: .95rem .75rem .35rem;
}
.adm-grup:first-child { padding-top: .35rem; }
.admin-sidebar .admin-nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .75rem !important; border-radius: 10px !important;
  font-size: .84rem !important; font-weight: 500; text-align: left; width: 100%;
  color: var(--text-primary); border: 1px solid transparent; background: transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.admin-sidebar .admin-nav-item:hover  { background: rgba(255,255,255,.045); color: var(--text-bright); }
.admin-sidebar .admin-nav-item.active {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.08)) !important;
  border-color: rgba(var(--accent-rgb),.28) !important; color: #fff !important;
}
.adm-ik { width: 1.2rem; text-align: center; flex-shrink: 0; font-size: .95rem; }
.admin-sidebar .sidebar-badge { margin-left: auto; }

.adm-baslik {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.15rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border-dim);
}
.adm-baslik h2 { margin: 0; font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-bright); }
.adm-baslik p  { margin: .25rem 0 0; font-size: .82rem; color: var(--text-muted); max-width: 640px; }
.adm-kart {
  background: var(--glass), var(--bg-card); border: 1px solid var(--border-dim);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.adm-kart-baslik { font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--text-bright); margin-bottom: .8rem; }
.adm-bos  { text-align: center; padding: 2rem 1rem; color: var(--text-muted); font-size: .85rem; }
.adm-alt  { font-size: .7rem; color: var(--text-muted); margin-top: .15rem; white-space: normal; }
.adm-not  { font-size: .76rem; color: var(--text-muted); margin: .7rem 0 0; }

/* Owner ayarlarındaki kartlar arası nefes */
#admin-owner .owner-card { margin-bottom: 1rem; }

/* ═══════════════════════════════════════════════════════════
   KUPON — owner tablosu ve form
═══════════════════════════════════════════════════════════ */
.kp-kod {
  font-family: var(--font-mono); font-weight: 700; font-size: .82rem; letter-spacing: .06em;
  color: var(--accent-cyan); background: rgba(var(--accent-rgb),.10);
  border: 1px dashed rgba(var(--accent-rgb),.4); padding: .2rem .55rem; border-radius: 8px; cursor: pointer;
}
.kp-onizle {
  font-size: .8rem; color: var(--text-muted); background: rgba(0,0,0,.25);
  border: 1px solid var(--border-dim); border-radius: 10px; padding: .55rem .8rem;
}
.kp-onizle b { color: var(--accent-green); font-family: var(--font-mono); }
.kp-onizle s { color: var(--text-dim); }
.kp-onizle span { color: var(--accent-gold); }

/* ═══════════════════════════════════════════════════════════
   KUPON — ürün sayfası
═══════════════════════════════════════════════════════════ */
.kp-kutu { margin: .1rem 0 .7rem; }
.kp-ac {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 1px dashed rgba(var(--accent-rgb),.35); border-radius: var(--radius-md);
  color: var(--accent-cyan); font-family: var(--font-body); font-weight: 600; font-size: .84rem;
  padding: .7rem .9rem; transition: background var(--transition), border-color var(--transition);
}
.kp-ac:hover { background: rgba(var(--accent-rgb),.07); border-color: rgba(var(--accent-rgb),.6); }
.kp-form { display: none; gap: .5rem; }
.kp-kutu.acik .kp-ac   { display: none; }
.kp-kutu.acik .kp-form { display: flex; animation: wh-drawer-in .18s ease; }
.kp-input { flex: 1; font-family: var(--font-mono) !important; letter-spacing: .08em; text-transform: uppercase; }
.kp-hata { animation: kp-salla .4s; border-color: var(--accent-red) !important; }
@keyframes kp-salla { 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
.kp-uygulandi {
  display: flex; align-items: center; gap: .7rem;
  background: linear-gradient(100deg, rgba(62,232,168,.12), rgba(62,232,168,.04));
  border: 1px solid rgba(62,232,168,.35); border-radius: var(--radius-md); padding: .65rem .8rem;
}
.kp-uyg-ik { font-size: 1.1rem; }
.kp-uyg-orta { flex: 1; display: flex; flex-direction: column; }
.kp-uyg-orta b { font-family: var(--font-mono); letter-spacing: .06em; color: var(--accent-green); font-size: .9rem; }
.kp-uyg-orta small { font-size: .74rem; color: var(--text-primary); }
.kp-kaldir { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .95rem; padding: .2rem .4rem; border-radius: 6px; }
.kp-kaldir:hover { background: rgba(255,255,255,.06); color: var(--text-bright); }
.kp-eski { color: var(--text-dim); font-family: var(--font-mono); font-size: .9rem; margin-left: .4rem; }
.kp-indirim-rozet {
  margin-left: .5rem; font-size: .72rem; font-weight: 700; color: #052b1d;
  background: var(--accent-green); padding: .15rem .5rem; border-radius: 100px; vertical-align: middle;
}
.kp-uyari b { color: var(--accent-gold) !important; }
/* Tema kuralı .admin-sidebar'ın sticky konumunu relative yapmıştı; top:84px aşağı itiyordu */
.admin-sidebar { position: sticky !important; top: 84px !important; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; }
@media (max-width: 900px) { .admin-sidebar { position: static !important; top: auto !important; max-height: none; } }
@media (max-width: 900px) {
  .admin-sidebar { flex-direction: row !important; flex-wrap: wrap; gap: .3rem !important; }
  .adm-grup { width: 100%; padding: .55rem .3rem .15rem !important; }
  .admin-sidebar .admin-nav-item { width: auto; padding: .45rem .7rem !important; font-size: .8rem !important; }
}