/* ==============================================================
   DIGITALOG v2 — Modern Design System
   ============================================================== */

:root {
  /* Renk Paleti */
  --dl-primary: #4f46e5;
  --dl-primary-dark: #4338ca;
  --dl-primary-light: #eef2ff;
  --dl-primary-glow: rgba(79, 70, 229, 0.15);
  --dl-accent: #f59e0b;
  --dl-accent-dark: #d97706;
  --dl-success: #10b981;
  --dl-danger: #ef4444;
  --dl-warning: #f59e0b;
  --dl-info: #0ea5e9;

  /* Nötr Tonlar */
  --dl-bg: #f8fafc;
  --dl-card: #ffffff;
  --dl-border: #e2e8f0;
  --dl-border-soft: #f1f5f9;
  --dl-text: #0f172a;
  --dl-text-soft: #475569;
  --dl-muted: #94a3b8;

  /* Glassmorphism */
  --dl-glass: rgba(255, 255, 255, 0.85);
  --dl-glass-border: rgba(255, 255, 255, 0.18);

  /* Shadows */
  --dl-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --dl-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --dl-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --dl-shadow-md: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --dl-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --dl-shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.18);
  --dl-shadow-glow: 0 0 0 4px var(--dl-primary-glow);

  /* Köşeler */
  --dl-radius-sm: 0.5rem;
  --dl-radius: 0.75rem;
  --dl-radius-lg: 1rem;
  --dl-radius-xl: 1.5rem;
  --dl-radius-2xl: 2rem;
  --dl-radius-full: 9999px;

  /* Spacing & Sizing */
  --dl-navbar-h: 72px;

  /* Geçişler */
  --dl-trans-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --dl-trans: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --dl-trans-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Tipografi */
  --dl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--dl-bg);
  color: var(--dl-text);
  font-family: var(--dl-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Animasyonlu sayfa girişi */
main, .page-content {
  animation: pageEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* AOS-style scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================================================
   NAVBAR
   ============================================================== */
.dl-navbar {
  height: var(--dl-navbar-h);
  background: var(--dl-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--dl-border-soft);
  transition: box-shadow var(--dl-trans);
}
.dl-navbar.scrolled {
  box-shadow: var(--dl-shadow);
}
.dl-navbar .navbar-brand {
  font-weight: 800;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--dl-primary), var(--dl-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.dl-navbar .nav-link {
  color: var(--dl-text-soft);
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border-radius: var(--dl-radius);
  transition: all var(--dl-trans-fast);
}
.dl-navbar .nav-link:hover {
  color: var(--dl-primary);
  background: var(--dl-primary-light);
}
.dl-search-wrap {
  position: relative;
  flex: 1;
  max-width: 480px;
}
.dl-search-input {
  width: 100%;
  height: 44px;
  padding: 0 1rem 0 2.75rem;
  background: var(--dl-bg);
  border: 1.5px solid var(--dl-border);
  border-radius: var(--dl-radius-full);
  font-size: 0.9rem;
  transition: all var(--dl-trans-fast);
}
.dl-search-input:focus {
  outline: none;
  border-color: var(--dl-primary);
  background: #fff;
  box-shadow: var(--dl-shadow-glow);
}
.dl-search-wrap i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dl-muted);
  font-size: 1.05rem;
  pointer-events: none;
}

/* ==============================================================
   BUTONLAR
   ============================================================== */
.btn {
  font-weight: 600;
  border-radius: var(--dl-radius);
  padding: 0.6rem 1.2rem;
  transition: all var(--dl-trans-fast);
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  border: 1.5px solid transparent;
}
.btn-lg { padding: 0.85rem 1.6rem; font-size: 1rem; border-radius: var(--dl-radius-lg); }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.82rem; }

.btn-primary {
  background: var(--dl-primary);
  border-color: var(--dl-primary);
}
.btn-primary:hover {
  background: var(--dl-primary-dark);
  border-color: var(--dl-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px var(--dl-primary);
}

.btn-gradient {
  background: linear-gradient(135deg, var(--dl-primary), #7c3aed);
  color: #fff;
  border: none;
}
.btn-gradient:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px var(--dl-primary);
}

.btn-accent {
  background: var(--dl-accent);
  color: #fff;
  border-color: var(--dl-accent);
}
.btn-accent:hover {
  background: var(--dl-accent-dark);
  border-color: var(--dl-accent-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px var(--dl-accent);
}

.btn-outline-primary {
  color: var(--dl-primary);
  border-color: var(--dl-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  background: var(--dl-primary);
  border-color: var(--dl-primary);
  color: #fff;
}

.btn-soft {
  background: var(--dl-primary-light);
  color: var(--dl-primary);
  border-color: transparent;
}
.btn-soft:hover {
  background: var(--dl-primary);
  color: #fff;
}

.btn-whatsapp {
  background: #25d366;
  color: #fff;
  border-color: #25d366;
}
.btn-whatsapp:hover {
  background: #1da851;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px #25d366;
}

.btn-icon-only {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Floating action */
.btn-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: var(--dl-shadow-lg);
}

/* ==============================================================
   HERO
   ============================================================== */
.dl-hero {
  position: relative;
  padding: 4rem 0 5rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, var(--dl-bg) 100%);
  overflow: hidden;
}
.dl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(79, 70, 229, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.6;
  pointer-events: none;
}
.dl-hero-content { position: relative; z-index: 2; }
.dl-hero h1 {
  font-size: clamp(1.8rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.dl-hero h1 .gradient {
  background: linear-gradient(135deg, var(--dl-primary), #7c3aed, var(--dl-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-hero .lead {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--dl-text-soft);
  max-width: 640px;
  margin: 0 auto 2rem;
}

/* Hero search */
.dl-hero-search {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--dl-radius-xl);
  padding: 0.5rem;
  box-shadow: var(--dl-shadow-xl);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dl-hero-search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  outline: none;
}
.dl-hero-stats {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.dl-hero-stat .num {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--dl-primary), var(--dl-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-hero-stat .lbl {
  font-size: 0.85rem;
  color: var(--dl-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==============================================================
   SECTIONS
   ============================================================== */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.section-title h2 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.section-title .subtitle {
  color: var(--dl-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ==============================================================
   KATEGORİ KARTLARI
   ============================================================== */
.kategori-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.kategori-card {
  background: var(--dl-card);
  border-radius: var(--dl-radius-lg);
  padding: 1.5rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--dl-text);
  border: 1.5px solid var(--dl-border-soft);
  transition: all var(--dl-trans);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.kategori-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--dl-primary-light), transparent);
  opacity: 0;
  transition: opacity var(--dl-trans);
}
.kategori-card:hover {
  transform: translateY(-4px);
  border-color: var(--dl-primary);
  box-shadow: var(--dl-shadow-md);
  color: var(--dl-primary);
}
.kategori-card:hover::before { opacity: 1; }
.kategori-card > * { position: relative; z-index: 1; }
.kategori-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--dl-radius);
  background: var(--dl-primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  transition: all var(--dl-trans);
  color: var(--dl-primary);
}
.kategori-icon i { font-size: 1.6rem; }
.kategori-icon img { width: 32px; height: 32px; object-fit: contain; }
.kategori-card:hover .kategori-icon {
  background: var(--dl-primary);
  color: #fff;
  transform: scale(1.1) rotate(-5deg);
}
.kategori-card:hover .kategori-icon img { filter: brightness(0) invert(1); }
.kategori-card .ad {
  font-weight: 600;
  font-size: 0.95rem;
}
.kategori-card .sayi {
  display: block;
  font-size: 0.78rem;
  color: var(--dl-muted);
  margin-top: 0.25rem;
}

/* ==============================================================
   İLAN KARTLARI
   ============================================================== */
.ilan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.ilan-card {
  background: var(--dl-card);
  border-radius: var(--dl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--dl-border-soft);
  transition: all var(--dl-trans);
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: var(--dl-text);
}
.ilan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dl-shadow-lg);
  border-color: var(--dl-border);
  color: var(--dl-text);
}
.ilan-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  position: relative;
}
.ilan-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dl-trans-slow);
}
.ilan-card:hover .ilan-card-img img { transform: scale(1.08); }
.ilan-card-img .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dl-muted);
  font-size: 2.5rem;
}
.ilan-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: var(--dl-radius-full);
  backdrop-filter: blur(10px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ilan-card-body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ilan-card-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.66em;
}
.ilan-card-price {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dl-primary);
  letter-spacing: -0.02em;
}
.ilan-card-meta {
  font-size: 0.78rem;
  color: var(--dl-muted);
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.4rem;
  flex-wrap: wrap;
}
.ilan-card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dl-muted); }

/* ==============================================================
   CARD GENEL
   ============================================================== */
.card {
  background: var(--dl-card);
  border: 1px solid var(--dl-border-soft);
  border-radius: var(--dl-radius-lg);
  box-shadow: var(--dl-shadow-sm);
}
.card-elevated { box-shadow: var(--dl-shadow-md); border: 0; }
.card-soft { background: var(--dl-primary-light); border: 0; }

/* ==============================================================
   FORM ELEMENTS
   ============================================================== */
.form-control, .form-select {
  height: 44px;
  border: 1.5px solid var(--dl-border);
  border-radius: var(--dl-radius);
  font-size: 0.9rem;
  padding: 0.5rem 0.85rem;
  transition: all var(--dl-trans-fast);
  background-color: #fff;
}
.form-select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 14px 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
textarea.form-control { height: auto; min-height: 100px; }
.form-control:focus, .form-select:focus {
  border-color: var(--dl-primary);
  box-shadow: var(--dl-shadow-glow);
  outline: none;
}
.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--dl-text);
  margin-bottom: 0.4rem;
}
.form-check-input:checked {
  background-color: var(--dl-primary);
  border-color: var(--dl-primary);
}
.form-switch .form-check-input { width: 2.4rem; height: 1.4rem; }

/* ==============================================================
   BADGE / TAG
   ============================================================== */
.badge {
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--dl-radius-full);
  letter-spacing: 0.02em;
}
.badge.bg-success { background: rgba(16, 185, 129, 0.12) !important; color: #065f46 !important; }
.badge.bg-warning { background: rgba(245, 158, 11, 0.12) !important; color: #92400e !important; }
.badge.bg-danger  { background: rgba(239, 68, 68, 0.12)  !important; color: #991b1b !important; }
.badge.bg-secondary, .badge.bg-dark { background: rgba(100, 116, 139, 0.12) !important; color: #334155 !important; }
.badge.bg-primary { background: rgba(79, 70, 229, 0.12) !important; color: #3730a3 !important; }
.badge.bg-info { background: rgba(14, 165, 233, 0.12) !important; color: #075985 !important; }

/* ==============================================================
   PROFILE AVATAR
   ============================================================== */
.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: var(--dl-shadow-md);
}
.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--dl-primary), #7c3aed);
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
}

/* ==============================================================
   İLAN DETAY
   ============================================================== */
.ilan-detail-img {
  border-radius: var(--dl-radius-lg);
  overflow: hidden;
  background: #f1f5f9;
}
.ilan-detail-img img { width: 100%; max-height: 540px; object-fit: contain; }
.satici-card { position: sticky; top: calc(var(--dl-navbar-h) + 16px); }

/* ==============================================================
   BREADCRUMB
   ============================================================== */
.breadcrumb {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.breadcrumb-item a { color: var(--dl-text-soft); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--dl-primary); }
.breadcrumb-item.active { color: var(--dl-text); font-weight: 500; }

/* ==============================================================
   ADMIN PANEL
   ============================================================== */
.admin-shell { display: flex; min-height: 100vh; background: var(--dl-bg); }
.admin-sidebar {
  width: 260px;
  background: #0f172a;
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}
.admin-sidebar .brand {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 1rem;
}
.admin-sidebar .brand h4 {
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0;
  background: linear-gradient(135deg, #818cf8, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.admin-sidebar a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.5rem;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--dl-trans-fast);
  border-left: 3px solid transparent;
}
.admin-sidebar a i { font-size: 1.1rem; width: 22px; }
.admin-sidebar a:hover {
  color: #fff;
  background: rgba(255,255,255,0.04);
}
.admin-sidebar a.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.2), transparent);
  border-left-color: var(--dl-primary);
}
.admin-main {
  flex: 1;
  min-width: 0;
}
.admin-topbar {
  background: #fff;
  border-bottom: 1px solid var(--dl-border-soft);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.admin-topbar h1 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}
.admin-content { padding: 2rem; }

/* Admin stat card */
.stat-card {
  background: #fff;
  border-radius: var(--dl-radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--dl-border-soft);
  position: relative;
  overflow: hidden;
  transition: transform var(--dl-trans);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--dl-shadow-md); }
.stat-card .icon {
  width: 48px;
  height: 48px;
  border-radius: var(--dl-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.stat-card.primary .icon { background: var(--dl-primary-light); color: var(--dl-primary); }
.stat-card.success .icon { background: rgba(16, 185, 129, 0.1); color: var(--dl-success); }
.stat-card.warning .icon { background: rgba(245, 158, 11, 0.1); color: var(--dl-warning); }
.stat-card.danger .icon { background: rgba(239, 68, 68, 0.1); color: var(--dl-danger); }
.stat-card .num { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stat-card .lbl { color: var(--dl-muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* Mobile sidebar toggle */
.admin-sidebar-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 1.5rem;
  color: var(--dl-text);
}
.admin-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1040;
}

@media (max-width: 991px) {
  .admin-sidebar {
    position: fixed;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform var(--dl-trans);
  }
  .admin-sidebar.show { transform: translateX(0); }
  .admin-sidebar-toggle { display: inline-flex; }
  .admin-sidebar-backdrop.show { display: block; }
  .admin-content { padding: 1.25rem; }
  .admin-topbar { padding: 0.85rem 1.25rem; }
}

/* ==============================================================
   FOOTER
   ============================================================== */
.dl-footer {
  background: linear-gradient(180deg, #0f172a, #020617);
  color: #94a3b8;
  margin-top: 5rem;
  padding-top: 3rem;
}
.dl-footer h5, .dl-footer h6 { color: #fff; font-weight: 700; }
.dl-footer a { color: #cbd5e1; text-decoration: none; transition: color var(--dl-trans-fast); }
.dl-footer a:hover { color: var(--dl-accent); }
.dl-footer .brand {
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(135deg, #818cf8, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dl-social {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.dl-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all var(--dl-trans-fast);
}
.dl-social a:hover {
  background: var(--dl-primary);
  color: #fff;
  transform: translateY(-2px);
}
.dl-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 1.5rem 0;
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.85rem;
}

/* ==============================================================
   KATEGORİ HIYERARSI SEÇIMI (AJAX)
   ============================================================== */
.cat-cascade {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cat-level {
  position: relative;
  animation: slideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cat-level select {
  /* Genel form-select stili geçerli */
}
.cat-level .lvl-label {
  font-size: 0.72rem;
  color: var(--dl-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.cat-path-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background: var(--dl-primary-light);
  border-radius: var(--dl-radius);
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.cat-path-display .chip {
  background: #fff;
  padding: 0.25rem 0.7rem;
  border-radius: var(--dl-radius-full);
  font-weight: 600;
  color: var(--dl-primary);
  font-size: 0.8rem;
}
.cat-path-display .sep { color: var(--dl-muted); }

/* ==============================================================
   ICON PICKER (admin)
   ============================================================== */
.icon-picker-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--dl-border);
  padding-bottom: 0;
}
.icon-picker-tabs button {
  background: none;
  border: 0;
  padding: 0.6rem 1rem;
  font-weight: 600;
  color: var(--dl-muted);
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--dl-trans-fast);
}
.icon-picker-tabs button.active {
  color: var(--dl-primary);
  border-bottom-color: var(--dl-primary);
}
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--dl-bg);
  border-radius: var(--dl-radius);
}
.icon-picker-grid .icon-item {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--dl-border-soft);
  border-radius: var(--dl-radius-sm);
  font-size: 1.3rem;
  color: var(--dl-text-soft);
  cursor: pointer;
  transition: all var(--dl-trans-fast);
}
.icon-picker-grid .icon-item:hover {
  border-color: var(--dl-primary);
  color: var(--dl-primary);
  transform: scale(1.05);
}
.icon-picker-grid .icon-item.selected {
  border-color: var(--dl-primary);
  background: var(--dl-primary);
  color: #fff;
}
.icon-upload-zone {
  border: 2px dashed var(--dl-border);
  border-radius: var(--dl-radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--dl-trans-fast);
}
.icon-upload-zone:hover { border-color: var(--dl-primary); background: var(--dl-primary-light); }
.icon-upload-zone i { font-size: 2.5rem; color: var(--dl-muted); }
.icon-current-preview {
  width: 64px;
  height: 64px;
  border-radius: var(--dl-radius);
  background: var(--dl-primary-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dl-primary);
  font-size: 2rem;
}
.icon-current-preview img { width: 40px; height: 40px; object-fit: contain; }

/* ==============================================================
   PILLS & TABS
   ============================================================== */
.nav-pills .nav-link {
  color: var(--dl-text-soft);
  background: transparent;
  border-radius: var(--dl-radius-full);
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  margin-right: 0.4rem;
  transition: all var(--dl-trans-fast);
}
.nav-pills .nav-link.active {
  background: var(--dl-primary);
  color: #fff;
}
.nav-pills .nav-link:not(.active):hover {
  background: var(--dl-primary-light);
  color: var(--dl-primary);
}

/* ==============================================================
   TABLE
   ============================================================== */
.table { color: var(--dl-text); }
.table > :not(caption) > * > * { padding: 0.85rem 1rem; }
.table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dl-muted);
  font-weight: 600;
  background: var(--dl-bg);
  border-bottom: 1px solid var(--dl-border);
}
.table tbody tr { transition: background var(--dl-trans-fast); }
.table tbody tr:hover { background: var(--dl-bg); }

/* ==============================================================
   ALERTS
   ============================================================== */
.alert {
  border: 0;
  border-radius: var(--dl-radius);
  padding: 0.85rem 1.1rem;
  font-size: 0.88rem;
  border-left: 4px solid;
}
.alert-success { background: rgba(16, 185, 129, 0.08); color: #065f46; border-left-color: var(--dl-success); }
.alert-danger  { background: rgba(239, 68, 68, 0.08);  color: #991b1b; border-left-color: var(--dl-danger); }
.alert-warning { background: rgba(245, 158, 11, 0.08); color: #92400e; border-left-color: var(--dl-warning); }
.alert-info    { background: rgba(14, 165, 233, 0.08); color: #075985; border-left-color: var(--dl-info); }

/* ==============================================================
   MODAL
   ============================================================== */
.modal-content {
  border: 0;
  border-radius: var(--dl-radius-lg);
  box-shadow: var(--dl-shadow-xl);
}
.modal-header { border-bottom: 1px solid var(--dl-border-soft); padding: 1.25rem 1.5rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--dl-border-soft); padding: 1rem 1.5rem; }

/* ==============================================================
   PAGINATION
   ============================================================== */
.pagination .page-link {
  border: 1.5px solid var(--dl-border);
  color: var(--dl-text);
  margin: 0 0.15rem;
  border-radius: var(--dl-radius-sm) !important;
  min-width: 40px;
  text-align: center;
  font-weight: 600;
  transition: all var(--dl-trans-fast);
}
.pagination .page-item.active .page-link {
  background: var(--dl-primary);
  border-color: var(--dl-primary);
}
.pagination .page-link:hover {
  background: var(--dl-primary-light);
  border-color: var(--dl-primary);
  color: var(--dl-primary);
}

/* ==============================================================
   FLOATING WHATSAPP
   ============================================================== */
.float-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  z-index: 999;
  box-shadow: 0 12px 24px -8px rgba(37, 211, 102, 0.5);
  text-decoration: none;
  transition: transform var(--dl-trans);
  animation: pulse 2.5s infinite;
}
.float-wa:hover { transform: scale(1.1); color: #fff; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 12px 24px -8px rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 12px 32px -4px rgba(37, 211, 102, 0.7); }
}

/* ==============================================================
   FEATURE BLOCKS (about page)
   ============================================================== */
.feature-block {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--dl-radius-lg);
  border: 1px solid var(--dl-border-soft);
  transition: all var(--dl-trans);
  height: 100%;
}
.feature-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--dl-shadow-lg);
}
.feature-block .icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: var(--dl-radius);
  background: linear-gradient(135deg, var(--dl-primary), #7c3aed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
}

/* ==============================================================
   CONTACT
   ============================================================== */
.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: #fff;
  border-radius: var(--dl-radius-lg);
  border: 1px solid var(--dl-border-soft);
  transition: all var(--dl-trans);
  margin-bottom: 1rem;
}
.contact-info-card:hover {
  border-color: var(--dl-primary);
  transform: translateX(4px);
}
.contact-info-card .ic {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--dl-radius);
  background: var(--dl-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dl-primary);
  font-size: 1.3rem;
}
.contact-info-card .tit { font-weight: 700; margin-bottom: 0.2rem; }
.contact-info-card .val { color: var(--dl-text-soft); font-size: 0.9rem; }

/* ==============================================================
   RESPONSIVE
   ============================================================== */
@media (max-width: 768px) {
  .dl-navbar { height: 64px; }
  :root { --dl-navbar-h: 64px; }
  .dl-hero { padding: 2.5rem 0 3rem; }
  .dl-hero-stats { gap: 1.5rem; margin-top: 1.5rem; }
  .dl-hero-stat .num { font-size: 1.5rem; }
  .ilan-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .kategori-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .kategori-card { padding: 1rem 0.5rem; }
  .kategori-icon { width: 44px; height: 44px; }
  .kategori-icon i { font-size: 1.3rem; }
  .kategori-card .ad { font-size: 0.82rem; }
  .satici-card { position: static; }
}
@media (max-width: 480px) {
  .ilan-card-title { font-size: 0.85rem; }
  .ilan-card-price { font-size: 1.05rem; }
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--dl-radius);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Loading spinner */
.spinner-dl {
  width: 32px; height: 32px;
  border: 3px solid var(--dl-primary-light);
  border-top-color: var(--dl-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==============================================================
   ETIKET BADGE (acil, fırsat, popüler vb.)
   ============================================================== */
.ilan-etiket {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: var(--dl-radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: tagPulse 2s ease-in-out infinite;
}
@keyframes tagPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
.ilan-etiket.acil      { background: linear-gradient(135deg, #ef4444, #dc2626); }
.ilan-etiket.firsat    { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ilan-etiket.populer   { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.ilan-etiket.onerilen  { background: linear-gradient(135deg, #10b981, #059669); }
.ilan-etiket.yeni      { background: linear-gradient(135deg, #06b6d4, #0891b2); }

/* Etiket detayda büyük */
.ilan-etiket-big {
  display: inline-block;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: var(--dl-radius-full);
  color: #fff;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==============================================================
   DROPZONE (drag-drop resim yükleme)
   ============================================================== */
.dropzone {
  border: 2px dashed var(--dl-border);
  border-radius: var(--dl-radius-lg);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--dl-trans);
  background: var(--dl-bg);
  position: relative;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--dl-primary);
  background: var(--dl-primary-light);
  transform: scale(1.01);
}
.dropzone.dragover {
  border-style: solid;
  box-shadow: 0 0 0 6px var(--dl-primary-glow);
}
.dropzone .dz-icon {
  font-size: 3rem;
  color: var(--dl-primary);
  margin-bottom: 0.5rem;
  display: block;
}
.dropzone .dz-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.dropzone .dz-hint {
  color: var(--dl-muted);
  font-size: 0.85rem;
}
.dropzone input[type=file] { display: none; }

.dz-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.dz-preview-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--dl-radius);
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid var(--dl-border);
}
.dz-preview-item img {
  width: 100%; height: 100%; object-fit: cover;
}
.dz-preview-item .dz-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px; height: 24px;
  background: rgba(15,23,42,0.85);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--dl-trans-fast);
}
.dz-preview-item .dz-remove:hover { background: var(--dl-danger); transform: scale(1.1); }
.dz-preview-item .dz-status {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.dz-preview-item.uploading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%234f46e5' stroke-width='4' stroke-linecap='round' stroke-dasharray='80' stroke-dashoffset='60'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center / 30px no-repeat;
}

/* ==============================================================
   QUICK PREVIEW (admin ilan önizleme)
   ============================================================== */
.preview-card {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}
.preview-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.preview-images img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--dl-radius-sm);
  border: 1px solid var(--dl-border);
}

/* ==============================================================
   STAT CARD CLICKABLE
   ============================================================== */
a.stat-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
a.stat-card-link:hover .stat-card {
  transform: translateY(-4px);
  box-shadow: var(--dl-shadow-lg);
}

/* ==============================================================
   DROPDOWN OVERFLOW FIX (table içinde)
   ============================================================== */
.table-responsive {
  overflow-x: auto;
  /* dropdown taşabilmesi için y overflow visible olmaz, JS ile portal kullan */
}
/* dropdown'u body'e taşımak için Bootstrap'in popper.js'i tek başına yeterli */

/* Alternatif: action-cell ile özel kontrol */
.action-cell {
  position: relative;
  white-space: nowrap;
}
.action-cell .dropdown-menu {
  z-index: 1080;
}

/* ==============================================================
   FİLTRE BAR (arama, kategori)
   ============================================================== */
.filter-bar {
  background: #fff;
  border-radius: var(--dl-radius-lg);
  padding: 1rem;
  box-shadow: var(--dl-shadow-sm);
  margin-bottom: 1.5rem;
}

/* ==============================================================
   RENK SEÇİCİ (color picker grid)
   ============================================================== */
.color-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 0.5rem;
}
.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--dl-radius);
  cursor: pointer;
  border: 3px solid transparent;
  transition: all var(--dl-trans-fast);
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.selected {
  border-color: var(--dl-text);
  box-shadow: 0 0 0 2px #fff inset;
}

/* ==============================================================
   LOGO PREVIEW (admin)
   ============================================================== */
.logo-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--dl-bg);
  border-radius: var(--dl-radius);
  border: 1px solid var(--dl-border-soft);
}
.logo-preview img {
  max-height: 64px;
  max-width: 200px;
  object-fit: contain;
}
.logo-preview .placeholder {
  width: 64px; height: 64px;
  background: var(--dl-primary-light);
  border-radius: var(--dl-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dl-primary);
  font-size: 1.5rem;
}

/* Navbar logo */
.dl-navbar .navbar-logo img {
  height: 36px;
  max-width: 160px;
  object-fit: contain;
}

/* ==============================================================
   FOOTER MODERN
   ============================================================== */
.dl-footer-wave {
  height: 60px;
  background: linear-gradient(180deg, transparent 0%, #0f172a 100%);
  margin-top: 4rem;
}
.dl-footer { margin-top: 0; padding-top: 0; }
.dl-footer .footer-grid { padding-top: 3rem; }

.dl-footer-card {
  background: rgba(255,255,255,0.04);
  border-radius: var(--dl-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
}

.footer-newsletter {
  background: linear-gradient(135deg, var(--dl-primary), #7c3aed);
  border-radius: var(--dl-radius-xl);
  padding: 2.5rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}
.footer-newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(245,158,11,0.3), transparent 60%);
  pointer-events: none;
}
.footer-newsletter h3 { color: #fff; font-weight: 800; margin: 0; }
.footer-newsletter p { color: rgba(255,255,255,0.85); }
.footer-newsletter form input {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
}
.footer-newsletter form input::placeholder { color: rgba(255,255,255,0.7); }

/* ==============================================================
   RESPONSIVE FIX - MOBİL TABLO KAYMA
   ============================================================== */
@media (max-width: 768px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-responsive table { min-width: 600px; }
  .admin-content .card { overflow: hidden; }
  .dl-hero-search { flex-direction: column; padding: 1rem; }
  .dl-hero-search input { width: 100%; }
  .dl-hero-search button { width: 100%; }
  .footer-newsletter { padding: 1.5rem; }
}

/* ==============================================================
   RAPOR / DASHBOARD (admin)
   ============================================================== */
.rapor-card {
  background: #fff;
  border-radius: var(--dl-radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--dl-border-soft);
  margin-bottom: 1rem;
}
.rapor-card h6 {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--dl-muted);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.popular-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--dl-border-soft);
}
.popular-item:last-child { border-bottom: 0; }
.popular-item .rank {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dl-primary-light);
  color: var(--dl-primary);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.popular-item .rank.gold { background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #fff; }
.popular-item .rank.silver { background: linear-gradient(135deg, #d1d5db, #9ca3af); color: #fff; }
.popular-item .rank.bronze { background: linear-gradient(135deg, #fdba74, #ea580c); color: #fff; }

/* ==============================================================
   SECTION DIVIDER
   ============================================================== */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.section-divider::before, .section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--dl-border);
}
.section-divider span {
  color: var(--dl-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}