/* ---------- App Theme Tokens ---------- */
:root {
  --app-radius: 16px;
  --app-radius-sm: 12px;
  --app-shadow: 0 12px 30px rgba(0,0,0,.18);
  --app-shadow-soft: 0 10px 25px rgba(0,0,0,.10);
  --app-accent: #7c3aed; /* purple */
  --app-accent-2: #22c55e; /* green */
}

:root[data-bs-theme="dark"] {
  --app-bg-0: #070B15;
  --app-bg-1: #0b1220;
  --app-surface: rgba(17, 24, 39, .7);
  --app-border: rgba(148, 163, 184, .18);
  --app-text-dim: rgba(226,232,240,.78);
}

:root[data-bs-theme="light"] {
  --app-bg-0: #f6f7fb;
  --app-bg-1: #ffffff;
  --app-surface: rgba(255,255,255,.82);
  --app-border: rgba(15, 23, 42, .12);
  --app-text-dim: rgba(15,23,42,.70);
  --app-shadow: 0 14px 35px rgba(2, 6, 23, .12);
  --app-shadow-soft: 0 10px 25px rgba(2, 6, 23, .08);
}

/* ---------- Global Look ---------- */
html, body { height: 100%; }
body {
  background:
    radial-gradient(900px 450px at 15% -10%, color-mix(in srgb, var(--app-accent), transparent 85%), transparent 70%),
    radial-gradient(700px 420px at 85% 0%, color-mix(in srgb, var(--app-accent-2), transparent 88%), transparent 65%),
    linear-gradient(180deg, var(--app-bg-0), var(--app-bg-1));
}

.container { max-width: 1100px; }

h1,h2,h3,h4,h5 { letter-spacing: -0.02em; }
.text-dim { color: var(--app-text-dim) !important; }

/* ---------- Navbar ---------- */
.app-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--app-surface), transparent 10%);
  border-bottom: 1px solid var(--app-border);
}

.navbar-brand {
  font-weight: 700;
}

.app-pill {
  border-radius: 999px !important;
}

/* ---------- Cards ---------- */
.app-card {
  border-radius: var(--app-radius);
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-soft);
}

.app-card .card-body { padding: 1.1rem; }

.app-card-hover {
  transition: transform .15s ease, box-shadow .15s ease;
}
.app-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--app-shadow);
}

/* ---------- Buttons (Bootstrap override via vars) ---------- */
.btn-primary {
  --bs-btn-bg: var(--app-accent);
  --bs-btn-border-color: var(--app-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--app-accent), #000 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--app-accent), #000 15%);
  --bs-btn-active-bg: color-mix(in srgb, var(--app-accent), #000 25%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--app-accent), #000 25%);
}

.btn-outline-secondary {
  border-color: var(--app-border);
}

/* ---------- Lists ---------- */
.list-group-item {
  border-color: var(--app-border);
}

/* ---------- Badges ---------- */
.badge-soft {
  background: color-mix(in srgb, var(--app-accent), transparent 88%);
  color: color-mix(in srgb, var(--app-accent), #fff 10%);
  border: 1px solid color-mix(in srgb, var(--app-accent), transparent 70%);
}

/* ---- Wishlist cards: equal size ---- */
.wish-card {
  height: 100%;
}

.wish-media {
  height: 220px;              /* sabit görsel alanı */
  overflow: hidden;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* ---------- Wish Cards ---------- */
.wish-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  background: rgba(255,255,255,.03);
}

.wish-thumb--icon {
  object-fit: contain;
  padding: 28px;
}

.wish-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wish-actions {
  margin-top: auto;
  padding-top: 0.75rem;
}