/* ═══════════════════════════════════════════════════════════════
   KOLEKSIYONERLER.COM — FINAL UI/UX REDESIGN
   Booking.com + Sahibinden + Modern Marketplace
   v=20260626-mobile-card — Mobil 2 sütun Dolap tarzı kart,
   favori kalbi, placeholder, POS karar netleştirme
   ═══════════════════════════════════════════════════════════════ */

:root {
  --primary: #003B95;
  --primary-hover: #0057D9;
  --primary-light: #EBF1FF;
  --primary-mid: #B8CCEE;
  --accent: #FFB700;
  --accent-hover: #E6A400;
  --accent-soft: #FFF8DC;
  --bg: #F5F8FF;
  --surface: #FFFFFF;
  --surface-soft: #EBF1FF;
  --ink: #0F172A;
  --ink-soft: #334155;
  --muted: #64748b;
  --line: #D8E2F0;
  --line-soft: #E8EFF8;
  --success: #059669;
  --warning: #D97706;
  --danger: #DC2626;

  /* Eski değişkenler — geriye dönük uyumluluk */
  --teal: #003B95;
  --teal-dark: #0057D9;
  --coral: #DC2626;
  --mustard: #FFB700;
  --gold: #d8a31d;
  --gold-soft: #FFF8DC;
  --platinum: #9aa7b7;
  --platinum-soft: #eef2f7;
  --navy: #003B95;

  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 4px rgba(0, 59, 149, 0.08);
  --shadow: 0 4px 20px rgba(0, 59, 149, 0.12);
  --shadow-md: 0 8px 32px rgba(0, 59, 149, 0.16);
  --shadow-lg: 0 16px 48px rgba(0, 59, 149, 0.20);
  --transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ══════════════════════════════════════════════
     FAZ 3 — DESIGN TOKENS (Adım 2 tamamlama)
     Yukarıdaki isimli renk/radius/shadow tokenlarının üstüne, Adım 3-5'te
     referans verilen ama eksik olan skalalar ekleniyor. Yeni RENK icat
     edilmedi — nötr/primary/accent tonları yukarıdaki isimli değerlere
     sayısal takma ad; platinum/gold gradient'leri kodda zaten kullanılan
     (pazar-yeri.html .platinum-listing/.gold-listing rozet) renklerden
     çıkarıldı.
     ══════════════════════════════════════════════ */

  /* Nötr skala — yukarıdaki bg/surface/line/muted/ink'in sayısal takma adları */
  --neutral-50: var(--bg);
  --neutral-100: var(--surface-soft);
  --neutral-200: var(--line);
  --neutral-300: var(--line-soft);
  --neutral-500: var(--muted);
  --neutral-600: var(--ink-soft);
  --neutral-700: #1e293b;
  --neutral-900: var(--ink);

  /* İkon arka planı gibi "açık ton" kullanımları için */
  --primary-100: var(--primary-light);
  --primary-600: var(--primary);
  --accent-100: var(--accent-soft);
  --accent-600: var(--accent-hover);

  /* Platinum/Gold rozet degrade'leri — renkler pazar-yeri.html'deki
     .platinum-listing/.gold-listing rozetinden alındı (a855f7/fde047
     zaten o dosyada kullanılıyordu), burada icat edilmedi. */
  --platinum-gradient: linear-gradient(135deg, var(--platinum) 0%, #a855f7 100%);
  --gold-gradient: linear-gradient(135deg, #fde047 0%, var(--gold) 100%);

  /* Tipografi skalası */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Spacing skalası — 4px taban */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ── RESET & BASE ── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: #001A4D;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* ── SAFARİ / iOS UYUMLULUK ── */
input,
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
}

/* Safari'de select için ok işareti geri ekle */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* iOS tap highlight kaldır */
a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

/* ── ÇİFT DOKUNMA ZOOM'U ENGELLE (pinch-zoom BOZULMAZ) ──
   touch-action:manipulation, tarayıcıya "bu elementte çift dokunma
   yakınlaştırması gerekmiyor" der; tek dokunma, kaydırma ve iki parmak
   pinch-zoom davranışını DEĞİŞTİRMEZ — viewport'ta user-scalable=no veya
   maximum-scale=1 KULLANILMADI, erişilebilirlik pinch-zoom'u korunuyor. */
html,
body,
button,
a,
input,
select,
textarea,
[role="button"],
.product-card,
[data-listing-id] {
  touch-action: manipulation;
}

/* iOS momentum scroll */
.nav-links,
.product-grid,
.category-grid {
  -webkit-overflow-scrolling: touch;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 16px;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ── LAYOUT ── */
.wrap,
.nav-wrap {
  width: min(1180px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #001F5C;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.30);
}

.nav-wrap {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-logo {
  height: 40px;
  width: 40px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.brand-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

@media (max-width: 600px) {
  .brand-logo {
    height: 34px;
    width: 34px;
  }

  .brand-name {
    font-size: 0.95rem;
  }
}

.brand-mark {
  display: none !important;
}

.brand-fallback {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
}

.brand-fallback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 900;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: var(--transition);
  letter-spacing: 0.01em;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  outline: none;
}

.nav-links a.nav-active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 700;
}

.nav-links a.nav-highlight {
  color: var(--accent);
  background: rgba(255, 183, 0, 0.12);
  font-weight: 700;
}

.nav-links a.nav-highlight:hover {
  background: rgba(255, 183, 0, 0.22);
  color: var(--accent);
}

/* Giriş/Kayıt butonu */
.login-link {
  height: 40px;
  padding: 0 20px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  border-radius: 8px;
  background: transparent;
  transition: var(--transition);
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.login-link:hover,
.login-link:focus-visible {
  background: #ffffff !important;
  color: var(--primary) !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25);
}

/* Hamburger */
.menu-toggle {
  display: none;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.hamburger-icon {
  display: inline-flex;
  align-items: center;
}

.hamburger-icon svg {
  width: 18px;
  height: 18px;
}

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: clamp(380px, 52vh, 500px);
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  overflow: hidden;
  /* Safari gradient fallback */
  background: #003B95;
  background: -webkit-linear-gradient(315deg, #001F5C 0%, #003B95 45%, #0057D9 100%);
  background: linear-gradient(135deg, #001F5C 0%, #003B95 45%, #0057D9 100%);
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.08;
  mix-blend-mode: luminosity;
}

.hero-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 27, 80, 0.40);
  background: -webkit-linear-gradient(315deg,
      rgba(0, 27, 80, 0.55) 0%,
      rgba(0, 59, 149, 0.30) 50%,
      rgba(0, 87, 217, 0.15) 100%);
  background: linear-gradient(135deg,
      rgba(0, 27, 80, 0.55) 0%,
      rgba(0, 59, 149, 0.30) 50%,
      rgba(0, 87, 217, 0.15) 100%);
}

/* Hero dekoratif daireler */
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 183, 0, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -60px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: 48px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 14px;
  background: rgba(255, 183, 0, 0.15);
  border: 1px solid rgba(255, 183, 0, 0.35);
  border-radius: 100px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero h1 {
  color: #ffffff;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
  max-width: 700px;
}

.hero-copy {
  max-width: 580px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.65;
  margin-bottom: 0;
}

.hero-sell-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 24px;
}

.hero-sell-cta .btn {
  min-height: 50px;
  padding-inline: 24px;
  font-size: 1rem;
}

.hero-sell-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Hero arama kutusu */
.hero-search {
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 110px;
  gap: 0;
  margin-top: 32px;
  background: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.hero-search input {
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  outline: none;
  font-size: 0.95rem;
}

.hero-search input::placeholder {
  color: var(--muted);
}

.hero-search select {
  width: 100%;
  min-height: 56px;
  padding: 14px 12px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  outline: none;
  font-size: 0.9rem;
  cursor: pointer;
}

.hero-search .btn.primary {
  border-radius: 0;
  min-height: 56px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.hero-search input:focus,
.hero-search select:focus {
  background: var(--primary-light);
}

/* Hero stats */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  backdrop-filter: blur(8px);
}

.hero-stat strong {
  font-size: 1.35rem;
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
}

.hero-stat span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 3px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════
   İSTATİSTİK ALANI (Hero altı)
══════════════════════════════════════════════ */
.stats-section {
  background: var(--primary);
  padding-block: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.stats-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  transition: background 200ms;
}

.stats-bar-item:last-child {
  border-right: none;
}

.stats-bar-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.stats-bar-item strong {
  display: block;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stats-bar-item span {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.85rem;
  margin-top: 5px;
  font-weight: 500;
}

/* Eski stats-grid (geriye dönük uyumluluk) */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stat-card {
  text-align: center;
  padding: 24px 20px;
}

.stat-card strong {
  display: block;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
}

.stat-card span {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  margin-top: 6px;
}

/* ══════════════════════════════════════════════
   SECTION GENEL
══════════════════════════════════════════════ */
.section {
  padding-block: 56px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.section-heading p {
  margin-bottom: 8px;
}

/* ══════════════════════════════════════════════
   BUTONLAR
══════════════════════════════════════════════ */
.btn,
.icon-button,
.chip,
.forum-cat {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-weight: var(--font-bold);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover,
.icon-button:hover {
  transform: translateY(-1px);
}

.btn.primary {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 59, 149, 0.30);
}

.btn.primary:hover,
.btn.primary:focus-visible {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: 0 6px 20px rgba(0, 87, 217, 0.38);
}

.btn.secondary {
  color: var(--primary);
  background: var(--primary-light);
  border-color: var(--primary-mid);
}

.btn.secondary:hover {
  background: #D8E8FF;
  border-color: var(--primary);
}

.btn.ghost {
  color: var(--ink-soft);
  background: var(--surface);
  border-color: var(--line);
}

.btn.ghost:hover {
  background: var(--bg);
  border-color: var(--primary-mid);
  color: var(--primary);
}

.btn.accent {
  color: #3D2800;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(255, 183, 0, 0.35);
}

.btn.accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn.gold-action {
  color: #553d00;
  background: var(--gold-soft);
  border-color: #e5bd47;
}

.btn.platinum-action {
  color: #243447;
  background: var(--platinum-soft);
  border-color: var(--platinum);
}

.btn.danger {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

.icon-button {
  width: 44px;
  padding: 0;
  color: var(--primary);
  background: var(--surface);
  border-color: var(--line);
  font-size: 1.4rem;
}

/* ══════════════════════════════════════════════
   KATEGORİ KARTLARI
══════════════════════════════════════════════ */
.categories-section {
  background: #ffffff;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px 24px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  transition: var(--transition);
  gap: 10px;
  min-height: 140px;
}

.category-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: var(--radius);
  line-height: 1;
  transition: transform 200ms;
}

.cat-icon svg {
  width: 26px;
  height: 26px;
}

.category-card:hover .cat-icon {
  transform: scale(1.15);
}

.category-card strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
}

.category-card span {
  font-size: 0.78rem;
  color: var(--muted);
  display: block;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════
   ÜRÜN KARTLARI (Pazar Yeri)
══════════════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

/* hover:hover — dokunmatik cihazlarda "yapışkan hover" (tap sonrası
   efektin takılı kalması) olmasın diye sadece gerçek fare/hover
   desteği olan cihazlarda uygulanır. */
@media (hover: hover) {
  .product-card:hover {
    border-color: var(--primary-mid);
    box-shadow: var(--shadow-md);
    transform: scale(1.02);
  }
}

.product-card.featured {
  border-color: #F2C453;
  box-shadow: 0 4px 20px rgba(240, 180, 41, 0.18);
}

.product-card.featured:hover {
  box-shadow: 0 8px 32px rgba(240, 180, 41, 0.28);
}

.product-card.gold-member {
  border: 2px solid var(--gold);
  box-shadow: 0 4px 20px rgba(216, 163, 29, 0.18);
}

.product-card.platinum-member {
  border: 2px solid var(--platinum);
  box-shadow: 0 4px 20px rgba(84, 97, 120, 0.16);
}

.product-card.featured::before {
  content: "Öne Çıkan";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 22px;
  color: #3D2800;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233D2800'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7-5.4-4.7 7.1-.6z'/%3E%3C/svg%3E") no-repeat 6px center / 12px 12px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
}

/* Gold/Platinum rozetleri — degrade + yıldız ikonu (aynı data-URI SVG
   tekniği .featured::before'da zaten kullanılıyordu, buraya da uygulandı).
   Renkler var(--gold-gradient)/var(--platinum-gradient) tokenlarından. */
.product-card.gold-member::after {
  content: "Gold Üye";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 22px;
  color: #553d00;
  background: var(--gold-gradient), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23553d00'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7-5.4-4.7 7.1-.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0, 6px center;
  background-size: 100% 100%, 12px 12px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.product-card.platinum-member::after {
  content: "Platinum Üye";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 22px;
  color: #fff;
  background: var(--platinum-gradient), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2l2.9 6.6 7.1.6-5.4 4.7 1.7 7-6.3-3.9-6.3 3.9 1.7-7-5.4-4.7 7.1-.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0, 6px center;
  background-size: 100% 100%, 12px 12px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

/* ── Görsel alanı: gerçek foto ve placeholder BİREBİR aynı ölçü/oran ── */
.product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--line-soft);
}

.product-img img,
.product-img .product-img-placeholder,
.product-img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Görsel yüklenemediğinde card()'daki onerror bu sınıfı ekler; kırık
   resim ikonu yerine .product-img-placeholder gösterilir (bkz. altta
   768px bloğundaki !important eşi — mobilde display:block !important
   kuralı bunu ezmesin diye). */
.product-img img.img-load-failed {
  display: none;
}

.product-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  background: var(--line-soft);
}

/* Eski, sarmalayıcısız <img> düzeni için geriye dönük uyumluluk
   (her iki kart üretimi de artık .product-img kullanıyor, bu sadece
   güvenlik ağı) */
.product-card > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--line-soft);
}

.product-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-4);
}

.product-title-row {
  display: block;
}

.product-title-row h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: var(--font-semibold);
  color: var(--ink);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: 2.5em;
  max-height: 2.5em;
}

.product-price {
  white-space: nowrap;
  color: var(--primary);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
  margin-top: 4px;
  flex-shrink: 0;
}

.product-meta {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 6px;
  min-width: 0;
  flex-shrink: 0;
}

/* Etiketler — "pill" rozet: dolu border-radius, nötr açık zemin,
   kalın/koyu border yok (sadece zemin rengiyle ayrışıyor). Normal
   etiketler KISALABİLİR (metin ellipsis ile kırpılır) — böylece "+N"
   sayacına her zaman yer kalır, sayacın kendisi asla kesilmez/
   kaybolmaz (bkz. .badge-more: flex-shrink:0, sabit). */
.product-meta .badge {
  flex-shrink: 1;
  min-width: 0;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--neutral-100);
  border-color: transparent;
  color: var(--neutral-700);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
}

/* "+N" fazla-etiket sayacı — JS tarafından 3'ten fazla etiket olduğunda
   eklenir, DARALTILMAZ ki her zaman tam görünür kalsın. */
.product-meta .badge-more {
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--neutral-500);
  background: var(--neutral-200);
  border-color: transparent;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

.product-seller {
  margin-top: auto;
  padding-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-sm);
  color: var(--neutral-500);
  flex-shrink: 0;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.product-actions .btn:first-child {
  grid-column: 1 / -1;
}

/* ── Featured track (slider) ── */
.featured-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.featured-card {
  position: relative;
  min-height: 200px;
  padding: 20px;
  scroll-snap-align: start;
  background: linear-gradient(135deg, #fffdf5, #ffffff 58%, #EBF1FF);
  border: 1.5px solid #f4d177;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(240, 180, 41, 0.16);
  transition: var(--transition);
}

.featured-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(240, 180, 41, 0.24);
}

/* ══════════════════════════════════════════════
   VİTRİN — ana sayfa banner carousel (isFeatured/boost'lu ilanlar)
   Yatay kaydırma native scroll ile yapılır (JS momentum taklidi yok);
   -webkit-overflow-scrolling + touch-action + overscroll-behavior-x,
   Faz 1'de düzeltilen momentum/inertia mantığıyla aynı.
══════════════════════════════════════════════ */
.showcase-section {
  padding-block: 28px;
}

.showcase-heading {
  margin-bottom: 14px;
}

.showcase-track {
  display: flex;
  /* Kesin/açık bırakıldı — varsayılanla aynı ama gelecekte bir global
     reset/override'ın kartları alt alta düşürmesine karşı savunma. */
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  overscroll-behavior-x: contain;
  padding: 4px 24px 6px;
  scrollbar-width: none;
}

.showcase-track::-webkit-scrollbar {
  display: none;
}

/* Kartların toplamı container'dan dar kaldığında (taşma yok, scroll'a
   gerek yok) ORTALANIR — bu class yalnızca JS ölçümüyle (scrollWidth <=
   clientWidth) doğrulandığında eklenir, o yüzden taşan bir içerikte asla
   ortalama ile scroll-start karışmaz. */
.showcase-track--fits {
  justify-content: center;
}

.showcase-card {
  position: relative;
  flex: 0 0 clamp(260px, 85vw, 420px);
  /* flex-shrink ayrıca açık: "flex: 0 0 ..." zaten 0 yapıyor, ama kartların
     container tarafından sıkıştırılıp küçültülmesi (asıl "alt alta düşme"
     sebeplerinden biri) burada asla olmasın diye tekrar belirtildi. */
  flex-shrink: 0;
  width: clamp(260px, 85vw, 420px);
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--line-soft);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 150ms ease;
}

.showcase-card:active {
  transform: scale(0.98);
}

/* ══════════════════════════════════════════════
   ANA SAYFA — Vitrin + Sidebar iki sütun düzeni
   (Güvenli Alışveriş kutusu + Yeni Eklenen İlanlar listesi)
══════════════════════════════════════════════ */
.home-showcase-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .home-showcase-layout {
    grid-template-columns: 1fr;
  }
}

.home-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.trust-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.trust-box h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.trust-box h3 svg {
  flex-shrink: 0;
  color: var(--primary);
}

.trust-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trust-box li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.trust-box li svg {
  flex-shrink: 0;
  color: var(--success);
}

.sidebar-recent-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.sidebar-recent-list h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.sidebar-recent-list h3 a {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}

.sidebar-recent-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: opacity 150ms;
}

.sidebar-recent-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-recent-item:hover {
  opacity: 0.8;
}

.sidebar-recent-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--line-soft);
}

.sidebar-recent-info {
  min-width: 0;
  flex: 1;
}

.sidebar-recent-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-recent-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.sidebar-recent-price {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}

.sidebar-recent-time {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Yükleniyor iskeleti — veri gelene kadar boş ekran yerine gösterilir */
.showcase-card--skeleton {
  cursor: default;
  background: linear-gradient(100deg, var(--line-soft) 30%, var(--line) 50%, var(--line-soft) 70%);
  background-size: 200% 100%;
  animation: showcase-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes showcase-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-card--skeleton {
    animation: none;
  }
}

.showcase-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.showcase-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showcase-card-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--line-soft);
  color: var(--muted);
}

.showcase-card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 10, 40, 0.85) 0%, rgba(0, 10, 40, 0.35) 45%, rgba(0, 10, 40, 0) 70%);
  pointer-events: none;
}

.showcase-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px 5px 10px;
  background: var(--accent);
  color: #3D2800;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.showcase-card-badge svg {
  flex-shrink: 0;
}

.showcase-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px;
  color: #fff;
}

.showcase-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.showcase-card-price {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.showcase-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}

.showcase-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 150ms ease, transform 150ms ease;
}

.showcase-dot.active {
  background: var(--primary);
  transform: scale(1.3);
}

@media (max-width: 620px) {
  .showcase-track {
    padding: 4px 16px 6px;
    gap: 10px;
  }

  .showcase-card-title {
    font-size: 0.95rem;
  }

  .showcase-card-price {
    font-size: 1.1rem;
  }
}

.featured-star {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #3D2800;
  background: var(--accent);
  border-radius: 8px;
  font-weight: 900;
  font-size: 1rem;
}

.featured-card strong {
  display: block;
  max-width: 240px;
  margin: 36px 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.featured-card span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
}

.featured-card .price {
  margin-top: 16px;
  color: var(--primary);
  font-size: 1.3rem;
  font-weight: 900;
}

.slider-actions {
  display: flex;
  gap: 8px;
}

/* ══════════════════════════════════════════════
   NEDEN KOLEKSİYONERLER
══════════════════════════════════════════════ */
.why-section {
  background: #ffffff;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.why-card {
  padding: 28px 22px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: var(--transition);
}

.why-card:hover {
  border-color: var(--primary-mid);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 50%;
}

.why-icon svg {
  width: 26px;
  height: 26px;
}

.why-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--primary);
}

.why-card p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.testimonial {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 24px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.testimonial:hover {
  border-color: var(--primary-mid);
  box-shadow: var(--shadow);
}

.testimonial blockquote {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.65;
  font-style: italic;
}

.testimonial blockquote::before {
  content: '"';
  font-size: 2rem;
  color: var(--primary);
  line-height: 0;
  vertical-align: -0.5rem;
  margin-right: 4px;
  font-style: normal;
}

.testimonial figcaption {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════ */
.cta-section {
  background: linear-gradient(135deg, var(--primary-light) 0%, #F5F8FF 100%);
}

.cta-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 48px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.cta-box h2 {
  color: var(--primary);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.site-footer {
  padding-block: 56px 28px;
  color: #e2e8f0;
  background: #001A4D;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-logo {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  display: block;
}

.footer-logo[src=""],
.footer-logo:not([src]) {
  display: none;
}

.footer-tagline {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.6;
  max-width: 240px;
}

.footer-brand-fallback {
  display: none;
  font-size: 1.05rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
}

.footer-nav-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-nav-group strong {
  color: #e2e8f0;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-nav-group nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-group a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
  font-weight: 500;
  transition: color 160ms ease;
}

.footer-nav-group a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 24px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.82rem;
}

/* ══════════════════════════════════════════════
   BADGE & STATUS
══════════════════════════════════════════════ */
.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.badge.member-gold {
  color: #553d00;
  background: var(--gold-soft);
  border-color: #e5bd47;
}

.badge.member-platinum {
  color: #243447;
  background: var(--platinum-soft);
  border-color: var(--platinum);
}

.badge-boost {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 5px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════
   FORMLAR (Genel)
══════════════════════════════════════════════ */
.field {
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
  font-weight: 600;
}

.field span,
.field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.field.wide {
  grid-column: 1 / -1;
}

.field input,
.field select,
.field textarea,
.filter-group input,
.filter-group select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  font-size: 0.95rem;
  transition: border-color 160ms, box-shadow 160ms;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.filter-group input:focus,
.filter-group select:focus,
.hero-search input:focus,
.hero-search select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 59, 149, 0.12) !important;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--muted);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.form-message {
  margin: 0;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ══════════════════════════════════════════════
   AUTH SAYFASI (Giriş / Kayıt)
══════════════════════════════════════════════ */
.auth-page {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  background: linear-gradient(135deg, #001F5C 0%, #003B95 50%, #0057D9 100%);
}

.auth-card {
  width: min(480px, 100%);
  padding: 40px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

.auth-card h1 {
  font-size: 1.9rem;
  margin-bottom: 6px;
  color: var(--primary);
}

.auth-card .auth-sub {
  color: var(--muted);
  margin-bottom: 32px;
  font-size: 0.95rem;
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-footer-link {
  text-align: center;
  margin-top: 24px;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-footer-link a {
  color: var(--primary);
  font-weight: 700;
}

.auth-footer-link a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════
   PROFİL SAYFASI
══════════════════════════════════════════════ */
.profile-section {
  background: var(--bg);
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.profile-panel {
  padding: 24px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.profile-panel:hover {
  box-shadow: var(--shadow);
}

.profile-panel:first-child {
  background: linear-gradient(135deg, var(--primary-light), #ffffff);
  border-color: var(--primary-mid);
}

.avatar {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  font-weight: 900;
  box-shadow: 0 4px 16px rgba(0, 59, 149, 0.25);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.profile-stats span {
  padding: 12px 8px;
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.profile-stats strong {
  display: block;
  color: var(--primary);
  font-size: 1.1rem;
}

/* ══════════════════════════════════════════════
   PAZAR YERİ SAYFASI
══════════════════════════════════════════════ */
.marketplace-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.filter-sidebar {
  position: sticky;
  top: 86px;
  padding: 22px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.filter-sidebar h3 {
  margin-bottom: 18px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.filter-group {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.filter-group label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-soft);
  display: block;
}

.filter-check-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-check-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft);
}

.filter-check-list label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ══════════════════════════════════════════════
   FORUM SAYFASI
══════════════════════════════════════════════ */
.forum-page-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.forum-sidebar {
  position: sticky;
  top: 86px;
}

.forum-sidebar-cats {
  padding: 18px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 4px;
}

.forum-sidebar-cats h3 {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 12px;
}

.forum-cat-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  transition: var(--transition);
}

.forum-cat-link:hover,
.forum-cat-link.active {
  background: var(--primary-light);
  color: var(--primary);
}

.forum-topic-list {
  display: grid;
  gap: 12px;
}

.forum-topic-card {
  padding: 20px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  transition: var(--transition);
}

.forum-topic-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.topic-category-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--primary-light);
  border-radius: 6px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.topic-stats {
  display: flex;
  gap: 14px;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 8px;
}

.topic-meta {
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Chip & Forum cat */
.chip,
.forum-cat {
  color: var(--ink-soft);
  background: #f8fbff;
  border-color: var(--line);
  font-size: 0.875rem;
}

.chip.active,
.forum-cat.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* ══════════════════════════════════════════════
   İLAN VER SAYFASI
══════════════════════════════════════════════ */
.ilan-page {
  background: var(--bg);
}

.listing-form {
  width: min(980px, calc(100% - 40px));
  margin-inline: auto;
  display: grid;
  gap: 20px;
  padding: 28px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.option-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: var(--primary-light);
  border: 1.5px solid var(--primary-mid);
  border-radius: var(--radius);
}

.option-strip label,
.legal-consent label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
}

.pricing-box {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(150px, 1fr));
  gap: 14px;
  align-items: stretch;
  padding: 20px;
  background: linear-gradient(135deg, #fffdf5, #ffffff);
  border: 1.5px solid #f2d17c;
  border-radius: var(--radius-lg);
}

.boost-option {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 90px;
  padding: 14px;
  background: #ffffff;
  border: 1.5px solid #eed18b;
  border-radius: var(--radius);
  transition: var(--transition);
}

.boost-option:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(255, 183, 0, 0.15);
}

.boost-option strong {
  grid-column: 2;
  color: var(--primary);
  font-size: 1.05rem;
}

.payment-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.payment-note span {
  display: block;
  margin-top: 4px;
  font-weight: 800;
}

.legal-consent {
  padding: 16px;
  color: var(--ink-soft);
  background: #f8fafc;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}

/* ══════════════════════════════════════════════
   PAKETLER SAYFASI
══════════════════════════════════════════════ */
.package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.package-card {
  display: grid;
  gap: 14px;
  padding: 28px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-xl);
  transition: var(--transition);
}

.package-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.package-card.gold-plan {
  border-color: var(--gold);
  background: linear-gradient(135deg, #fffaf0, #ffffff);
}

.package-card.platinum-plan {
  border-color: var(--platinum);
  background: linear-gradient(135deg, #f2f5f9, #ffffff);
}

.package-card.selected-tier {
  box-shadow: 0 0 0 3px rgba(0, 59, 149, 0.20);
}

.package-label {
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  color: var(--ink-soft);
  background: #f8fafc;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.package-price {
  margin-bottom: 0;
  color: var(--primary);
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.package-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.8;
}

.membership-note {
  margin-top: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-weight: 600;
}

.membership-status,
.forum-quota {
  padding: 14px 18px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-weight: 600;
}

.forum-quota {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* ══════════════════════════════════════════════
   ADMIN
══════════════════════════════════════════════ */
.admin-section {
  background: linear-gradient(180deg, var(--bg), #ffffff);
}

.admin-shell {
  display: grid;
  gap: 20px;
}

.admin-login,
.admin-dashboard {
  padding: 24px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}

.admin-login {
  width: min(520px, 100%);
  display: grid;
  gap: 16px;
}

.admin-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.admin-stat {
  padding: 18px;
  background: #f8fafc;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.admin-stat:hover {
  box-shadow: var(--shadow-sm);
}

.admin-stat strong {
  display: block;
  color: var(--primary);
  font-size: 1.5rem;
  font-weight: 900;
}

.admin-member-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
  margin-bottom: 18px;
  background: var(--primary-light);
  border: 1.5px solid var(--primary-mid);
  border-radius: var(--radius);
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}

.admin-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  background: var(--surface);
}

.admin-table th,
.admin-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: var(--ink-soft);
  background: #f8fafc;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table tr:hover td {
  background: var(--bg);
}

.admin-table select {
  min-height: 38px;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}

/* ══════════════════════════════════════════════
   PAGE HERO (İç sayfalar)
══════════════════════════════════════════════ */
.page-hero {
  padding: 60px 0 44px;
  background: linear-gradient(135deg, var(--primary-light) 0%, #F5F8FF 100%);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin-bottom: 10px;
  color: var(--primary);
}

.page-hero p {
  color: var(--muted);
  max-width: 600px;
  margin: 0;
}

/* ══════════════════════════════════════════════
   HAKKIMIZDA
══════════════════════════════════════════════ */
.about-section,
.craft-section {
  background: linear-gradient(180deg, #F5F8FF, #ffffff);
}

.about-hero {
  padding: 72px 0;
  background: linear-gradient(135deg, var(--primary-light) 0%, #F5F8FF 100%);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.team-card {
  padding: 28px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: var(--transition);
}

.team-card:hover {
  border-color: var(--primary-mid);
  box-shadow: var(--shadow);
}

.team-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 auto 14px;
  box-shadow: 0 4px 16px rgba(0, 59, 149, 0.25);
}

/* ══════════════════════════════════════════════
   İLETİŞİM
══════════════════════════════════════════════ */
.contact-page-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}

.contact-info-card {
  padding: 32px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}

.contact-form {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}

.contact-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.contact-info-item:last-child {
  border-bottom: 0;
}

.contact-info-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: start;
}

.contact-layout p {
  color: var(--ink-soft);
}

/* ══════════════════════════════════════════════
   SPLIT LAYOUT
══════════════════════════════════════════════ */
.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: start;
}

.split-layout p {
  color: var(--ink-soft);
}

.craft-list {
  display: grid;
  gap: 12px;
}

.craft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.mini-product {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  transition: var(--transition);
}

.mini-product:hover {
  border-color: var(--primary-mid);
  box-shadow: var(--shadow-sm);
}

.mini-product img {
  width: 96px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ══════════════════════════════════════════════
   TRUST / MISSION
══════════════════════════════════════════════ */
.trust-section {
  background: #ffffff;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.trust-item {
  display: grid;
  gap: 8px;
  padding: 20px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.trust-item:hover {
  border-color: var(--primary-mid);
  box-shadow: var(--shadow-sm);
}

.trust-item span {
  color: var(--muted);
}

.mission-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.mission-grid div {
  display: grid;
  gap: 8px;
  padding: 20px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}

.mission-grid span {
  color: var(--muted);
}

/* ══════════════════════════════════════════════
   MARKET TOOLS
══════════════════════════════════════════════ */
.market-tools {
  margin-bottom: 24px;
  padding: 18px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* ══════════════════════════════════════════════
   FORUM GENEL
══════════════════════════════════════════════ */
.forum-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
}

.forum-cats,
.topic-list {
  display: grid;
  gap: 10px;
  align-content: start;
}

.forum-cat {
  justify-content: flex-start;
}

.forum-ad {
  padding: 16px;
  color: #5b4200;
  background: #fff7db;
  border: 1.5px solid #efd17b;
  border-radius: var(--radius);
  font-weight: 700;
}

.topic-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}

.topic-item h3,
.topic-item p:last-child {
  margin-bottom: 0;
}

.topic-item p:last-child {
  color: var(--muted);
}

.topic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.reply-form {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
}

/* ══════════════════════════════════════════════
   DIALOG / MODAL
══════════════════════════════════════════════ */
.product-dialog {
  width: min(920px, calc(100% - 24px));
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.30);
}

.product-dialog::backdrop {
  background: rgba(15, 23, 42, 0.60);
  backdrop-filter: blur(4px);
}

.content-dialog {
  width: min(760px, calc(100% - 32px));
  max-height: min(86vh, 900px);
  overflow: auto;
  border: 0;
  border-radius: var(--radius-xl);
  padding: clamp(22px, 4vw, 36px);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.content-dialog::backdrop {
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(4px);
}

.dialog-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1.4rem;
  cursor: pointer;
  transition: var(--transition);
}

.dialog-close:hover {
  background: var(--bg);
  border-color: var(--primary-mid);
}

.dialog-body {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0;
}

.dialog-gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 10px;
  overflow-x: auto;
  margin: 8px 0 24px;
  border-radius: var(--radius-lg);
  min-height: 100%;
  background: var(--line-soft);
}

.dialog-gallery img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.dialog-info {
  display: grid;
  gap: 14px;
  padding: 28px;
}

.dialog-price {
  color: var(--primary);
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.seller-box,
.legal-box {
  padding: 16px;
  background: #f8fafc;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}

.seller-box p,
.legal-box p {
  margin-bottom: 4px;
}

.seller-contact-box {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--primary-light);
  border: 1.5px solid var(--primary-mid);
  border-radius: var(--radius);
}

.seller-contact-box h3 {
  margin: 0;
  color: var(--primary);
  font-size: 1rem;
}

.seller-contact-box p {
  margin: 0;
  color: var(--ink-soft);
}

.seller-phone-link {
  justify-content: flex-start;
  width: fit-content;
  min-height: 42px;
  max-width: 100%;
  white-space: normal;
}

.mobile-bottom-nav {
  display: none;
}

.dialog-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dialog-actions,
.stack-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.topic-author,
.forum-reply time {
  color: var(--muted);
  font-size: 0.86rem;
}

.topic-content {
  padding: 20px;
  margin: 18px 0 28px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: #f8fafc;
  line-height: 1.75;
}

.reply-list {
  display: grid;
  gap: 12px;
  margin: 14px 0 24px;
}

.forum-reply {
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.forum-reply time {
  float: right;
}

.forum-reply p {
  margin: 10px 0 0;
}

.listing-detail-button {
  margin-top: 12px;
}

/* ── Ürün kartı: görsel container (v=20260626-card) ── */
.product-img {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.product-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--line-soft);
}

/* ── Ürün kartı: görsel placeholder (tüm ekranlar) ── */
.product-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

/* ══════════════════════════════════════════════
   REKLAM ALANI (ad-slot) — anasayfa/pazar yeri/forum
   ortak bileşeni. Aktif reklam yoksa JS bu container'ı
   display:none bırakır, hiçbir zaman boş kutu göstermez.
══════════════════════════════════════════════ */
.ad-slot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-block: 8px 32px;
}

.ad-slot-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1.5px dashed var(--primary-mid);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--ink);
  transition: var(--transition);
}

.ad-slot-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.ad-slot-label {
  position: absolute;
  top: -9px;
  left: 14px;
  padding: 2px 8px;
  background: var(--accent);
  color: #3D2800;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ad-slot-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.ad-slot-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ad-slot-body strong {
  font-size: 0.92rem;
  color: var(--ink);
}

.ad-slot-body span {
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Reklam alanı mobil alt navigasyonun ASLA arkasına/üstüne geçmemeli —
   normal doküman akışında olduğu için (position:fixed değil) bu zaten
   garanti, ekstra alt boşluk da sağlıyoruz. */
@media (max-width: 768px) {
  .ad-slot {
    margin-bottom: 24px;
  }
}

/* ── Favori kalbi butonu (tüm ekranlar) — buzlu cam (backdrop-blur)
   görünümü, sabit boyut/pozisyon (kart sağ üst köşesi) ── */
.product-fav-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  font-size: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  padding: 0;
  color: var(--muted);
  transition: color 150ms, background 150ms;
}

.product-fav-btn.active,
.product-fav-btn:hover {
  color: #e11d48;
  background: #fff;
}

/* ══════════════════════════════════════════════
   SOSYAL & MISC
══════════════════════════════════════════════ */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.social-row a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  color: var(--primary);
  background: var(--primary-light);
  border: 1.5px solid var(--primary-mid);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.875rem;
  transition: var(--transition);
}

.social-row a:hover {
  background: #D8E8FF;
  border-color: var(--primary);
}

.slogan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.slogan-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 700;
}

.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.option-strip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.clean-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.clean-list li {
  padding-block: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.clean-list li:last-child {
  border-bottom: 0;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 48px 24px;
  color: var(--muted);
  background: var(--surface);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}

.empty-state h3 {
  margin-bottom: 8px;
  color: var(--ink-soft);
}

.loading-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  font-size: 1rem;
}

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.faq-list details {
  padding: 16px 18px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}

.faq-list details[open] {
  border-color: var(--primary-mid);
  box-shadow: var(--shadow-sm);
}

.faq-list summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
}

.faq-list p {
  margin: 12px 0 0;
  color: var(--ink-soft);
}

/* ══════════════════════════════════════════════
   PAKETLER KARŞILAŞTIRMA
══════════════════════════════════════════════ */
.packages-compare {
  overflow-x: auto;
  margin-top: 28px;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compare-table th,
.compare-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
}

.compare-table th {
  background: #f8fafc;
  font-size: 0.82rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}

.compare-table tr:last-child td {
  border-bottom: 0;
}

.compare-table .check {
  color: var(--primary);
  font-weight: 900;
}

.compare-table .cross {
  color: #cbd5e1;
}

/* ══════════════════════════════════════════════
   PAGİNATION
══════════════════════════════════════════════ */
.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 36px;
  flex-wrap: wrap;
}

.pagination button {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: var(--transition);
}

.pagination button:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.pagination button.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 59, 149, 0.25);
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════
   MOBİL GENEL — Yatay taşma önleme + kaydırma
══════════════════════════════════════════════ */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* overscroll-behavior-y:contain BURADA KASITLI OLARAK YOK (2026-08-14).
   Önceden masaüstünde koşulsuz uygulanıp mouse wheel scroll'u tamamen
   kilitlediği için (hover:none)+(pointer:coarse) ile sadece dokunmatik
   cihazlara daraltılmıştı — ama aynı özellik dokunmatik cihazlarda da
   sayfa alt/üst sınırına ulaşınca dokunmatik scroll'un tamamen tepkisiz
   kalmasına (donmuş gibi görünmesine) sebep olduğu canlıda doğrulandı.
   Kaybedilen tek şey sayfa sınırında pull-to-refresh/scroll-chaining'in
   üst pencereye sıçraması — bunun bedeli, scroll'un kendisinin bozulmasından
   çok daha küçük, o yüzden özellik html/body'den tamamen kaldırıldı. */

/* Tüm görseller taşmasın */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Tablolar mobilde kaydırılabilir olsun */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .why-grid,
  .stats-grid,
  .stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-bar-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .marketplace-layout,
  .forum-page-layout {
    grid-template-columns: 1fr;
  }

  .filter-sidebar,
  .forum-sidebar {
    position: static;
  }

  .profile-grid,
  .trust-grid,
  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-box,
  .admin-member-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Mobil Alt Navigasyon ── */
  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
    height: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav__item {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    transition: color 150ms, background 150ms;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav__item:hover,
  .mobile-bottom-nav__item:focus-visible {
    color: var(--primary);
    background: var(--primary-light);
    outline: none;
  }

  .mobile-bottom-nav__item.active {
    color: var(--primary);
  }

  .mobile-bottom-nav__icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .mobile-bottom-nav__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Orta "İlan Ver" öğesi — mockup'taki gibi kabartılmış mavi dairesel FAB.
     Etiket metni FAB'ın altında sığmadığı için gizlenir (aria-label zaten
     ekran okuyucular için mevcut). */
  .mobile-bottom-nav__item--primary {
    color: var(--primary);
  }

  .mobile-bottom-nav__item--primary .mobile-bottom-nav__icon {
    width: 46px;
    height: 46px;
    margin-top: -20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 59, 149, 0.35);
  }

  .mobile-bottom-nav__item--primary span:last-child {
    display: none;
  }

  .mobile-bottom-nav__item--primary:hover,
  .mobile-bottom-nav__item--primary:focus-visible {
    background: transparent;
  }

  .mobile-bottom-nav__item--primary {
    color: #3d2800;
    background: var(--accent);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(255, 183, 0, 0.35);
  }

  .mobile-bottom-nav__item--primary:hover,
  .mobile-bottom-nav__item--primary:focus-visible {
    color: #3d2800;
    background: var(--accent-hover);
  }

  .mobile-bottom-nav__item--primary.active {
    color: #3d2800;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .nav-wrap {
    height: auto;
    flex-wrap: wrap;
    padding-block: 14px;
  }

  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 0 12px;
    background: #002d7a;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links a {
    height: auto;
    padding: 12px 16px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
  }

  .nav-links a:last-child {
    border-bottom: 0;
  }

  .hero {
    min-height: clamp(380px, 55vh, 500px);
  }

  .hero-content {
    padding-block: 48px;
  }

  .hero-search {
    grid-template-columns: 1fr;
    border-radius: var(--radius-lg);
  }

  .hero-search input,
  .hero-search select {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .hero-search .btn.primary {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  .hero-sell-cta {
    align-items: stretch;
  }

  .hero-sell-cta .btn,
  .hero-sell-cta p {
    width: 100%;
  }

  .section-heading,
  .split-layout,
  .contact-layout,
  .forum-layout,
  .dialog-body {
    grid-template-columns: 1fr;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-grid,
  .package-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-row,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .dialog-gallery img {
    min-height: 260px;
  }

  .cta-box {
    grid-template-columns: 1fr;
    padding: 32px;
  }

  .contact-page-layout {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {

  .wrap,
  .nav-wrap {
    width: min(100% - 24px, 1200px);
  }

  .section {
    padding-block: 56px;
  }

  .hero-content {
    padding-block: 40px;
  }

  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .package-grid,
  .profile-grid,
  .testimonial-grid,
  .trust-grid,
  .admin-stats,
  .why-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* ── MOBİL PAZAR YERİ: 2 sütun Dolap tarzı kompakt kart ── */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Kart görsel oranı — tek yetkili tanım 768px bloğunda (.product-img),
     burada tekrar edilmiyor (çakışan iki farklı orana yol açıyordu). */
  .product-card img {
    background: #eef3f9;
  }

  /* Görsel yoksa placeholder */
  .product-card .product-img-placeholder {
    background: #eef3f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
  }

  /* Kart içerik alanı: kompakt padding */
  .product-body {
    padding: 8px 9px 10px;
    gap: 5px;
  }

  /* Başlık: 2 satır max, küçük font
     NOT: .product-title-row'un display değeri burada artık ayarlanmıyor —
     768px bloğundaki tek yetkili kural (display:flex;flex-direction:column
     !important) tüm mobil genişliklerde geçerli, çakışan tekrar tanımlar
     kaldırıldı. */
  .product-title-row h3 {
    font-size: 13px;
    line-height: 1.25;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 32px;
    margin: 0 0 4px;
    white-space: normal;
  }

  /* Fiyat: büyük ve net */
  .product-price {
    font-size: 15px !important;
    font-weight: 800;
    color: #003f9e;
    margin-top: 2px;
    white-space: normal;
    display: block;
  }

  /* Meta etiketler: küçük — tek satır, sığmayan etiket kırpılır (kart
     yüksekliği taşan/kayan etiketlerden etkilenmesin) */
  .product-meta {
    font-size: 11px;
    gap: 4px;
    margin-top: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .product-meta .badge {
    font-size: 10px;
    padding: 2px 6px;
    min-height: 20px;
  }

  /* Kullanıcı adı satırı: font-size ve margin-top artık .product-seller
     sınıfı üzerinden (768px bloğunda) tek yerden yönetiliyor — burada
     tekrar tanımlanmıyor (yüksek özgüllükle onu ezmesin diye). */

  /* Kart butonları: gizle (karta tıklama yeterli) */
  .product-card .btn,
  .product-card button.listing-detail-button {
    display: none !important;
  }

  /* Kart tıklanabilir */
  .product-card {
    cursor: pointer;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    border: 1px solid #e5eaf2;
  }

  /* Favori kalbi: görselin sağ üstünde — buzlu cam görünümü ana
     .product-fav-btn kuralıyla (styles.css üstte) tutarlı */
  .product-card .product-fav-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    padding: 0;
    color: var(--muted);
    transition: color 150ms, background 150ms;
  }

  .product-card .product-fav-btn.active,
  .product-card .product-fav-btn:hover {
    color: #e11d48;
    background: #fff;
  }

  /* Öne çıkan badge: mobilde küçük */
  .product-card.featured::before {
    font-size: 0.65rem;
    padding: 3px 7px;
    top: 8px;
    left: 8px;
  }

  .product-card.gold-member::after,
  .product-card.platinum-member::after {
    font-size: 0.65rem;
    padding: 3px 7px;
    top: 8px;
    right: 8px;
  }

  .stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .hero-stats {
    gap: 8px;
  }

  .featured-track {
    grid-auto-columns: minmax(250px, 86vw);
  }

  .topic-item,
  .footer-content {
    display: grid;
    grid-template-columns: 1fr;
  }

  .product-actions,
  .dialog-buttons,
  .profile-stats {
    grid-template-columns: 1fr;
  }

  .mini-product {
    grid-template-columns: 80px 1fr;
  }

  .mini-product img {
    width: 80px;
  }

  .listing-form {
    width: min(100% - 24px, 980px);
    padding: 18px;
  }

  .admin-toolbar,
  .forum-quota {
    display: grid;
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .cta-box {
    padding: 24px;
  }

  .auth-card {
    padding: 28px 22px;
  }
}

@media (min-width: 640px) {
  .dialog-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBİL ALT NAVİGASYON — 5 öğeli, iOS safe-area destekli
   v=20260625-responsive
   ═══════════════════════════════════════════════════════════════ */

/* overflow-x global fix — zaten yukarıda tanımlı, tekrar etmeye gerek yok */

/* ═══════════════════════════════════════════════════════════════
   DOLAP TARZI PAZAR YERİ — Sana Özel + 2 Sütun Kart
   v=20260626-dolap
   ═══════════════════════════════════════════════════════════════ */

/* ── MOBİL 2 SÜTUN KART — 4 kart ekranda (v=20260627-4card-v2) ── */
@media (max-width: 768px) {

  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 0 7px calc(140px + env(safe-area-inset-bottom)) !important;
  }

  .product-card {
    height: 100% !important;
    min-width: 0 !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-sm) !important;
  }

  /* NOT: hem ana sayfa hem pazar yeri artık aynı .product-img sarmalayıcı
     yapısını kullanıyor (bkz. script.js homeListingCard) — eski
     ".product-card>div:first-child" yedek seçicisine artık gerek yok,
     kaldırıldı (yanlış elemente denk gelme riski taşıyordu). */
  .product-img,
  .product-img-placeholder {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
  }

  .product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Görsel yüklenemediğinde (bkz. card()'daki onerror) — yukarıdaki
     "display:block !important" kuralı JS'in inline style.display='none'
     ile gizleme denemesini eziyordu (!important her zaman inline style'ı
     yener), bu yüzden kırık resim ikonu placeholder'ın ÜSTÜNDE görünmeye
     devam ediyordu. Sınıf bazlı bu kural, aynı !important ağırlığında ama
     daha yüksek özgüllükte olduğu için doğru şekilde kazanır. */
  .product-img img.img-load-failed {
    display: none !important;
  }

  .product-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding: 8px 9px 10px !important;
    gap: 4px !important;
  }

  .product-title-row {
    display: block !important;
  }

  /* NOT: line-clamp SADECE başlık metnine uygulanır, kapsayıcıya değil —
     kapsayıcıya uygulanınca fiyat da içine sıkışıp kırpılabiliyordu.
     min/max-height em cinsinden: 1 satırlık kısa başlıkla 2 satırlık uzun
     başlık AYNI alanı kaplasın, kart yüksekliği içerikten etkilenmesin. */
  .product-title-row h3,
  .product-title {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    font-weight: var(--font-semibold) !important;
    margin: 0 !important;
    min-height: 2.5em !important;
    max-height: 2.5em !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .product-meta {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    min-width: 0 !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    gap: 3px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .product-meta .badge {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 70px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .product-meta .badge-more {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .product-price {
    font-size: 13.5px !important;
    line-height: 1.15 !important;
    font-weight: var(--font-bold) !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
  }

  .product-seller {
    font-size: 10px !important;
    margin-top: auto !important;
    padding-top: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 0 !important;
  }

  .product-fav-btn {
    width: 25px !important;
    height: 25px !important;
    top: 5px !important;
    right: 5px !important;
    font-size: 13px !important;
    z-index: 5 !important;
  }

  .product-actions,
  .listing-card-actions,
  .listing-detail-button {
    display: none !important;
  }

  /* Marketplace layout — sidebar gizle */
  .marketplace-layout {
    display: block !important;
  }

  .filter-sidebar {
    display: none !important;
  }

  .marketplace-layout>div {
    padding: 0 !important;
  }

  /* Sayfa hero küçült */
  .page-hero {
    padding: 16px 0 12px !important;
  }

  .page-hero h1 {
    font-size: 1.3rem !important;
  }

  .page-hero p {
    font-size: 0.82rem !important;
  }

  /* Filtre araçları */
  .market-tools {
    padding: 0 10px !important;
  }

  .filter-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .filter-row .field:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Chip row yatay scroll */
  .chip-row {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .chip-row::-webkit-scrollbar {
    display: none !important;
  }

  .section {
    padding-top: 12px !important;
  }
}

/* Cok kucuk ekran — 390px ve alti (v=20260627-4card-v2) */
@media (max-width: 390px) {
  .product-grid {
    gap: 6px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .product-body {
    padding: 4px 5px 5px !important;
  }

  .product-title-row h3,
  .product-title {
    font-size: 11px !important;
  }

  .product-price {
    font-size: 13px !important;
  }

  .product-fav-btn {
    width: 23px !important;
    height: 23px !important;
    font-size: 12px !important;
  }
}

/* Masaüstünde "İlanı İncele" butonu görünsün */
@media (min-width: 769px) {
  .listing-detail-button {
    display: inline-flex !important;
  }
}
/* ===== MOBiL FiLTRE BOTTOM-SHEET (v=20260627-mobile-filter) ===== */

/* Mobil filtre bar — sadece mobilde gorunur */
.mobile-filter-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 4px;
  flex-wrap: wrap;
}

.mobile-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: #003b95;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.mobile-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.mobile-active-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Overlay */
.mobile-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90000;
  background: rgba(0,0,0,0.55);
  -webkit-tap-highlight-color: transparent;
}

.mobile-filter-overlay.open {
  display: block;
}

/* Sheet */
.mobile-filter-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90001;
  background: #fff;
  border-radius: 20px 20px 0 0;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
  will-change: transform;
}

.mobile-filter-sheet.open {
  transform: translateY(0);
}

.mobile-filter-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

.mobile-filter-sheet-header strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}

.mobile-filter-sheet-close {
  width: 34px;
  height: 34px;
  border: 1.5px solid #e2e8f0;
  border-radius: 50%;
  background: #f8fafc;
  color: #64748b;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-filter-sheet-body {
  padding: 16px 20px;
  display: grid;
  gap: 16px;
}

.mobile-filter-group {
  display: grid;
  gap: 6px;
}

.mobile-filter-group label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mobile-filter-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  color: #0f172a;
  background: #fff;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.mobile-filter-input:focus {
  border-color: #003b95;
  box-shadow: 0 0 0 3px rgba(0,59,149,0.1);
}

.mobile-filter-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-filter-price-row input {
  flex: 1;
}

.mobile-filter-price-row span {
  font-weight: 700;
  color: #94a3b8;
}

.mobile-filter-sheet-actions {
  display: grid;
  gap: 10px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #e2e8f0;
  position: sticky;
  bottom: 0;
  background: #fff;
}

.mobile-filter-sheet-actions .btn {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
}

/* Sadece mobilde goster */
@media (max-width: 768px) {
  .mobile-filter-bar {
    display: flex;
  }
}


/* ===================================================================
   MOBiL FiLTRE — Tek, temiz, cakismasiz blok
   === DU'RUMU ===
   - Desktop (>768px): trigger buton, overlay, sheet HEP GIZLI
   - Mobil (<=768px): filter-sidebar GIZLI, trigger buton GORУНUR
   - Sheet: transform ile gizlenir/acilir, display:none KULLANILMAZ
   =================================================================== */

/* ----- Desktop: mobil elemanlar gizli ----- */
@media (min-width: 769px) {
    .mobile-filter-trigger-row,
    #mobileFilterOpen,
    .mobile-filter-trigger,
    #mobileFilterOverlay,
    #mobileFilterSheet {
        display: none !important;
    }
}

/* ----- Mobil: sidebar gizle, trigger goster ----- */
@media (max-width: 768px) {
    .filter-sidebar {
        display: none !important;
    }

    .mobile-filter-trigger-row {
        display: block !important;
        padding: 10px 16px 10px;
        width: 100%;
        box-sizing: border-box;
    }

    #mobileFilterOpen,
    .mobile-filter-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
        min-height: 50px;
        padding: 13px 20px;
        background: linear-gradient(135deg, #003b8f, #0057c2);
        color: #fff;
        border: none;
        border-radius: 14px;
        font-weight: 800;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0, 45, 120, 0.24);
        -webkit-tap-highlight-color: transparent;
        letter-spacing: 0.01em;
        font-family: inherit;
    }

    #mobileFilterOpen:active,
    .mobile-filter-trigger:active {
        transform: scale(0.97);
        box-shadow: 0 4px 10px rgba(0, 45, 120, 0.18);
    }
}

/* ----- Trigger row: varsayilan gizli (media query disinda) ----- */
.mobile-filter-trigger-row {
    display: none;
}

/* ====== MOBILE_FILTER_FIX_20260627_001 ====== */
@media (max-width: 768px) {
  .filter-sidebar { display: none !important; }
  .mobile-filter-trigger-row { display: block !important; width: 100%; }
  .mobile-filter-trigger, #mobileFilterOpen {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
    width: calc(100% - 32px) !important; margin: 12px 16px 14px !important;
    min-height: 52px; border: 0 !important; border-radius: 14px !important;
    background: linear-gradient(135deg, #003b8f, #0057c2) !important;
    color: #fff !important; font-weight: 900 !important; font-size: 16px !important;
    box-shadow: 0 8px 20px rgba(0,45,120,.22) !important;
    cursor: pointer; box-sizing: border-box; font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  #mobileFilterOpen:active, .mobile-filter-trigger:active { transform: scale(0.97); }
  .mobile-filter-overlay {
    display: none !important; position: fixed !important; inset: 0 !important;
    background: rgba(5,18,45,.48) !important; z-index: 90000 !important;
  }
  .mobile-filter-overlay.open { display: block !important; }
  .mobile-filter-sheet {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 90001 !important; background: #fff !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 18px 18px calc(26px + env(safe-area-inset-bottom)) !important;
    max-height: 86vh !important; overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateY(110%) !important; transition: transform .25s ease !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.18) !important;
    display: block !important; pointer-events: auto !important; will-change: transform;
  }
  .mobile-filter-sheet.open { transform: translateY(0) !important; }
  .mobile-filter-header {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; margin-bottom: 14px !important;
  }
  .mobile-filter-header strong { font-size: 20px !important; color: #002b68 !important; }
  #mobileFilterClose {
    width: 36px !important; height: 36px !important; border: 0 !important;
    border-radius: 999px !important; background: #eef3fb !important;
    font-size: 18px !important; font-weight: 800 !important; cursor: pointer;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #333 !important;
  }

  .mobile-filter-sheet label {
    display: block !important; margin: 12px 0 6px !important;
    font-size: 13px !important; font-weight: 800 !important; color: #25364d !important;
    text-transform: uppercase !important; letter-spacing: .04em !important;
  }
  .mobile-filter-sheet input, .mobile-filter-sheet select {
    width: 100% !important; min-height: 46px !important;
    border: 1px solid #d7e1ee !important; border-radius: 12px !important;
    padding: 0 12px !important; font-size: 16px !important;
    background: #fff !important; box-sizing: border-box !important;
    -webkit-appearance: none; appearance: none; color: #1e293b !important;
  }
  .mobile-price-row {
    display: grid !important; grid-template-columns: 1fr auto 1fr !important;
    gap: 8px !important; align-items: center !important;
  }
  .mobile-price-row span { color: #94a3b8; font-weight: 600; text-align: center; }
  .mobile-filter-actions {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 10px !important; margin-top: 18px !important;
    padding-top: 16px !important; border-top: 1.5px solid #e2e8f0 !important;
  }
  #mobileApplyFilters {
    min-height: 48px !important; border: 0 !important; border-radius: 13px !important;
    background: #004aad !important; color: #fff !important;
    font-weight: 900 !important; font-size: 15px !important; cursor: pointer;
  }
  #mobileResetFilters {
    min-height: 48px !important; border: 1px solid #d7e1ee !important;
    border-radius: 13px !important; background: #fff !important;
    color: #002b68 !important; font-weight: 900 !important; font-size: 15px !important; cursor: pointer;
  }
}
@media (min-width: 769px) {
  .mobile-filter-trigger, #mobileFilterOpen, .mobile-filter-trigger-row,
  #mobileFilterOverlay, #mobileFilterSheet { display: none !important; }
}
/* ====== /MOBILE_FILTER_FIX_20260627_001 ====== */

/* MOBILE_FILTER_LIVE_FIX_20260628_002 */
@media (max-width: 768px) {
  .filter-sidebar { display: none !important; }
  #mobileFilterOpen.mobile-filter-trigger,
  .mobile-filter-trigger {
    appearance: none !important; -webkit-appearance: none !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; gap: 8px !important;
    width: calc(100% - 32px) !important; margin: 12px 16px 14px !important;
    min-height: 52px !important; border: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #003b8f, #0057c2) !important;
    color: #fff !important; font-weight: 900 !important; font-size: 16px !important;
    box-shadow: 0 8px 20px rgba(0,45,120,.22) !important;
    cursor: pointer !important; -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box !important; font-family: inherit !important;
  }
  #mobileFilterOpen.mobile-filter-trigger:active { transform: scale(0.97) !important; }
  #mobileFilterOverlay.mobile-filter-overlay {
    display: none !important; position: fixed !important; inset: 0 !important;
    background: rgba(5,18,45,.48) !important; z-index: 90000 !important;
    pointer-events: auto !important;
  }
  #mobileFilterOverlay.mobile-filter-overlay.open { display: block !important; }
  #mobileFilterSheet.mobile-filter-sheet {
    position: fixed !important; left: 0 !important; right: 0 !important;
    bottom: 0 !important; z-index: 90001 !important; background: #fff !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 18px 18px calc(26px + env(safe-area-inset-bottom)) !important;
    max-height: 86vh !important; overflow-y: auto !important;
    transform: translateY(110%) !important; transition: transform .25s ease !important;
    box-shadow: 0 -16px 40px rgba(0,0,0,.18) !important;
    display: block !important; pointer-events: auto !important;
  }
  #mobileFilterSheet.mobile-filter-sheet.open { transform: translateY(0) !important; }
  .mobile-filter-header {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; margin-bottom: 14px !important;
  }
  .mobile-filter-header strong { font-size: 20px !important; color: #002b68 !important; }
  #mobileFilterClose {
    width: 36px !important; height: 36px !important; border: 0 !important;
    border-radius: 999px !important; background: #eef3fb !important;
    font-size: 18px !important; font-weight: 800 !important; cursor: pointer !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; color: #333 !important;
  }
  .mobile-filter-sheet label {
    display: block !important; margin: 12px 0 6px !important;
    font-size: 13px !important; font-weight: 800 !important; color: #25364d !important;
    text-transform: uppercase !important; letter-spacing: .04em !important;
  }
  .mobile-filter-sheet input, .mobile-filter-sheet select {
    width: 100% !important; min-height: 46px !important;
    border: 1px solid #d7e1ee !important; border-radius: 12px !important;
    padding: 0 12px !important; font-size: 16px !important;
    background: #fff !important; box-sizing: border-box !important;
    -webkit-appearance: none !important; color: #1e293b !important;
  }
  .mobile-price-row {
    display: grid !important; grid-template-columns: 1fr auto 1fr !important;
    gap: 8px !important; align-items: center !important;
  }
  .mobile-filter-actions {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 10px !important; margin-top: 18px !important;
    padding-top: 16px !important; border-top: 1.5px solid #e2e8f0 !important;
  }
  #mobileApplyFilters {
    min-height: 48px !important; border: 0 !important; border-radius: 13px !important;
    background: #004aad !important; color: #fff !important;
    font-weight: 900 !important; font-size: 15px !important; cursor: pointer !important;
  }
  #mobileResetFilters {
    min-height: 48px !important; border: 1px solid #d7e1ee !important;
    border-radius: 13px !important; background: #fff !important;
    color: #002b68 !important; font-weight: 900 !important;
    font-size: 15px !important; cursor: pointer !important;
  }
}
@media (min-width: 769px) {
  #mobileFilterOpen, #mobileFilterOverlay, #mobileFilterSheet { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   SITE DUYURULARI — #site-announcements
   Hero bölümü içi, hero-stats'tan önce görünür.
   ═══════════════════════════════════════════════════════════════ */

#site-announcements {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.announce-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 183, 0, 0.13);
  border: 1.5px solid rgba(255, 183, 0, 0.55);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 12px 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: announceSlideIn 0.35s ease both;
}

@keyframes announceSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════
   PAYLAŞIM TOAST — "Link kopyalandı!" bildirimi
   (iOS fallback ve Web Share API'siz tarayıcılar için)
══════════════════════════════════════════════ */
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
  transition: opacity 200ms ease, transform 200ms ease;
}

.share-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

@media (max-width: 640px) {
  .share-toast {
    left: 16px;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    transform: translateY(12px);
  }

  .share-toast--visible {
    transform: translateY(0);
  }
}

.announce-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 1px;
}

.announce-body {
  flex: 1;
  min-width: 0;
}

.announce-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px 0;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.announce-text {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 600px) {
  #site-announcements {
    margin-top: 16px;
    gap: 8px;
  }
  .announce-item {
    padding: 10px 13px;
  }
  .announce-title {
    font-size: 0.84rem;
  }
  .announce-text {
    font-size: 0.79rem;
  }
}


/* =================================================================
   FORUM MOBiL RESPONSIVE FIX - v=20260628-forum-mobile
   iPhone/Safari yatay tasma tamamen onlenir.
   ================================================================= */

/* Global: iOS Safari dahil yatay tasmayi engelle */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {

  /* -- Forum kapsayicilar: sinir icinde kal -- */
  .forum-page-layout,
  .forum-sidebar,
  .forum-sidebar-cats,
  .forum-topic-list,
  .forum-topic-card,
  .forum-ad,
  .forum-quota {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* -- Forum konu karti: yatay grid -> dikey flex -- */
  .forum-topic-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px;
    padding: 16px;
    grid-template-columns: unset !important;
    min-width: 0;
    align-items: stretch;
  }

  /* Kart icindeki yan panel (badge + buton): tam genislik */
  .forum-topic-card > div:last-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  /* -- Konu basligi ve uzun metinler kirilsin -- */
  .forum-topic-card h3,
  .forum-topic-card h2,
  .topic-category-tag,
  .forum-cat-link {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    white-space: normal;
  }

  /* -- Istatistik satiri: wrap ile tasmasin -- */
  .topic-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    width: 100%;
    max-width: 100%;
  }

  /* -- Forum reklam alani -- */
  .forum-ad {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 14px 16px;
    line-height: 1.5;
    box-sizing: border-box;
  }

  /* -- Takip Et butonu: tam genislik -- */
  .forum-topic-card .btn,
  .forum-topic-card button {
    width: 100%;
    max-width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
  }

  /* -- Sidebar: mobilde yatay scroll bar -- */
  .forum-sidebar {
    position: static !important;
    order: -1;
  }

  .forum-sidebar-cats {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--radius);
    scrollbar-width: none;
  }

  .forum-sidebar-cats::-webkit-scrollbar {
    display: none;
  }

  .forum-sidebar-cats h3 {
    display: none;
  }

  .forum-cat-link {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 0.82rem;
  }

  /* -- Sayfa alt bosluk: mobil menu icerigi kapatmasin -- */
  body {
    padding-bottom: max(90px, calc(70px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* -- Forum quota satirini duzelt -- */
  .forum-quota {
    display: block;
    font-size: 0.85rem;
    line-height: 1.5;
  }

  /* -- wrap: 100% - 20px, tasma yok -- */
  .wrap {
    width: min(100% - 20px, 1180px);
  }
}

/* -- Cok kucuk ekranlar (iPhone SE, 375px) -- */
@media (max-width: 390px) {
  .forum-topic-card {
    padding: 13px;
  }

  .forum-ad {
    padding: 11px 13px;
    font-size: 0.83rem;
  }

  .topic-stats {
    font-size: 0.78rem;
    gap: 4px 10px;
  }

  .forum-cat-link {
    padding: 6px 10px;
    font-size: 0.79rem;
  }
}

/* ===== CARD_CLICK_FIX_20260701_001 =====
   Kart tıklanabilirlik — web ve mobil garanti
   ========================================= */

/* Tüm ilan kartları tıklanabilir olmalı */
.product-card,
[data-listing-id] {
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0,59,149,0.08) !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Kart içindeki dekoratif overlay varsa tıklamayı geçir */
.product-card .card-overlay,
.product-card .image-overlay,
.product-card .listing-overlay,
.product-card .product-img-placeholder {
  pointer-events: none !important;
}

/* Kart içindeki gerçek butonlar tıklanabilir kalmalı */
.product-card button,
.product-card .product-fav-btn,
.product-card .listing-detail-button,
[data-listing-id] button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

/* Kapalı overlay/backdrop kesinlikle tıklamayı engellememeli */
.mobile-filter-overlay:not(.open),
.message-dock-overlay:not(.open),
.modal-backdrop:not(.open),
.filter-backdrop:not(.open),
.drawer-backdrop:not(.open) {
  pointer-events: none !important;
  display: none !important;
}

/* Açık overlay normal çalışır */
.mobile-filter-overlay.open,
.message-dock-overlay.open {
  pointer-events: auto !important;
}

/* mobile-bottom-nav kartların üstüne çıkmamalı */
.mobile-bottom-nav {
  pointer-events: auto;
  z-index: 9000;
}

/* Dialog (ilan detay) açıkken scroll kilidi */
body:has(dialog[open]) {
  overflow: hidden;
}