/* === GENEL TEMA === */
:root {
  --bg-main: #0b0614;
  --bg-card: #130a24;
  --purple-main: #8b5cf6;
  --purple-glow: #a78bfa;
  --text-main: #e9e7ff;
  --text-muted: #b6b2e6;
  --border-soft: rgba(139, 92, 246, 0.25);
}

* {
  box-sizing: border-box;
}

body {
  background: radial-gradient(circle at top, #1a0f33, var(--bg-main));
  color: var(--text-main);
  font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* === BAŞLIKLAR === */
h1, h2, h3, h4 {
  color: #f5f3ff;
  letter-spacing: 0.4px;
}

h1 span,
h2 span {
  color: var(--purple-main);
}

/* === ÜRÜN KARTLARI === */
.product,
.card,
.box {
  background: linear-gradient(180deg, var(--bg-card), #0e081a);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 rgba(139, 92, 246, 0);
}

.product:hover,
.card:hover,
.box:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--purple-main);
  box-shadow:
    0 0 25px rgba(139, 92, 246, 0.35),
    inset 0 0 15px rgba(139, 92, 246, 0.15);
}

/* === BUTONLAR === */
button,
.btn,
a.button {
  background: linear-gradient(135deg, var(--purple-main), var(--purple-glow));
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.35);
}

button:hover,
.btn:hover,
a.button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 35px rgba(139, 92, 246, 0.65);
}

/* === FİYAT === */
.price {
  font-size: 22px;
  font-weight: 700;
  color: var(--purple-glow);
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);
}

/* === ETİKET / BADGE === */
.badge,
.tag {
  background: rgba(139, 92, 246, 0.15);
  color: var(--purple-glow);
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
}

/* === INPUT / FORM === */
input,
select,
textarea {
  background: #0e081a;
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: 10px;
  padding: 10px 14px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--purple-main);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.35);
}

/* === FOOTER / ALT YAZI === */
footer,
.footer {
  color: var(--text-muted);
  opacity: 0.85;
}