/* ==========================================================================
   EsnafCebinde – Ortak Tasarım Sistemi (Web + Mobil)
   Mobil öncelikli; 360–430px telefon ekranı temel alınır, tablet ve masaüstüne genişler.
   Bu dosya hem Platform.Web hem de Platform.Mobile tarafından yüklenir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tasarım Belirteçleri (Design Tokens) – Açık Tema
   -------------------------------------------------------------------------- */
:root {
  /* Marka renkleri */
  --primary-50:  #eef4fb;
  --primary-100: #d8e5f6;
  --primary-200: #b3cbec;
  --primary-300: #7fa7dc;
  --primary-400: #4a82c8;
  --primary-500: #1f5fae;   /* Esnaf Mavisi */
  --primary-600: #174b8c;
  --primary-700: #123a6d;
  --primary-800: #0d2a4f;
  --primary-900: #081a32;

  --accent-50:  #fff7e8;
  --accent-100: #ffe9c2;
  --accent-200: #ffd48a;
  --accent-500: #f28c00;   /* Vurgu Turuncu */
  --accent-600: #d97600;
  --accent-700: #b35f00;

  --success-50:  #ecfdf3;
  --success-100: #d1fae5;
  --success-500: #16a34a;
  --success-600: #15803d;

  --danger-50:  #fef2f2;
  --danger-100: #fee2e2;
  --danger-500: #dc2626;
  --danger-600: #b91c1c;

  --warning-50:  #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #d97706;
  --warning-600: #b45309;

  --info-50:  #eff6ff;
  --info-100: #dbeafe;
  --info-500: #2563eb;

  /* Değerlendirme yıldızı (marka turuncusundan biraz daha sarı) */
  --star-500: #f5a623;

  /* Açık zeminli rozet ve ikon kutularında kullanılan metin renkleri.
     Koyu temada zemin koyulaştığı için bu renkler ayrıca aydınlatılır. */
  --tint-primary-fg: var(--primary-700);
  --tint-success-fg: var(--success-600);
  --tint-danger-fg:  var(--danger-600);
  --tint-warning-fg: var(--warning-600);
  --tint-accent-fg:  var(--accent-700);
  --tint-info-fg:    var(--info-500);

  --neutral-0:   #ffffff;
  --neutral-50:  #f7f8fa;
  --neutral-100: #eff1f5;
  --neutral-200: #e2e6ed;
  --neutral-300: #cbd2dd;
  --neutral-400: #98a2b3;
  --neutral-500: #667085;
  --neutral-600: #475467;
  --neutral-700: #344054;
  --neutral-800: #1d2939;
  --neutral-900: #101828;

  /* Semantik yüzeyler */
  --bg-app: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-subtle: var(--neutral-100);
  --bg-surface-hover: var(--neutral-100);
  --bg-sidebar: #0d2a4f;
  --bg-sidebar-active: rgba(255, 255, 255, 0.10);
  --bg-topbar: rgba(255, 255, 255, 0.86);
  --bg-overlay: rgba(16, 24, 40, 0.55);
  /* Pazaryeri açılış bölümü: yumuşak marka zemini + turuncu ışıma */
  --bg-hero: linear-gradient(168deg, var(--primary-50) 0%, var(--neutral-50) 58%, var(--bg-surface) 100%);
  --bg-hero-glow: radial-gradient(circle, rgba(242, 140, 0, 0.16), transparent 68%);
  --bg-band: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-900) 100%);

  --text-main: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: #ffffff;
  --text-link: var(--primary-600);

  --border-color: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--primary-500);
  --ring-focus: 0 0 0 4px rgba(31, 95, 174, 0.18);

  /* Tipografi */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-size-2xs: 0.6875rem; /* 11px */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 2.75rem;   /* 44px – yalnızca açılış başlığı */
  --line-tight: 1.2;
  --line-snug: 1.35;
  --line-normal: 1.5;
  --line-relaxed: 1.6;
  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-wide: 0.08em;

  /* Boşluk ve yarıçap */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Gölgeler – yumuşak ve alçak; yükseklik farkı renkle değil derinlikle anlatılır. */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px -4px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 18px 34px -12px rgba(16, 24, 40, 0.18), 0 6px 12px -8px rgba(16, 24, 40, 0.06);
  --shadow-bottom-nav: 0 -4px 16px rgba(16, 24, 40, 0.06);
  --shadow-primary: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 14px -8px rgba(31, 95, 174, 0.55);
  --shadow-accent: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 14px -8px rgba(242, 140, 0, 0.55);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 24px -18px rgba(16, 24, 40, 0.35);
  --shadow-card-hover: 0 2px 4px rgba(16, 24, 40, 0.05), 0 18px 34px -20px rgba(16, 24, 40, 0.45);

  /* Yerleşim */
  --sidebar-width: 264px;
  --sidebar-collapsed-width: 76px;
  --topbar-height: 64px;
  --bottom-nav-height: 64px;
  /* İçerik kolonu geniş ekranlarda da sayfayı doldurur; okunabilirlik için üst sınır yine vardır. */
  --content-max-width: 1600px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Etkileşim */
  --min-touch-target: 44px;
  --transition-speed: 0.18s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Koyu Tema
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg-app: #0b1220;
  --bg-surface: #111a2b;
  --bg-surface-subtle: #172236;
  --bg-surface-hover: #1c2940;
  --bg-sidebar: #0a1424;
  --bg-sidebar-active: rgba(255, 255, 255, 0.08);
  --bg-topbar: rgba(17, 26, 43, 0.86);
  --bg-overlay: rgba(2, 6, 16, 0.7);
  --bg-hero: linear-gradient(168deg, #16253f 0%, #101a2c 58%, var(--bg-surface) 100%);
  --bg-hero-glow: radial-gradient(circle, rgba(242, 140, 0, 0.20), transparent 68%);
  --bg-band: linear-gradient(135deg, #16253f 0%, #0c1524 100%);

  --text-main: #f2f4f7;
  --text-secondary: #c3cad6;
  --text-muted: #8b95a7;
  --text-inverse: #101828;
  --text-link: #7fa7dc;

  --border-color: #23304a;
  --border-strong: #2f3e5c;
  --border-focus: #4a82c8;
  --ring-focus: 0 0 0 4px rgba(74, 130, 200, 0.28);

  --primary-50: #13223a;
  --primary-100: #17294a;
  --accent-50: #2b1f0a;
  --accent-100: #3d2a0c;
  --success-50: #0d2a1a;
  --success-100: #10382a;
  --danger-50: #2b1212;
  --danger-100: #3b1818;
  --warning-50: #2b1f08;
  --warning-100: #3b2a0a;
  --info-50: #12213a;
  --info-100: #172c4a;

  --tint-primary-fg: #9ec2ee;
  --tint-success-fg: #6ee7a8;
  --tint-danger-fg:  #fca5a5;
  --tint-warning-fg: #fcd34d;
  --tint-accent-fg:  #ffc36b;
  --tint-info-fg:    #93c5fd;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 6px 16px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 22px 38px -14px rgba(0, 0, 0, 0.7);
  --shadow-bottom-nav: 0 -4px 16px rgba(0, 0, 0, 0.40);
  --shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 14px -8px rgba(31, 95, 174, 0.7);
  --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 14px -8px rgba(242, 140, 0, 0.5);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 24px -18px rgba(0, 0, 0, 0.8);
  --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.45), 0 18px 34px -20px rgba(0, 0, 0, 0.9);

  color-scheme: dark;
}

/* Bootstrap köprüsü: mevcut bileşenlerin bootstrap sınıfları marka belirteçlerine bağlanır. */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-font-sans-serif: var(--font-family);
  --bs-body-font-family: var(--font-family);
  --bs-body-bg: var(--bg-app);
  --bs-body-color: var(--text-main);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border-color);
  --bs-primary: var(--primary-500);
  --bs-primary-rgb: 31, 95, 174;
  --bs-success: var(--success-500);
  --bs-danger: var(--danger-500);
  --bs-warning: var(--warning-500);
  --bs-link-color: var(--text-link);
  --bs-link-color-rgb: 23, 75, 140;
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   3. Temel / Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-normal);
  color: var(--text-main);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-speed), color var(--transition-speed);
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: var(--line-tight);
  color: var(--text-main);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--font-size-3xl); font-weight: 800; }
h2 { font-size: var(--font-size-2xl); font-weight: 800; }
h3 { font-size: var(--font-size-xl); }
h4, h5, h6 { letter-spacing: -0.01em; }
h4 { font-size: var(--font-size-lg); }
h5, h6 { font-size: var(--font-size-base); }
p { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, video { max-width: 100%; display: block; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

::selection { background: var(--primary-200); color: var(--primary-900); }

/* Odak halkası yalnızca etkileşimli öğelere uygulanır. Blazor gezinme sonrası erişilebilirlik için
   başlığa odaklanır; genel bir :focus-visible kuralı bunu başlığın etrafında kutu gibi gösteriyordu. */
:where(a, button, input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs);
}
:where(h1, h2, h3, [tabindex="-1"]):focus, :where(h1, h2, h3, [tabindex="-1"]):focus-visible { outline: none; box-shadow: none; }

/* İnce kaydırma çubukları (masaüstü) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--neutral-400); }
  [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #2f3e5c; }
}

/* --------------------------------------------------------------------------
   4. Uygulama Kabuğu (App Shell)
   Mobil: üst bar + içerik + alt navigasyon.  Masaüstü (≥1024px): sol menü + üst bar.
   -------------------------------------------------------------------------- */
.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}

.app-shell__body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.app-shell__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-shell__content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--spacing-4) var(--spacing-4) calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-6));
}

.app-shell__content--wide { max-width: none; }
.app-shell__content--narrow { max-width: 760px; }
.app-shell__content--flush { padding: 0 0 calc(var(--bottom-nav-height) + var(--safe-bottom)); max-width: none; }

/* Üst bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  height: calc(var(--topbar-height) + var(--safe-top));
  padding-top: var(--safe-top);
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
  background: var(--bg-topbar);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-color);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: 800;
  font-size: var(--font-size-lg);
  color: var(--text-main);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.topbar__brand:hover { text-decoration: none; }

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--shadow-primary);
  flex-shrink: 0;
}
.brand-mark--lg { width: 56px; height: 56px; border-radius: 16px; font-size: 24px; }

.topbar__search {
  flex: 1;
  max-width: 520px;
  display: none;
}

.topbar__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
}

/* Üst bardaki birincil eylem (masaüstünde görünür) */
.topbar__cta { margin-right: var(--spacing-2); }
.topbar__divider { display: block; width: 1px; height: 24px; background: var(--border-color); margin: 0 var(--spacing-1); flex-shrink: 0; }

.topbar__title {
  font-weight: 700;
  font-size: var(--font-size-lg);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sol menü (masaüstü) */
.sidebar {
  display: none;
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-sidebar);
  color: rgba(255, 255, 255, 0.82);
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  flex-direction: column;
  padding: var(--spacing-4) var(--spacing-3);
  gap: var(--spacing-2);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-3) var(--spacing-4);
  color: #fff;
  font-weight: 800;
  font-size: var(--font-size-lg);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.sidebar__brand:hover { text-decoration: none; color: #fff; }
.sidebar__brand .brand-mark { background: linear-gradient(135deg, var(--accent-500), var(--accent-700)); box-shadow: var(--shadow-accent); }

.sidebar__section {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
  padding: var(--spacing-4) var(--spacing-3) var(--spacing-1);
  font-weight: 700;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: 0 var(--spacing-3);
  min-height: 44px;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.76);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background var(--transition-speed), color var(--transition-speed);
}
.sidebar__link:hover { background: var(--bg-sidebar-active); color: #fff; text-decoration: none; }
.sidebar__link.active { background: var(--bg-sidebar-active); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--accent-500); }
.sidebar__link .icon { opacity: 0.9; }
.sidebar__link .badge-count { margin-left: auto; }

.sidebar__footer {
  margin-top: auto;
  padding: var(--spacing-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar__cta {
  margin: var(--spacing-2) var(--spacing-1) var(--spacing-3);
}

/* Alt navigasyon (mobil) */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 950;
  height: calc(var(--bottom-nav-height) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-bottom-nav);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}

.mobile-bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--min-touch-target);
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: color var(--transition-speed);
}
.mobile-bottom-nav .nav-item:hover { text-decoration: none; }
.mobile-bottom-nav .nav-item.active { color: var(--primary-500); }
.mobile-bottom-nav .nav-item .icon { width: 24px; height: 24px; }
.mobile-bottom-nav .nav-item .nav-icon { font-size: 1.3rem; line-height: 1; }
.mobile-bottom-nav .nav-item .nav-label { line-height: 1; }
.mobile-bottom-nav .nav-item .badge-dot {
  position: absolute;
  top: 6px;
  left: calc(50% + 6px);
}

.mobile-bottom-nav .nav-item.action-create .create-icon-bubble,
.nav-center-action .center-btn {
  width: 50px;
  height: 50px;
  margin-top: -26px;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: #fff;
  box-shadow: var(--shadow-accent);
  border: 4px solid var(--bg-surface);
  transition: transform var(--transition-speed);
}
.mobile-bottom-nav .nav-item.action-create:active .create-icon-bubble { transform: scale(0.92); }
.mobile-bottom-nav .nav-item.action-create .plus-icon { font-size: 1.4rem; line-height: 1; }
.mobile-bottom-nav .nav-item.action-create { color: var(--accent-600); }

/* Masaüstü yerleşimi */
@media (min-width: 1024px) {
  .sidebar { display: flex; }
  .mobile-bottom-nav { display: none; }
  .topbar__search { display: block; }
  .topbar__title { display: none; }
  .app-shell__content { padding: var(--spacing-6) var(--spacing-8) var(--spacing-10); }
  .app-shell__content--flush { padding: 0; }
  /* Masaüstünde alt gezinme çubuğu yok; şeridin mobil için eklenen alt boşluğu kalkar. */
  .promo-band { padding-bottom: var(--spacing-6); }
  .topbar { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
  .topbar__brand { display: none; }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .app-shell__content { padding: var(--spacing-5) var(--spacing-6) calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-8)); }
}

/* --------------------------------------------------------------------------
   5. Sayfa Başlığı ve Bölümler
   -------------------------------------------------------------------------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-5);
}
.page-header__title { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); }
.page-header__subtitle { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: var(--line-relaxed); margin-top: var(--spacing-2); max-width: 62ch; }
.page-header__actions { display: flex; gap: var(--spacing-2); flex-wrap: wrap; }
.page-header__eyebrow { font-size: var(--font-size-2xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-link); margin-bottom: var(--spacing-2); display: block; }
@media (min-width: 1024px) { .page-header { margin-bottom: var(--spacing-6); } .page-header__title { font-size: var(--font-size-3xl); } }

.section { margin-bottom: var(--spacing-8); }
.section:last-child { margin-bottom: 0; }
.section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-4); }
.section__title { font-size: var(--font-size-lg); font-weight: 800; letter-spacing: var(--tracking-tight); }
.section__subtitle { font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 2px; }
.section__link { font-size: var(--font-size-sm); font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .section { margin-bottom: var(--spacing-10); } .section__title { font-size: var(--font-size-xl); } }

/* --------------------------------------------------------------------------
   6. Butonlar
   -------------------------------------------------------------------------- */
.btn, .custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: var(--min-touch-target);
  padding: 0.625rem 1.125rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-speed), color var(--transition-speed), border-color var(--transition-speed), transform var(--transition-speed), box-shadow var(--transition-speed);
}
.btn:hover, .custom-btn:hover { text-decoration: none; }
.btn:active, .custom-btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled, .custom-btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary, .custom-btn-primary { background: var(--primary-500); color: #fff; box-shadow: var(--shadow-primary); }
.btn-primary:hover, .custom-btn-primary:hover { background: var(--primary-600); color: #fff; }
.btn-accent, .custom-btn-secondary { background: var(--accent-500); color: #fff; box-shadow: var(--shadow-accent); }
.btn-accent:hover, .custom-btn-secondary:hover { background: var(--accent-600); color: #fff; }
.btn-secondary { background: var(--bg-surface-subtle); color: var(--text-main); border-color: var(--border-color); }
.btn-secondary:hover { background: var(--bg-surface-hover); color: var(--text-main); border-color: var(--border-strong); }
.btn-outline, .custom-btn-outline, .btn-outline-primary, .btn-outline-secondary { background: transparent; color: var(--text-main); border-color: var(--border-strong); }
.btn-outline:hover, .custom-btn-outline:hover, .btn-outline-secondary:hover { background: var(--bg-surface-subtle); color: var(--text-main); border-color: var(--border-strong); }
.btn-outline-primary { color: var(--primary-600); border-color: var(--primary-300); }
.btn-outline-primary:hover { background: var(--primary-50); color: var(--primary-700); border-color: var(--primary-400); }
.btn-outline-danger { background: transparent; color: var(--danger-500); border-color: var(--danger-100); }
.btn-outline-danger:hover { background: var(--danger-50); color: var(--danger-600); }
.btn-ghost, .btn-light, .btn-link { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover, .btn-light:hover { background: var(--bg-surface-subtle); color: var(--text-main); }
.btn-danger, .custom-btn-danger { background: var(--danger-500); color: #fff; }
.btn-danger:hover, .custom-btn-danger:hover { background: var(--danger-600); color: #fff; }
.btn-success, .custom-btn-success { background: var(--success-500); color: #fff; }
.btn-success:hover, .custom-btn-success:hover { background: var(--success-600); color: #fff; }

.btn-sm { min-height: 36px; padding: 0.375rem 0.75rem; font-size: var(--font-size-xs); border-radius: var(--radius-sm); }
.btn-lg { min-height: 52px; padding: 0.875rem 1.5rem; font-size: var(--font-size-base); border-radius: var(--radius-lg); }
.btn-block, .w-100.btn { width: 100%; }
.btn-icon {
  /* Üst bar dar ekranda sıkıştığında flex bu düğmeyi eziyor ve menü düğmesi
     44px yerine 31px'e düşüyordu; küçülmesi engellenir. */
  flex-shrink: 0;
  width: var(--min-touch-target);
  min-width: var(--min-touch-target);
  height: var(--min-touch-target);
  padding: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  border: none;
  position: relative;
}
.btn-icon:hover { background: var(--bg-surface-subtle); color: var(--text-main); }
.btn-icon .icon { width: 22px; height: 22px; }
.btn-pill { border-radius: var(--radius-full); }

.btn-group-mobile {
  display: grid;
  gap: var(--spacing-2);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .btn-group-mobile { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }

/* Sabit alt aksiyon çubuğu (mobil formlar için) */
.sticky-actions {
  position: sticky;
  bottom: calc(var(--bottom-nav-height) + var(--safe-bottom));
  z-index: 20;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-color);
  padding: var(--spacing-3) var(--spacing-4);
  margin: var(--spacing-4) calc(-1 * var(--spacing-4)) 0;
  display: flex;
  gap: var(--spacing-2);
}
@media (min-width: 1024px) { .sticky-actions { position: static; margin: var(--spacing-6) 0 0; border: none; padding: 0; background: transparent; justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   7. Form Alanları
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: var(--spacing-4); display: flex; flex-direction: column; gap: var(--spacing-2); }
.form-label { font-size: var(--font-size-sm); font-weight: 600; color: var(--text-main); }
.form-label .req { color: var(--danger-500); margin-left: 2px; }
.form-hint { font-size: var(--font-size-xs); color: var(--text-muted); }
.form-control-wrapper { position: relative; display: flex; align-items: center; }
.form-control-wrapper .icon { position: absolute; left: 14px; color: var(--text-muted); pointer-events: none; }
.form-control-wrapper .icon + .custom-input, .form-control-wrapper .icon + .form-control { padding-left: 42px; }

.custom-input, .form-control, .form-select, .custom-select, textarea.form-control {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-size: var(--font-size-base);
  color: var(--text-main);
  background-color: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed);
  appearance: none;
}
.form-select, .custom-select {
  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='%23667085' 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.9rem center;
  background-size: 14px;
  padding-right: 2.5rem;
}
.custom-input::placeholder, .form-control::placeholder { color: var(--neutral-400); }
.custom-input:focus, .form-control:focus, .form-select:focus, .custom-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
  background-color: var(--bg-surface);
  color: var(--text-main);
}
.custom-input.is-invalid, .form-control.is-invalid, .invalid { border-color: var(--danger-500) !important; outline: none; }
.custom-input.is-invalid:focus, .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15); }
.form-feedback, .validation-message, .invalid-feedback { font-size: var(--font-size-xs); color: var(--danger-500); display: block; }
.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--success-500); }
textarea.custom-input, textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.5; }
.form-control-sm { min-height: 38px; padding: 0.4rem 0.7rem; font-size: var(--font-size-sm); }
.input-group { display: flex; align-items: stretch; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Anahtar (switch) */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-3); cursor: pointer; min-height: var(--min-touch-target); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 46px; height: 26px; background: var(--neutral-300); border-radius: var(--radius-full); position: relative; transition: background var(--transition-speed); flex-shrink: 0; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--transition-speed); }
.switch input:checked + .switch__track { background: var(--primary-500); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring-focus); }
.switch__label { font-size: var(--font-size-sm); font-weight: 500; }
[data-theme="dark"] .switch__track { background: #2f3e5c; }

/* Onay kutuları ve radyo */
.check { display: flex; align-items: flex-start; gap: var(--spacing-3); cursor: pointer; min-height: var(--min-touch-target); padding: var(--spacing-2) 0; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary-500); flex-shrink: 0; }
.check__text { font-size: var(--font-size-sm); }
.check__text small { display: block; color: var(--text-muted); }

/* Seçilebilir kart (radio card) */
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--spacing-3); }
.choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  cursor: pointer;
  text-align: left;
  color: var(--text-main);
  min-height: 84px;
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed);
}
.choice-card:hover { border-color: var(--primary-300); }
.choice-card.selected { border-color: var(--primary-500); background: var(--primary-50); box-shadow: var(--ring-focus); }
.choice-card__icon { font-size: 1.5rem; line-height: 1; }
.choice-card__title { font-weight: 700; font-size: var(--font-size-sm); }
.choice-card__desc { font-size: var(--font-size-xs); color: var(--text-muted); }

/* Segment kontrol */
/* Şerit kabına sığmadığında kendi içinde yatay kayar. Aksi hâlde sekmeler dar
   ekranda sayfayı genişletiyor, tüm sayfa yana kayıyor ve alt çubuk da beraberinde
   taşıyordu (yönetimdeki filtreli listelerde 180px'e varan taşma görüldü). */
.segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--bg-surface-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented__item {
  flex: 1;
  min-height: 38px;
  padding: 0 var(--spacing-4);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  transition: background var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed);
}
.segmented__item.active { background: var(--bg-surface); color: var(--text-main); box-shadow: var(--shadow-sm); }
.segmented--block { display: flex; width: 100%; }

/* Arama kutusu */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: 52px;
  padding: 0 var(--spacing-4);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.search-box:focus-within { border-color: var(--border-focus); box-shadow: var(--ring-focus); }
.search-box .icon { color: var(--text-muted); flex-shrink: 0; }
.search-box input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: var(--font-size-base); color: var(--text-main); min-height: 44px; }
.search-box input::placeholder { color: var(--neutral-400); }
.search-box--compact { min-height: 42px; border-radius: var(--radius-full); box-shadow: none; background: var(--bg-surface-subtle); border-color: transparent; }
.search-box--compact input { min-height: 40px; font-size: var(--font-size-sm); }

/* --------------------------------------------------------------------------
   8. Kartlar ve Listeler
   -------------------------------------------------------------------------- */
.card, .custom-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
}
.custom-card { padding: var(--spacing-4); }
.card { --bs-card-bg: var(--bg-surface); --bs-card-border-color: var(--border-color); --bs-card-cap-bg: var(--bg-surface-subtle); }
.card-interactive, .custom-card-interactive { cursor: pointer; transition: transform var(--transition-speed) var(--ease-out), box-shadow var(--transition-speed), border-color var(--transition-speed); }
.card-interactive:hover, .custom-card-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--primary-200); }
.custom-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-3); padding-bottom: var(--spacing-3); border-bottom: 1px solid var(--border-color); }
.card-pad { padding: var(--spacing-4); }
@media (min-width: 1024px) { .card-pad { padding: var(--spacing-5); } }

.card-grid { display: grid; gap: var(--spacing-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-4); } }
@media (min-width: 1280px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }

/* Liste öğesi */
.list-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  min-height: 60px;
  background: var(--bg-surface);
  color: var(--text-main);
  text-decoration: none;
  border-bottom: 1px solid var(--border-color);
  transition: background var(--transition-speed);
}
.list-item:hover { background: var(--bg-surface-hover); text-decoration: none; color: var(--text-main); }
.list-item:last-child { border-bottom: none; }
.list-item__body { flex: 1; min-width: 0; }
/* Başlık ve alt başlık her zaman alt alta gelir; <span> ile yazıldıklarında satır içi kalıp
   metinlerin birbirine yapışmasını önler. */
.list-item__title { display: block; font-weight: 600; font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item__subtitle { display: block; font-size: var(--font-size-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item__meta { font-size: var(--font-size-xs); color: var(--text-muted); text-align: right; flex-shrink: 0; }
.list-item__chevron { color: var(--neutral-400); flex-shrink: 0; }
.list-group-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }

/* İstatistik kartı */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-height: 108px;
  position: relative;
  overflow: hidden;
}
/* Kart kendi genişliğine göre yerleşir (container query): ızgara sütun sayısını ekran
   genişliğine göre seçtiği için dar bir alanda (pencere, yan panel) kart ~140px'e düşüyor,
   sağ üstteki simge "TAMAMLANAN SATIŞ" gibi uzun etiketlerin ve "%91" gibi değerlerin
   üstüne biniyordu. Simgenin yeri artık kartın kendisine değil etiket/değer satırlarına
   ayrılır; kart daralınca simge başlığın üstüne iner ve metin tüm genişliği kullanır. */
.stat-card { box-shadow: var(--shadow-card); gap: var(--spacing-1); container-type: inline-size; }
.stat-card__label { font-size: var(--font-size-2xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); overflow-wrap: anywhere; hyphens: auto; }
.stat-card__value { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-card:has(> .stat-card__icon) > .stat-card__label,
.stat-card:has(> .stat-card__icon) > .stat-card__value { padding-right: 46px; }
@container (max-width: 125px) {
  .stat-card:has(> .stat-card__icon) > .stat-card__label,
  .stat-card:has(> .stat-card__icon) > .stat-card__value { padding-right: 0; }
  .stat-card__icon { position: static; order: -1; width: 32px; height: 32px; margin-bottom: var(--spacing-1); }
  .stat-card__icon .icon { width: 17px; height: 17px; }
  .stat-card__value { font-size: var(--font-size-xl); }
}
.stat-card__hint { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: auto; }
.stat-card__icon { position: absolute; right: var(--spacing-4); top: var(--spacing-4); width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--primary-50); color: var(--tint-primary-fg); }
.stat-card__icon .icon { width: 19px; height: 19px; }
.stat-card--primary .stat-card__icon { background: var(--primary-50); color: var(--tint-primary-fg); }
.stat-card--success .stat-card__icon { background: var(--success-50); color: var(--tint-success-fg); }
.stat-card--warning .stat-card__icon { background: var(--warning-50); color: var(--tint-warning-fg); }
.stat-card--danger .stat-card__icon { background: var(--danger-50); color: var(--tint-danger-fg); }
.stat-card--accent .stat-card__icon { background: var(--accent-50); color: var(--tint-accent-fg); }
.stat-grid { display: grid; gap: var(--spacing-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); } }

/* Vurgu (hero) kartı */
.hero-card {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-5);
  border-radius: var(--radius-xl);
  color: #fff;
  background: var(--bg-band);
  box-shadow: var(--shadow-md);
}
.hero-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 140, 0, 0.45), transparent 65%);
  pointer-events: none;
}
.hero-card__eyebrow { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.8; }
.hero-card__title { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-top: var(--spacing-1); }
.hero-card__text { opacity: 0.85; font-size: var(--font-size-sm); margin-top: var(--spacing-2); max-width: 52ch; }
.hero-card--accent { background: linear-gradient(135deg, var(--accent-500), var(--accent-700)); box-shadow: var(--shadow-accent); }
.hero-card--accent::after { background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 65%); }
@media (min-width: 1024px) { .hero-card { padding: var(--spacing-8); } .hero-card__title { font-size: var(--font-size-3xl); } }

/* Kategori kartı – vitrin: ikon kutusu solda, ad ve sayaç sağda, hover'da yükselir. */
.category-tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-3);
  min-height: 72px;
  padding: var(--spacing-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
  text-decoration: none;
  text-align: left;
  overflow: hidden;
  transition: transform var(--transition-speed) var(--ease-out), box-shadow var(--transition-speed), border-color var(--transition-speed);
}
.category-tile::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--primary-50);
  opacity: 0;
  transition: opacity var(--transition-speed);
}
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--primary-300); text-decoration: none; color: var(--text-main); }
.category-tile:hover::after { opacity: 0.7; }
.category-tile > * { position: relative; z-index: 1; }
.category-tile__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--primary-50);
  color: var(--tint-primary-fg);
  font-size: 1.35rem;
  line-height: 1;
  transition: background var(--transition-speed), color var(--transition-speed);
}
.category-tile__icon .icon { width: 22px; height: 22px; }
.category-tile:hover .category-tile__icon { background: var(--primary-500); color: #fff; }
.category-tile__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.category-tile__name { font-size: var(--font-size-sm); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.category-tile__meta { font-size: var(--font-size-xs); color: var(--text-muted); }
/* Alıcının bölgesindeki esnaf sayısı gösterilirken vurgulanır. */
.category-tile__meta--live { color: var(--success-700, var(--success-600)); font-weight: 600; }
.category-tile .category-tile__arrow { display: none; margin-left: auto; color: var(--neutral-400); flex-shrink: 0; }
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-3); }
@media (max-width: 639.98px) {
  .category-tile { flex-direction: column; align-items: flex-start; gap: var(--spacing-2); min-height: 104px; }
  .category-tile__name { font-size: var(--font-size-xs); }
}
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(3, 1fr); } .category-tile .category-tile__arrow { display: block; } }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); } }

/* Yatay kaydırılan satır */
.h-scroll { display: flex; gap: var(--spacing-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--spacing-2); margin: 0 calc(-1 * var(--spacing-4)); padding-left: var(--spacing-4); padding-right: var(--spacing-4); scrollbar-width: none; }
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; flex-shrink: 0; }
@media (min-width: 1024px) { .h-scroll { margin: 0; padding-left: 0; padding-right: 0; } }

/* --------------------------------------------------------------------------
   9. Rozetler, Çipler, Avatarlar
   -------------------------------------------------------------------------- */
.badge, .status-badge, .category-badge, .urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  line-height: 1.4;
  border-radius: var(--radius-full);
  white-space: nowrap;
  letter-spacing: 0.02em;
  background: var(--bg-surface-subtle);
  color: var(--text-secondary);
}
.badge-primary, .badge.bg-primary { background: var(--primary-50) !important; color: var(--tint-primary-fg) !important; }
.badge-success, .badge.bg-success { background: var(--success-50) !important; color: var(--tint-success-fg) !important; }
.badge-warning, .badge.bg-warning { background: var(--warning-50) !important; color: var(--tint-warning-fg) !important; }
.badge-danger, .badge.bg-danger { background: var(--danger-50) !important; color: var(--tint-danger-fg) !important; }
.badge-info, .badge.bg-info { background: var(--info-50) !important; color: var(--tint-info-fg) !important; }
.badge-accent { background: var(--accent-50); color: var(--tint-accent-fg); }
.badge-neutral, .badge.bg-light, .badge.bg-secondary { background: var(--bg-surface-subtle) !important; color: var(--text-secondary) !important; }
.badge-solid { background: var(--primary-500); color: #fff; }
.badge-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--danger-500); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
.badge-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full); background: var(--accent-500); color: #fff; font-size: var(--font-size-2xs); font-weight: 700; }

/* Talep durum renkleri (DemandStatus enum sırasına göre) */
.status-0 { background: var(--bg-surface-subtle); color: var(--text-secondary); }
.status-1 { background: var(--warning-50); color: var(--tint-warning-fg); }
.status-2 { background: var(--info-50); color: var(--tint-info-fg); }
.status-3 { background: var(--primary-50); color: var(--tint-primary-fg); }
.status-4 { background: var(--bg-surface-subtle); color: var(--text-muted); }
.status-5 { background: var(--success-50); color: var(--tint-success-fg); }
.status-6 { background: var(--danger-50); color: var(--tint-danger-fg); }
.status-7 { background: var(--success-50); color: var(--tint-success-fg); }
.status-8 { background: var(--warning-50); color: var(--tint-warning-fg); }
.status-9 { background: var(--danger-50); color: var(--tint-danger-fg); }
.urgency-1 { background: var(--bg-surface-subtle); color: var(--text-secondary); }
.urgency-2 { background: var(--accent-50); color: var(--tint-accent-fg); }
.urgency-3 { background: var(--danger-50); color: var(--tint-danger-fg); }

.verified-badge {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary-500);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.chip, .btn-filter-pill, .radius-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-speed);
}
.chip:hover, .btn-filter-pill:hover, .radius-pill:hover { border-color: var(--primary-300); color: var(--primary-600); }
.chip.active, .btn-filter-pill.active, .radius-pill.active { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }
.chip-row { display: flex; gap: var(--spacing-2); overflow-x: auto; padding-bottom: var(--spacing-2); scrollbar-width: none; margin: 0 calc(-1 * var(--spacing-4)); padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.chip-row::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .chip-row { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; } }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--primary-100);
  color: var(--primary-700);
  font-weight: 700;
  font-size: var(--font-size-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; font-size: var(--font-size-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--font-size-lg); }
.avatar--xl { width: 84px; height: 84px; font-size: var(--font-size-2xl); }
.avatar--square { border-radius: var(--radius-md); }
.avatar--accent { background: var(--accent-100); color: var(--accent-700); }

/* --------------------------------------------------------------------------
   10. Sekmeler, Adım Çubuğu, İlerleme
   -------------------------------------------------------------------------- */
.tabs { display: flex; gap: var(--spacing-1); border-bottom: 1px solid var(--border-color); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__item { padding: var(--spacing-3) var(--spacing-3); min-height: var(--min-touch-target); border: none; background: transparent; color: var(--text-muted); font-weight: 600; font-size: var(--font-size-sm); white-space: nowrap; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: var(--spacing-2); }
.tabs__item.active { color: var(--primary-600); border-bottom-color: var(--primary-500); }

.stepper { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-5); }
.stepper__step { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--neutral-200); transition: background var(--transition-speed); }
.stepper__step.done { background: var(--primary-500); }
.stepper__step.current { background: var(--accent-500); }
[data-theme="dark"] .stepper__step { background: #23304a; }
.stepper__label { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 600; white-space: nowrap; }

.progress-bar-track { height: 8px; background: var(--neutral-200); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--primary-500); border-radius: var(--radius-full); transition: width 0.3s var(--ease-out); }
[data-theme="dark"] .progress-bar-track { background: #23304a; }

/* --------------------------------------------------------------------------
   11. Tablolar (masaüstü) – mobilde kart görünümüne düşer
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.data-table th { text-align: left; font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; padding: var(--spacing-3) var(--spacing-4); background: var(--bg-surface-subtle); border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.data-table td { padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg-surface-hover); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Telefonda geniş tablolar yatay kayar; satır işlemleri (en sağdaki düğmeler) sağa yapışık
   kalır, yönetici her satırda tabloyu sonuna kadar kaydırmak zorunda kalmaz. */
@media (max-width: 767.98px) {
    .data-table td:has(> .row-actions),
    .data-table:has(td > .row-actions) thead th:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        background: var(--bg-surface);
        box-shadow: -10px 0 10px -10px rgba(15, 23, 42, 0.25);
    }
    .data-table:has(td > .row-actions) thead th:last-child { background: var(--bg-surface-subtle); }
}
.table { --bs-table-bg: var(--bg-surface); --bs-table-color: var(--text-main); --bs-table-border-color: var(--border-color); --bs-table-striped-bg: var(--bg-surface-subtle); }

.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-3) 0; font-size: var(--font-size-sm); color: var(--text-muted); flex-wrap: wrap; }
.pagination-bar__pages { display: inline-flex; gap: var(--spacing-1); }

/* --------------------------------------------------------------------------
   12. Geri bildirim: Boş durum, Hata, Skeleton, Toast, Uyarı
   -------------------------------------------------------------------------- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-2); padding: var(--spacing-10) var(--spacing-4); background: var(--bg-surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-xl); }
.empty-state__icon { width: 60px; height: 60px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--primary-50); color: var(--tint-primary-fg); font-size: 1.6rem; margin-bottom: var(--spacing-2); }
.empty-state__icon .icon { width: 30px; height: 30px; }
.empty-state-title, .empty-state__title { font-weight: 700; font-size: var(--font-size-lg); }
.empty-state-description, .empty-state__desc { color: var(--text-muted); font-size: var(--font-size-sm); max-width: 40ch; }
.empty-state-action, .empty-state__action { margin-top: var(--spacing-3); }

.error-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-2); padding: var(--spacing-8) var(--spacing-4); background: var(--danger-50); border: 1px solid var(--danger-100); border-radius: var(--radius-xl); color: var(--text-main); }
.error-state .text-danger { color: var(--danger-500) !important; }

.alert { border-radius: var(--radius-md); border: 1px solid transparent; padding: var(--spacing-3) var(--spacing-4); font-size: var(--font-size-sm); display: flex; gap: var(--spacing-3); align-items: flex-start; }
.alert-info { background: var(--info-50); color: var(--text-main); border-color: var(--info-100); }
.alert-success { background: var(--success-50); color: var(--text-main); border-color: var(--success-100); }
.alert-warning { background: var(--warning-50); color: var(--text-main); border-color: var(--warning-100); }
.alert-danger { background: var(--danger-50); color: var(--text-main); border-color: var(--danger-100); }
.alert .icon { flex-shrink: 0; margin-top: 1px; }

.skeleton-container, .skeleton { background: var(--neutral-200); overflow: hidden; position: relative; border-radius: var(--radius-sm); }
[data-theme="dark"] .skeleton-container, [data-theme="dark"] .skeleton { background: #1c2940; }
.skeleton-shimmer, .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); animation: shimmer 1.4s infinite; }
[data-theme="dark"] .skeleton-shimmer, [data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent); }
.skeleton-card { padding: var(--spacing-4); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--spacing-3); }

.spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid var(--neutral-300); border-top-color: var(--primary-500); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; }
.spinner-border { border-width: 2px; }
.loading-box, .loading-state { display: flex; align-items: center; justify-content: center; gap: var(--spacing-3); padding: var(--spacing-10); color: var(--text-muted); font-size: var(--font-size-sm); }

/* Bildirimler alt tarafta durur: sağ üstte iken üst bardaki bildirim/profil düğmelerinin
   üzerine geliyordu. Kapsayıcı tıklamaları geçirir (pointer-events: none); yalnızca
   görünen bildirimin kendisi tıklanabilir — aksi halde kapsayıcı boşken bile 420 piksellik
   görünmez bir blok olarak altındaki düğmeleri yutuyordu. */
.toast-container { position: fixed; bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-3)); left: 50%; transform: translateX(-50%); z-index: 1300; display: flex; flex-direction: column-reverse; gap: var(--spacing-2); width: calc(100% - 2rem); max-width: 420px; pointer-events: none; }
@media (min-width: 1024px) { .toast-container { left: auto; right: var(--spacing-6); bottom: var(--spacing-6); transform: none; } }
.custom-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-main); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); border-left: 4px solid var(--primary-500); animation: toastIn 0.28s var(--ease-out); }
.custom-toast-success { border-left-color: var(--success-500); }
.custom-toast-danger { border-left-color: var(--danger-500); }
.custom-toast-warning { border-left-color: var(--warning-500); }
.custom-toast-info { border-left-color: var(--info-500); }
.custom-toast .btn-close { margin-left: auto; }

.offline-banner { position: fixed; top: calc(var(--safe-top) + var(--topbar-height)); left: 0; right: 0; z-index: 890; background: var(--warning-500); color: #fff; font-size: var(--font-size-xs); font-weight: 600; text-align: center; padding: 6px var(--spacing-4); display: flex; align-items: center; justify-content: center; gap: var(--spacing-2); }

/* --------------------------------------------------------------------------
   13. Bottom Sheet, Dialog, Açılır Menü
   -------------------------------------------------------------------------- */
.bottom-sheet-backdrop, .modal-backdrop-custom { position: fixed; inset: 0; background: var(--bg-overlay); z-index: 1100; opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s; backdrop-filter: blur(2px); }
.bottom-sheet-backdrop.show, .modal-backdrop-custom.show { opacity: 1; visibility: visible; }
/* Kapalıyken görünmez OLMAKLA kalmaz, tıklamaları da geçirir: masaüstünde çekmece ekranın
   ortasına konumlandığı için yalnızca opaklığı sıfırlamak altındaki düğmeleri tıklanamaz yapıyordu. */
.bottom-sheet-container { position: fixed; bottom: 0; left: 0; right: 0; max-height: 88dvh; background: var(--bg-surface); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); box-shadow: var(--shadow-lg); z-index: 1101; transform: translateY(100%); visibility: hidden; pointer-events: none; transition: transform 0.32s var(--ease-out), visibility 0.32s; display: flex; flex-direction: column; overflow: hidden; padding-bottom: var(--safe-bottom); }
.bottom-sheet-container.show { transform: translateY(0); visibility: visible; pointer-events: auto; }
.bottom-sheet-handle { width: 40px; height: 5px; background: var(--neutral-300); border-radius: var(--radius-full); margin: var(--spacing-3) auto var(--spacing-2); flex-shrink: 0; }
.bottom-sheet-header { padding: 0 var(--spacing-4) var(--spacing-3); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); }
.bottom-sheet-body { padding: var(--spacing-4); overflow-y: auto; flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
/* Uzun çekmecelerde onay düğmeleri kaydırmanın altında kalıyordu; aksiyon çubuğu gövdenin
   dibine yapışır ve her zaman görünür kalır. */
.sheet-actions { position: sticky; bottom: calc(var(--spacing-4) * -1); z-index: 1; display: flex; align-items: center; gap: var(--spacing-2); margin: var(--spacing-3) calc(var(--spacing-4) * -1) calc(var(--spacing-4) * -1); padding: var(--spacing-3) var(--spacing-4); background: var(--bg-surface); border-top: 1px solid var(--border-color); }
.sheet-actions > .btn-block { flex: 1; }
/* Ana sayfadaki davet programı tanıtımı ve program sayfasının kural/SSS listeleri. */
.affiliate-promo { background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-subtle, var(--bg-surface)) 100%); }
.affiliate-promo__points { list-style: none; margin: var(--spacing-3) 0; padding: 0; display: grid; gap: var(--spacing-2); }
.affiliate-promo__points li { display: flex; align-items: flex-start; gap: var(--spacing-2); font-size: 0.9rem; color: var(--text-muted); }
.rule-item { display: flex; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-2) 0; font-size: 0.9rem; line-height: 1.55; }
.rule-item + .rule-item { border-top: 1px solid var(--border-color); }
.faq { padding: var(--spacing-2) 0; }
.faq + .faq { border-top: 1px solid var(--border-color); }
.faq > summary { cursor: pointer; font-weight: 600; list-style: none; padding: var(--spacing-1) 0; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--text-muted); font-weight: 700; }
.faq[open] > summary::before { content: "−"; }
.faq > p { margin: var(--spacing-2) 0 0 1.2em; font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

/* ---------------------------------------------------------------- Aramalı açılır liste
   Uzun listelerde (il, kategori, firma) yazarak süzmeyi sağlar; görünüm normal
   form alanlarıyla aynıdır. */
.searchable-select { position: relative; width: 100%; }
.searchable-select__control { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); width: 100%; text-align: left; cursor: pointer; }
.searchable-select__control:disabled { cursor: not-allowed; opacity: 0.6; }
.searchable-select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchable-select__value--placeholder { color: var(--text-muted); }
.searchable-select__caret { flex-shrink: 0; transition: transform 0.15s var(--ease-out); }
.searchable-select--open .searchable-select__caret { transform: rotate(180deg); }
.searchable-select__panel { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.searchable-select__search { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border-bottom: 1px solid var(--border-color); }
.searchable-select__search input { flex: 1; border: 0; background: none; outline: none; color: inherit; font-size: var(--font-size-sm); min-width: 0; }
.searchable-select__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.searchable-select__option { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--spacing-2) var(--spacing-3); background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font-size: var(--font-size-sm); }
.searchable-select__option:hover, .searchable-select__option--active { background: var(--bg-subtle, rgba(0,0,0,0.04)); }
.searchable-select__option--selected { font-weight: 700; color: var(--primary-600, var(--text-main)); }
.searchable-select__option-hint { font-size: var(--font-size-2xs); color: var(--text-muted); }
.searchable-select__empty { padding: var(--spacing-3); text-align: center; color: var(--text-muted); font-size: var(--font-size-xs); }

/* Komisyon sahibi seçici: arama sonuçları ve seçili kullanıcı rozeti. */
.form-group--wide { grid-column: 1 / -1; }
.owner-chip { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); }
.owner-chip__text { display: flex; flex-direction: column; min-width: 0; }
.owner-results { list-style: none; margin: var(--spacing-2) 0 0; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-md); max-height: 220px; overflow-y: auto; }
.owner-results li + li { border-top: 1px solid var(--border-color); }
.owner-results__item { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: var(--spacing-2) var(--spacing-3); background: none; border: 0; text-align: left; cursor: pointer; color: inherit; }
.owner-results__item:hover, .owner-results__item:focus-visible { background: var(--bg-subtle, rgba(0,0,0,0.04)); }

/* Tıklanamaz liste ögesi: alıcı başkasının talebinin detayına giremez. */
.list-item--static { cursor: default; }
.list-item--static:hover { background: inherit; }

/* Havale hesap seçimi: birden fazla hesap tanımlıysa satıcı hangisine yatırdığını seçer. */
.account-list { display: grid; gap: var(--spacing-2); }
.account-option { display: flex; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; margin: 0; }
.account-option--selected { border-color: var(--primary-500); box-shadow: 0 0 0 1px var(--primary-500) inset; }
.account-option__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.account-option input[type="radio"] { margin-top: 4px; flex-shrink: 0; }

/* Havale referans numarası: gözden kaçmaması için vurgulu çerçeve. */
.reference-box { border: 1px dashed var(--primary-400, var(--border-color)); background: var(--bg-subtle, transparent); }
@media (min-width: 1024px) {
  .bottom-sheet-container { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, calc(100% - 2rem)); max-height: 85vh; border-radius: var(--radius-xl); transform: translate(-50%, -46%) scale(0.98); opacity: 0; transition: transform 0.22s var(--ease-out), opacity 0.22s, visibility 0.22s; }
  .bottom-sheet-container.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .bottom-sheet-handle { display: none; }
  .bottom-sheet-header { padding-top: var(--spacing-4); }
}

.modal-content { background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border-color); }
.btn-close { filter: none; opacity: 0.6; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); }

.dropdown-panel { position: absolute; top: calc(100% + 8px); right: 0; min-width: 300px; max-width: calc(100vw - 2rem); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 1000; overflow: hidden; animation: fadeUp 0.18s var(--ease-out); }
.dropdown-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--border-color); font-weight: 700; font-size: var(--font-size-sm); }
.dropdown-panel__body { max-height: 420px; overflow-y: auto; }
.dropdown-panel__footer { padding: var(--spacing-2) var(--spacing-4); border-top: 1px solid var(--border-color); text-align: center; font-size: var(--font-size-sm); }
.menu-item { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; padding: var(--spacing-3) var(--spacing-4); min-height: var(--min-touch-target); background: transparent; border: none; color: var(--text-main); font-size: var(--font-size-sm); font-weight: 500; text-align: left; cursor: pointer; text-decoration: none; }
.menu-item:hover { background: var(--bg-surface-hover); text-decoration: none; color: var(--text-main); }
.menu-item--danger { color: var(--danger-500); }
.menu-divider { height: 1px; background: var(--border-color); margin: var(--spacing-1) 0; }

/* Rol değiştirici */
.role-switch-container { display: flex; }
.role-switch-pill { display: inline-flex; padding: 3px; background: var(--bg-surface-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-full); gap: 2px; }
.role-btn { border: none; background: transparent; padding: 0 12px; min-height: 34px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 700; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: all var(--transition-speed); }
.role-btn.active { background: var(--bg-surface); color: var(--primary-600); box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------------------
   14. Harita
   -------------------------------------------------------------------------- */
.map-container { position: relative; width: 100%; height: 100%; min-height: 320px; background: var(--bg-surface-subtle); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color); }
.map-container--full { border-radius: 0; border: none; height: calc(100dvh - var(--topbar-height) - var(--safe-top) - var(--bottom-nav-height) - var(--safe-bottom)); min-height: 400px; }
@media (min-width: 1024px) { .map-container--full { height: calc(100dvh - var(--topbar-height)); } }
/* MapLibre kendi ".maplibregl-map" kuralıyla position:relative uygular ve sonradan yüklendiği için
   düz ".map-canvas" kuralını ezer; bu da kabın yüksekliğini sıfırlayıp haritayı görünmez yapar.
   Daha yüksek özgüllük + açık genişlik/yükseklik ile her iki durumda da kap dolar. */
.map-container > .map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-overlay-top { position: absolute; top: var(--spacing-3); left: var(--spacing-3); right: var(--spacing-3); z-index: 5; display: flex; flex-direction: column; gap: var(--spacing-2); pointer-events: none; }
.map-overlay-top > * { pointer-events: auto; }
/* Pin kartı haritanın altına yapışıkken uzun içerikte ekranın dışına taşıyordu.
   Kart artık harita yüksekliğinin yarısını aşmaz, kendi içinde kayar ve geniş
   ekranda sola hizalanıp haritayı kapatmaz. */
.map-overlay-bottom { position: absolute; bottom: var(--spacing-3); left: var(--spacing-3); right: var(--spacing-3); z-index: 5; max-height: calc(100% - var(--spacing-6)); overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 1024px) {
  .map-overlay-bottom { right: auto; width: min(420px, calc(100% - var(--spacing-6))); max-height: calc(100% - var(--spacing-8)); }
}
/* Kart kapandıktan sonra rota haritada kalır; bu rozet rotayı temizlemeyi sağlar. */
.map-route-chip { position: absolute; top: var(--spacing-3); left: var(--spacing-3); z-index: 6; display: inline-flex; align-items: center; gap: var(--spacing-2); padding: 6px 12px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-md); font-size: var(--font-size-xs); font-weight: 600; }
.map-fab { position: absolute; z-index: 6; right: var(--spacing-3); width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--text-main); cursor: pointer; }
.map-fab--locate { bottom: 96px; }
.map-search-here { position: absolute; top: 60px; left: 50%; transform: translateX(-50%); z-index: 6; }
/* Arama merkezi ipucu: düğmeyle aynı konumda, tıklanamaz bir rozet. */
.map-search-here--hint { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: 6px 14px; border-radius: 999px; background: var(--bg-surface); color: var(--text-muted); font-size: var(--font-size-xs); box-shadow: var(--shadow-md); pointer-events: none; }
.map-legend { display: inline-flex; gap: var(--spacing-3); padding: 6px 12px; background: var(--bg-surface); border-radius: var(--radius-full); border: 1px solid var(--border-color); font-size: var(--font-size-2xs); font-weight: 600; box-shadow: var(--shadow-sm); }
.map-legend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.pin-card { background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); padding: var(--spacing-4); }
.maplibregl-marker { cursor: pointer; }
.map-marker-el { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--primary-500); border: 3px solid #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; }
.map-marker-el span { transform: rotate(45deg); font-size: 15px; line-height: 1; }
.map-marker-el--demand { background: var(--accent-500); }
.map-marker-el--branch { background: var(--primary-500); }
.map-marker-el--me { background: var(--success-500); }
.map-marker-el--selected { transform: rotate(-45deg) scale(1.2); box-shadow: 0 0 0 6px rgba(31, 95, 174, 0.25), var(--shadow-md); }
.map-cluster { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-600); color: #fff; font-weight: 800; font-size: var(--font-size-sm); display: grid; place-items: center; border: 3px solid #fff; box-shadow: var(--shadow-md); }
.map-split { display: grid; grid-template-columns: 1fr; gap: var(--spacing-4); }
@media (min-width: 1024px) { .map-split { grid-template-columns: 420px 1fr; height: calc(100dvh - var(--topbar-height) - var(--spacing-12)); } .map-split__list { overflow-y: auto; } }

/* --------------------------------------------------------------------------
   15. Teklif karşılaştırma
   -------------------------------------------------------------------------- */
.compare-scroll { display: flex; gap: var(--spacing-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--spacing-3); margin: 0 calc(-1 * var(--spacing-4)); padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.compare-scroll::-webkit-scrollbar { display: none; }
.compare-col { scroll-snap-align: start; flex: 0 0 min(300px, 84vw); background: var(--bg-surface); border: 1.5px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.compare-col--best { border-color: var(--success-500); }
.compare-col__ribbon { background: var(--success-500); color: #fff; font-size: var(--font-size-2xs); font-weight: 800; text-align: center; padding: 4px; letter-spacing: 0.06em; }
.compare-col__ribbon--fast { background: var(--info-500); }
.compare-col__ribbon--near { background: var(--accent-500); }
.compare-row { display: flex; justify-content: space-between; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4); font-size: var(--font-size-sm); border-bottom: 1px solid var(--border-color); }
.compare-row__label { color: var(--text-muted); }
.compare-row__value { font-weight: 600; text-align: right; }
.compare-row--highlight .compare-row__value { color: var(--success-600); }
.compare-row--total { background: var(--bg-surface-subtle); }
.compare-row--total .compare-row__value { font-size: var(--font-size-lg); font-weight: 800; }
@media (min-width: 1024px) { .compare-scroll { margin: 0; padding-left: 0; padding-right: 0; } .compare-col { flex: 1 1 0; } }

.price-lg { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-md { font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Ücret onay kutusu */
.fee-summary { border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.fee-summary__row { display: flex; justify-content: space-between; padding: var(--spacing-3) var(--spacing-4); font-size: var(--font-size-sm); border-bottom: 1px solid var(--border-color); }
.fee-summary__row:last-child { border-bottom: none; }
.fee-summary__row--total { background: var(--primary-50); font-weight: 800; }
.fee-summary__row--free { background: var(--success-50); color: var(--success-600); font-weight: 700; }

/* --------------------------------------------------------------------------
   16. Sohbet
   -------------------------------------------------------------------------- */
/* Sütunlar minmax(0, 1fr): düz 1fr içeriğin en küçük genişliğinin altına inmiyordu; yan yana
   dizilen hazır yanıt çipleri sohbet sütununu ekrandan geniş yapıyor, mesaj kutusuna
   odaklanınca kapsayıcı sola kayıp başlık ve geri düğmesi ekran dışında kalıyordu.
   overflow: clip odakla programatik kaydırmayı da engeller. */
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--topbar-height) - var(--safe-top) - var(--bottom-nav-height) - var(--safe-bottom)); background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; overflow: clip; }
.chat-layout > * { min-width: 0; }
@media (min-width: 1024px) { .chat-layout { grid-template-columns: 360px minmax(0, 1fr); height: calc(100dvh - var(--topbar-height) - var(--spacing-12)); } }
.chat-bubble { max-width: 78%; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-lg); font-size: var(--font-size-sm); line-height: 1.45; box-shadow: var(--shadow-xs); }
.chat-bubble--me { background: var(--primary-500); color: #fff; border-bottom-right-radius: 4px; margin-left: auto; }
.chat-bubble--them { background: var(--bg-surface-subtle); color: var(--text-main); border-bottom-left-radius: 4px; }
.chat-bubble__time { display: block; font-size: 10px; opacity: 0.7; margin-top: 2px; text-align: right; }

/* --------------------------------------------------------------------------
   17. Kimlik doğrulama sayfaları
   -------------------------------------------------------------------------- */
.auth-layout { min-height: 100dvh; display: grid; grid-template-columns: 1fr; background: var(--bg-app); }
.auth-layout__aside { display: none; position: relative; overflow: hidden; color: #fff; background: linear-gradient(160deg, var(--primary-600), var(--primary-900)); padding: var(--spacing-12); flex-direction: column; justify-content: space-between; }
.auth-layout__aside::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -180px; bottom: -220px; background: radial-gradient(circle, rgba(242,140,0,0.5), transparent 65%); }
.auth-layout__main { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--safe-top) + var(--spacing-6)) var(--spacing-4) calc(var(--safe-bottom) + var(--spacing-6)); }
/* Siteye dönüş ve tema düğmesi: yan panel mobilde gizli olduğu için forma yakın, üst şeritte. */
.auth-layout__top { position: absolute; top: var(--spacing-3); left: var(--spacing-3); right: var(--spacing-3); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.auth-layout__brand:hover { opacity: .85; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card__title { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: -0.02em; margin-top: var(--spacing-4); }
.auth-card__subtitle { color: var(--text-muted); font-size: var(--font-size-sm); margin-top: var(--spacing-1); margin-bottom: var(--spacing-6); }
.auth-feature { display: flex; gap: var(--spacing-3); align-items: flex-start; margin-top: var(--spacing-4); font-size: var(--font-size-sm); opacity: 0.9; }
.auth-feature .icon { flex-shrink: 0; color: var(--accent-200); }
@media (min-width: 1024px) { .auth-layout { grid-template-columns: 1.1fr 1fr; } .auth-layout__aside { display: flex; } }
.otp-inputs { display: flex; gap: var(--spacing-2); justify-content: space-between; }
.otp-inputs input { width: 48px; height: 56px; text-align: center; font-size: var(--font-size-xl); font-weight: 700; }

/* --------------------------------------------------------------------------
   18. Pazaryeri bileşenleri (açılış, güven, adımlar, satıcı vitrini)
   Mobil öncelikli; masaüstünde kart/ızgara düzenine genişler.
   -------------------------------------------------------------------------- */

/* Küçük üst etiket – bölüm başlıklarının üstünde kullanılır. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-link);
}
.eyebrow--accent { color: var(--tint-accent-fg); }

/* Açılış bölümü: mobilde kenardan kenara, masaüstünde yuvarlatılmış panel. */
.hero {
  position: relative;
  overflow: hidden;
  margin: calc(-1 * var(--spacing-4)) calc(-1 * var(--spacing-4)) 0;
  padding: var(--spacing-8) var(--spacing-4) var(--spacing-6);
  background: var(--bg-hero);
  border-bottom: 1px solid var(--border-color);
}
.hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: var(--bg-hero-glow);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: 720px; }
.hero__title {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-3xl);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-main);
}
.hero__title em { font-style: normal; color: var(--text-link); }
.hero__lead {
  margin-top: var(--spacing-3);
  font-size: var(--font-size-base);
  line-height: var(--line-relaxed);
  color: var(--text-secondary);
  max-width: 56ch;
}

/* Tek belirgin eylem: kategori + arama + buton */
.hero-search {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--spacing-2);
  margin-top: var(--spacing-5);
  padding: var(--spacing-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.hero-search__select,
.hero-search__input {
  min-height: var(--min-touch-target);
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-main);
  font-size: var(--font-size-base);
  font-family: inherit;
}
.hero-search__select {
  font-weight: 600;
  padding: 0 2rem 0 var(--spacing-3);
  border-radius: var(--radius-md);
  background-color: var(--bg-surface-subtle);
  appearance: none;
  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='%23667085' 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.75rem center;
  background-size: 13px;
}
.hero-search__field { display: flex; align-items: center; gap: var(--spacing-2); padding: 0 var(--spacing-3); min-width: 0; background: var(--bg-surface-subtle); border-radius: var(--radius-md); }
.hero-search__field .icon { color: var(--text-muted); flex-shrink: 0; }
.hero-search__input::placeholder { color: var(--neutral-400); }
.hero-search__submit { width: 100%; }
.hero-search:focus-within { border-color: var(--border-focus); box-shadow: var(--ring-focus), var(--shadow-lg); }

.hero__suggestions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-4); position: relative; z-index: 1; }
.hero__suggestions .chip { background: var(--bg-surface); }

/* Güven şeridi */
.trust-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-3);
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-5);
  border-top: 1px solid var(--border-color);
}
.trust-item { display: flex; align-items: center; gap: var(--spacing-3); min-height: 44px; min-width: 0; }
.trust-item__icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--tint-primary-fg);
}
.trust-item__icon .icon { width: 19px; height: 19px; }
.trust-item--accent .trust-item__icon { color: var(--tint-accent-fg); }
.trust-item--success .trust-item__icon { color: var(--tint-success-fg); }
.trust-item__body { min-width: 0; display: flex; flex-direction: column; }
.trust-item__value { font-size: var(--font-size-sm); font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.trust-item__label { font-size: var(--font-size-xs); color: var(--text-muted); line-height: 1.3; }

/* "Nasıl çalışır" adımları */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--spacing-3); counter-reset: step; }
.step {
  position: relative;
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.step__num {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: var(--primary-500);
  color: #fff;
  font-weight: 800;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.step--accent .step__num { background: var(--accent-500); }
.step--success .step__num { background: var(--success-500); }
.step__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.step__title { font-size: var(--font-size-base); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--spacing-2); }
.step__title .icon { color: var(--text-muted); }
.step__text { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-relaxed); }

/* Alıcı: uygun esnaf özeti */
.match-summary { display: flex; gap: var(--spacing-3); align-items: flex-start; }
.match-summary__icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--primary-50); color: var(--primary-700); }
[data-theme="dark"] .match-summary__icon { background: color-mix(in srgb, var(--primary-500) 18%, transparent); color: var(--primary-500); }
.match-summary__body { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }
.match-summary__facts { display: flex; flex-wrap: wrap; gap: var(--spacing-3); font-size: var(--font-size-sm); color: var(--text-secondary); }
.match-summary__facts > span { display: inline-flex; align-items: center; gap: var(--spacing-1); }

/* Satıcı: kabul edilmiş teklif bandı ve sohbet düğmesi */
.own-offer__accepted { flex-wrap: wrap; align-items: center; }
.own-offer__accepted > span { flex: 1 1 220px; }
.own-offer__chat { margin-left: auto; }

/* Satıcı: konum ve yarıçap kurulum uyarısı */
.seller-setup { align-items: flex-start; }
.seller-setup__body { display: flex; flex-direction: column; gap: var(--spacing-2); align-items: flex-start; }

/* Talep sihirbazı: teslim noktası seçildi mi? */
.wizard__pin-ok { color: var(--success-700, var(--success-500)); display: flex; gap: var(--spacing-1); align-items: flex-start; }
.wizard__pin-missing { color: var(--warning-700, var(--warning-500)); display: flex; gap: var(--spacing-1); align-items: flex-start; font-weight: 600; }

/* Duruşumuz: müşteri ve esnaf kartları */
.values-lead { max-width: 62ch; line-height: var(--line-relaxed); }
.values-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-4); }
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--primary-500);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.value-card--seller { border-top-color: var(--accent-500); }
.value-card__head { display: flex; align-items: center; gap: var(--spacing-3); }
.value-card__badge {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--primary-50);
  color: var(--primary-700);
}
.value-card--seller .value-card__badge { background: var(--accent-50); color: var(--accent-700); }
.value-card__title { margin: 0; font-size: var(--font-size-lg); font-weight: 800; letter-spacing: -0.01em; }
.value-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-3); }
.value-card__list li { display: flex; gap: var(--spacing-3); font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-relaxed); }
.value-card__list li > .icon { flex-shrink: 0; margin-top: 3px; color: var(--primary-500); }
.value-card--seller .value-card__list li > .icon { color: var(--accent-500); }
.value-card__list strong { color: var(--text-main); font-weight: 700; }
.values-note {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin: var(--spacing-4) 0 0;
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-subtle);
  color: var(--text-main);
  font-weight: 600;
  line-height: var(--line-relaxed);
}
.values-note > .icon { flex-shrink: 0; margin-top: 3px; color: var(--primary-500); }
[data-theme="dark"] .value-card__badge { background: color-mix(in srgb, var(--primary-500) 18%, transparent); color: var(--primary-500); }
[data-theme="dark"] .value-card--seller .value-card__badge { background: color-mix(in srgb, var(--accent-500) 18%, transparent); color: var(--accent-500); }

/* Yıldızlı puan */
.rating { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); font-weight: 700; color: var(--text-main); }
.rating__stars { display: inline-flex; align-items: center; gap: 1px; color: var(--star-500); }
.rating__stars .icon { width: 14px; height: 14px; }
.rating__stars .icon.is-empty { color: var(--neutral-300); }
[data-theme="dark"] .rating__stars .icon.is-empty { color: var(--border-strong); }
.rating__value { font-variant-numeric: tabular-nums; }
.rating__count { color: var(--text-muted); font-weight: 500; }

/* Doğrulanmış esnaf etiketi (rozet + metin) */
.verified-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 3px;
  border-radius: var(--radius-full);
  background: var(--primary-50);
  color: var(--tint-primary-fg);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  white-space: nowrap;
}
.verified-chip .verified-badge { width: 15px; height: 15px; font-size: 10px; }

/* Sosyal kanıt satırı ("4 esnaf teklif verdi") */
.proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
}
.proof strong { color: var(--text-main); font-variant-numeric: tabular-nums; }
.proof--active { color: var(--tint-success-fg); }
.proof--active strong { color: var(--tint-success-fg); }
.proof__dots { display: inline-flex; }
.proof__dots span {
  width: 18px;
  height: 18px;
  margin-right: -6px;
  border-radius: 50%;
  border: 2px solid var(--bg-surface);
  background: var(--primary-200);
  display: inline-block;
}
[data-theme="dark"] .proof__dots span { background: var(--primary-400); }

/* Satıcı kartı – güven odaklı */
.seller-card {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
  text-decoration: none;
  transition: transform var(--transition-speed) var(--ease-out), box-shadow var(--transition-speed), border-color var(--transition-speed);
}
.seller-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--primary-200); text-decoration: none; color: var(--text-main); }
.seller-card__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.seller-card__name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--font-size-sm); min-width: 0; }
.seller-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1) var(--spacing-3); font-size: var(--font-size-xs); color: var(--text-muted); }
.seller-card__quote {
  margin: 0;
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--bg-surface-subtle);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--primary-200);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: var(--line-snug);
}

/* Satıcı kazanım bandı */
/* Sayfanın son bölümü olduğunda alt gezinme çubuğu şeridin üzerine biniyor ve
   son düğme dokunulamaz hâle geliyordu; mobilde çubuk yüksekliği kadar ek alt
   boşluk bırakılır. Geniş ekranda alt çubuk olmadığı için ek boşluk verilmez. */
.promo-band {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-6) var(--spacing-5) calc(var(--spacing-6) + var(--bottom-nav-height) + var(--safe-bottom));
  border-radius: var(--radius-xl);
  background: var(--bg-band);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.promo-band::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 140, 0, 0.42), transparent 66%);
  pointer-events: none;
}
.promo-band__inner { position: relative; z-index: 1; max-width: 620px; }
.promo-band__eyebrow { font-size: var(--font-size-2xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-200); }
.promo-band__title { margin-top: var(--spacing-2); font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); color: #fff; }
.promo-band__text { margin-top: var(--spacing-2); font-size: var(--font-size-sm); line-height: var(--line-relaxed); color: rgba(255, 255, 255, 0.82); }
.promo-band__list { display: grid; gap: var(--spacing-2); margin: var(--spacing-4) 0 0; padding: 0; list-style: none; }
.promo-band__list li { display: flex; align-items: flex-start; gap: var(--spacing-2); font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.9); }
.promo-band__list .icon { color: var(--accent-200); flex-shrink: 0; margin-top: 2px; }
.promo-band__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-5); }
/* Koyu zemin üzerindeki butonlar (promo bandı, hero kartı, sol menü) */
.btn-on-dark { background: var(--neutral-0); color: var(--primary-700); border-color: var(--neutral-0); box-shadow: var(--shadow-sm); }
.btn-on-dark:hover { background: var(--neutral-100); color: var(--primary-800); }
.btn-on-dark-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.btn-on-dark-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.65); }

/* Filtre çubuğu (keşfet ekranı) */
.filter-bar {
  display: grid;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.filter-bar__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-2); }
.result-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-1); }
@media (min-width: 640px) { .result-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--spacing-3); } }
.result-head__count { font-size: var(--font-size-sm); color: var(--text-secondary); }
.result-head__count strong { color: var(--text-main); font-variant-numeric: tabular-nums; }

@media (min-width: 480px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero { margin: calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-6)) 0; padding: var(--spacing-10) var(--spacing-6) var(--spacing-8); }
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { flex-direction: column; gap: var(--spacing-3); }
}

@media (min-width: 1024px) {
  .hero {
    margin: 0;
    padding: var(--spacing-12) var(--spacing-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
  }
  .hero__title { font-size: var(--font-size-5xl); }
  .hero__lead { font-size: var(--font-size-lg); }
  .hero-search {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--spacing-2);
    border-radius: var(--radius-full);
    padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
  }
  .hero-search__select { border-radius: var(--radius-full); min-height: 48px; }
  .hero-search__field { background: transparent; border-left: 1px solid var(--border-color); border-radius: 0; }
  .hero-search__submit { width: auto; border-radius: var(--radius-full); }
  .trust-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-4); }
  .promo-band { padding: var(--spacing-10); }
  .promo-band__title { font-size: var(--font-size-3xl); }
  .promo-band__list { grid-template-columns: repeat(2, 1fr); }
  .filter-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--spacing-4); gap: var(--spacing-4); }
  .filter-bar__row { grid-template-columns: minmax(150px, 190px) minmax(150px, 190px); }
}

/* --------------------------------------------------------------------------
   19. Yardımcı sınıflar
   -------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--spacing-3); }
.stack-sm { display: flex; flex-direction: column; gap: var(--spacing-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--spacing-5); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.row-start { display: flex; align-items: center; gap: var(--spacing-2); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--spacing-4); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--spacing-4); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* Izgara sütunu "1fr" iken içeriğin min-content genişliği sütunu taşırabiliyor: uzun
   başlıklı bir kart mobilde sayfayı yatay kaydırıyordu. minmax(0, 1fr) sütunun içerikten
   küçülebilmesini sağlar. */
.grid-main-aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-5); }
@media (min-width: 1024px) { .grid-main-aside { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-primary { color: var(--primary-600) !important; }
.text-success { color: var(--success-600) !important; }
.text-danger { color: var(--danger-500) !important; }
.text-warning { color: var(--warning-600) !important; }
.text-accent { color: var(--accent-600) !important; }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.fw-bold, .font-weight-bold { font-weight: 700 !important; }
.fw-800 { font-weight: 800; }
.font-weight-medium { font-weight: 500; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabular { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--border-color); margin: var(--spacing-4) 0; }
.hide-mobile { display: none !important; }
@media (min-width: 1024px) { .hide-mobile { display: initial !important; } .hide-desktop { display: none !important; } }
/* Tablo hücresinde "initial" satır içi (inline) demektir ve tabloyu bozar; hücreler tablo hücresi olarak döner. */
@media (min-width: 1024px) { th.hide-mobile, td.hide-mobile { display: table-cell !important; } }
.icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }
.bg-light { background-color: var(--bg-surface-subtle) !important; }
.bg-white { background-color: var(--bg-surface) !important; }
.border { border-color: var(--border-color) !important; }
.rounded-4 { border-radius: var(--radius-lg) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.kbd { font-family: var(--font-mono); font-size: var(--font-size-xs); background: var(--bg-surface-subtle); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px; }

/* Blazor varsayılan hata çubuğu */
#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; background: var(--danger-50); color: var(--danger-600); border-top: 1px solid var(--danger-100); padding: var(--spacing-3) var(--spacing-4); font-size: var(--font-size-sm); box-shadow: var(--shadow-lg); }
#blazor-error-ui .reload { font-weight: 700; margin-left: var(--spacing-2); }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: var(--spacing-4); top: var(--spacing-3); }
.blazor-error-boundary { background: var(--danger-50); color: var(--danger-600); padding: var(--spacing-4); border-radius: var(--radius-md); }
.blazor-error-boundary::after { content: "Bu bölüm yüklenirken bir hata oluştu."; }

/* Animasyonlar */
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.fade-up { animation: fadeUp 0.3s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Yazdırma */
@media print {
  .sidebar, .topbar, .mobile-bottom-nav, .sticky-actions, .toast-container { display: none !important; }
  .app-shell__content { padding: 0; max-width: none; }
}

/* ------------------------------------------------------------------ 19. Dokunmatik hedef boyutları
   Yalnızca dokunmatik cihazlarda (pointer: coarse) uygulanır; fare ile kullanılan masaüstü
   yerleşimi değişmez. Görsel boyut korunur, tıklama alanı büyütülür. */
@media (pointer: coarse) {
    /* Adım göstergesi görsel olarak ince bir çubuktur; dokunma alanı görünmez şekilde genişletilir. */
    .stepper__step { position: relative; }
    .stepper__step::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -20px;
        bottom: -20px;
    }

    /* Filtre çipleri ve segmentli düğmeler 44 px'e tamamlanır. */
    .chip, .btn-filter-pill, .radius-pill { min-height: var(--min-touch-target); }
    .segmented__item { min-height: var(--min-touch-target); }

    /* MapLibre'nin kendi yakınlaştırma düğmeleri 29px geliyor; parmakla
       kullanılabilmesi için dokunmatik kipte büyütülür. Kütüphanenin stil dosyası
       çalışma anında <head>'e eklendiği için bizden sonra gelir; eşit özgüllükteki
       kural kaybeder, bu yüzden iki sınıflı seçici kullanılır. */
    .maplibregl-ctrl.maplibregl-ctrl-group button {
      width: var(--min-touch-target);
      height: var(--min-touch-target);
    }

    /* "Tümünü gör" türü bölüm bağlantıları tek başına duran hedeflerdir. */
    .section__link { min-height: var(--min-touch-target); }

    /* Pencerelerin kapat (×) düğmesi: simge boyutu aynı kalır (arka plan ortalı), dokunma alanı büyür. */
    .btn-close { min-width: var(--min-touch-target); min-height: var(--min-touch-target); box-sizing: border-box; }

    /* Küçük düğmeler ve üst bardaki marka bağlantısı da parmakla kullanılır. */
    .btn-sm { min-height: calc(var(--min-touch-target) - 4px); }
    .topbar__brand { min-height: calc(var(--min-touch-target) - 4px); }
}

/* ------------------------------------------------------------------ 20. Ziyaretçi (public) yerleşimi
   Oturumsuz ziyaretçi bir pazaryeri sitesi görür: sol uygulama menüsü yoktur, üst menü tanıtım
   bağlantılarını taşır, içerik daha geniş bir kolonda ortalanır. */
.app-shell--public .app-shell__content {
    max-width: 1200px;
    padding-bottom: var(--spacing-10);
}

.topbar--public {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-color);
    gap: var(--spacing-5);
}

.topbar--public .topbar__brand { font-size: var(--font-size-lg); }

.topbar__nav { display: none; align-items: center; gap: var(--spacing-1); margin-right: auto; }

.topbar__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-2) var(--spacing-3);
    min-height: var(--min-touch-target);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.topbar__nav-link:hover { background: var(--bg-surface-subtle); color: var(--text-main); text-decoration: none; }
.topbar__nav-link.active { color: var(--text-link); background: var(--primary-50); }

/* Ziyaretçide sol menü olmadığı için üst bar markayı taşır ve içerik kenar boşlukları eşitlenir. */
@media (min-width: 1024px) {
    .topbar--public .topbar__brand { display: flex; }
    .topbar__nav { display: flex; }
    .app-shell--public .topbar { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
}

/* ------------------------------------------------------------------ 21. Kategori vitrini (yeniden)
   Kategoriler liste satırı değil, kart olarak sunulur: büyük ikon bloğu, ad ve alt kategori sayısı. */
.category-tile {
    flex-direction: column;
    align-items: flex-start;
    /* İkon üstte, ad ve sayı altta: kart yüksekliği boş kalmaz. */
    justify-content: space-between;
    gap: var(--spacing-3);
    min-height: 128px;
    padding: var(--spacing-4);
}

.category-tile__icon { width: 52px; height: 52px; border-radius: var(--radius-lg); }
.category-tile__icon .icon { width: 26px; height: 26px; }
.category-tile__name { font-size: var(--font-size-base); }
.category-tile__body { gap: 4px; }

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

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

@media (min-width: 1024px) {
    .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .category-tile { min-height: 140px; padding: var(--spacing-5); }
    .category-tile__icon { width: 56px; height: 56px; }
}

/* Kart hâline gelince sağdaki ok işareti anlamını yitirir. */
.category-tile .category-tile__arrow { display: none !important; }

/* ------------------------------------------------------------------ 22. Karşılama arama kutusu
   Tam yuvarlak kapsayıcıda, içindeki yuvarlak düğme kenar yayını kesip taşmış gibi görünüyordu. */
@media (min-width: 768px) {
    .hero-search { border-radius: var(--radius-2xl); padding: var(--spacing-3); }
    .hero-search__select { border-radius: var(--radius-lg); }
}

/* ------------------------------------------------------------------ 23. Tam genişlik yerleşimi
   İçerik geniş ekranlarda ortada dar bir kolonda sıkışmak yerine sayfayı doldurur; kenar
   boşlukları ekran büyüdükçe artar. */
@media (min-width: 1280px) {
    .app-shell__content { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
    .app-shell--public .app-shell__content { max-width: 1600px; }
    .app-shell--public .topbar { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
}

@media (min-width: 1680px) {
    .app-shell__content { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
}

/* Çok geniş ekranlarda kart ızgaraları bir sütun daha açılır; kartlar aşırı uzayıp
   satır başına iki öğeyle seyrek görünmez. */
@media (min-width: 1680px) {
    /* `card-grid--2` bilinçli olarak iki sütunda kalır (şube, teklif, değerlendirme kartları);
       eşit özgüllükte sonradan gelen bir kural onu ezmemeli. */
    .card-grid:not(.card-grid--2) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ 24. Üst gezinti
   Sol menü kaldırıldı; ana gezinti her durumda üst bardadır. Mobilde alt navigasyon kullanılır. */
.app-shell--topnav .sidebar { display: none !important; }

.app-shell--topnav .app-shell__content,
.app-shell--topnav .app-footer__inner,
.app-shell--topnav .app-footer__bar { max-width: var(--content-max-width); }

.app-shell--topnav .topbar {
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    gap: var(--spacing-3);
}

.topnav { display: none; align-items: center; flex-wrap: nowrap; gap: 2px; min-width: 0; }

.topnav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-2) var(--spacing-3);
    min-height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-speed), color var(--transition-speed);
}

.topnav__link:hover { background: var(--bg-surface-subtle); color: var(--text-main); text-decoration: none; }
.topnav__link.active { color: var(--text-link); background: var(--primary-50); }
.topnav__link .badge-count { margin-left: 2px; }

.topnav__group { position: relative; }
.topnav__backdrop { background: transparent; backdrop-filter: none; }
.topnav__panel { left: 0; right: auto; min-width: 248px; z-index: 1150; }

/* Davet Et & Kazan: alıcıya kazanç fırsatını hatırlatan vurgulu ikon. Dar masaüstünde
   (1024–1439px) etiket gizlenir; aksi hâlde arama kutusuyla birlikte üst bar taşardı. */
.topnav__link--invite .icon { color: var(--tint-accent-fg); }
@media (min-width: 1024px) and (max-width: 1439.98px) {
    .topnav__link--invite .topnav__label { display: none; }
}
/* 1024–1279px'te (yatay tablet, dar dizüstü) alıcı menüsü Inter yazı tipiyle zaten ~34px
   taşıyordu. Bu aralıkta marka yazısı görsel olarak gizlenir (E simgesi kalır ve ana sayfaya
   götürür; ad ekran okuyucuya okunmaya devam eder), böylece menü ve aksiyonlar tek satıra sığar.
   Yalnızca davet bağlantısı olan (alıcı) üst barda uygulanır; diğer rollerin üst barı değişmez. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .topbar:has(.topnav__link--invite) .topbar__brand > span:not(.brand-mark) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Menü, marka ile sağdaki aksiyonlar arasında yer alır; arama kutusu kalan boşluğu alır. */
@media (min-width: 1024px) {
    .topnav { display: flex; }
    .app-shell--topnav .topbar__search { max-width: 320px; margin-left: auto; }
}

@media (min-width: 1440px) {
    .app-shell--topnav .topbar { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
    .app-shell--topnav .topbar__search { max-width: 420px; }
}

/* Sol menü kaldırıldığı için marka artık her ekranda üst barda kalır ve üst bar tek satırda
   sıkışmadan çalışır: menü daralabilir, arama kutusu esner, aksiyonlar sabit kalır. */
.app-shell--topnav .topbar { flex-wrap: nowrap; }

.app-shell--topnav .topbar__brand { display: flex; flex-shrink: 0; }

/* Menü küçülmez ve sarmalanmaz; açılır panelin kırpılmaması için taşma görünür kalır.
   Daralan alanı arama kutusu karşılar. */
.app-shell--topnav .topnav { flex: 0 0 auto; flex-wrap: nowrap; overflow: visible; }
.app-shell--topnav .topbar__actions { flex-shrink: 0; }
.app-shell--topnav .topbar__search { flex: 1 1 auto; min-width: 0; }

/* Dar masaüstünde menü etiketleri yerine yalnızca ikonlar gösterilerek tek satır korunur. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .app-shell--topnav .topbar__search { display: none; }
}

/* ---------------------------------------------------------------- Giriş/kayıt modalı */
/* Kimlik akışı ayrı sayfaya gitmeden bulunulan sayfanın üstünde açılır; sayfalar
   derin bağlantılar ve returnUrl yönlendirmesi için yerinde durur. */
.auth-dialog { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: var(--spacing-4); background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); overflow-y: auto; }
.auth-dialog__panel { position: relative; width: 100%; max-width: 480px; max-height: calc(100dvh - var(--spacing-8)); overflow-y: auto; background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--spacing-6); }
.auth-dialog__close { position: absolute; top: var(--spacing-3); right: var(--spacing-3); z-index: 1; }
.auth-dialog__body .auth-card { max-width: none; }
@media (max-width: 639.98px) {
    .auth-dialog { padding: 0; align-items: flex-end; }
    .auth-dialog__panel { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92dvh; padding-bottom: calc(var(--safe-bottom) + var(--spacing-6)); }
}
/* Modal içindeki "kayıt ol / girişe dön" bağlantıları düğme olduğu için bağlantı gibi görünür. */
.btn-link { background: none; border: none; padding: 0; color: var(--primary-600); cursor: pointer; font: inherit; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Genel modal
   Bootstrap'in .modal-backdrop sınıfı düz siyah (opaklık azaltması yok) ve .modal-dialog
   pointer-events: none taşır; .modal sarmalayıcısı olmadan kullanılınca ekran kararıyor ve
   içerik tıklanamıyordu. Kendi sınıflarımız çakışmaz. */
.app-modal { position: fixed; inset: 0; z-index: 1150; display: flex; align-items: center; justify-content: center; padding: var(--spacing-4); background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); overflow-y: auto; }
.app-modal__panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - var(--spacing-8)); overflow-y: auto; background: var(--bg-surface); color: var(--text-main); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
.app-modal__panel > .modal-header,
.app-modal__panel > .modal-body,
.app-modal__panel > .modal-footer { padding: var(--spacing-4) var(--spacing-5); }
.app-modal__panel > .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); border-bottom: 1px solid var(--border-color); }
.app-modal__panel > .modal-footer { display: flex; justify-content: flex-end; gap: var(--spacing-2); border-top: 1px solid var(--border-color); }
@media (max-width: 639.98px) {
    .app-modal { padding: 0; align-items: flex-end; }
    .app-modal__panel { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92dvh; }
    .app-modal__panel > .modal-footer { padding-bottom: calc(var(--safe-bottom) + var(--spacing-4)); }
}

/* ---------------------------------------------------------------- Filtre çubuğu
   Filtre çubukları "card filters" olarak yazılıyor. Bootstrap'in .card sınıfı
   flex-direction: column verir; sayfa kapsamlı .filters kuralları yalnızca
   display:flex dediği için yön sütunda kalıyor ve flex-basis (240px) yüksekliğe
   uygulanınca arama kutusu dev bir daireye dönüşüyordu. Yön burada bir kez sabitlenir;
   bu dosya bootstrap'ten sonra yüklenir. */
.filters { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--spacing-3); }
.filters .search-box { flex: 1 1 240px; min-width: 200px; }
.filters__count { margin-left: auto; white-space: nowrap; }

/* ---------------------------------------------------------------- Ortak sayfa düzenleri
   Bu sınıflar sayfa şablonlarında yaygın kullanılıyordu ama yalnızca birkaç sayfanın
   izole .razor.css dosyasında tanımlıydı. Kendi CSS dosyası olmayan sayfalarda özet
   kutuları ızgaraya girmeyip alt alta tam genişlikte diziliyordu. Tanımlar buraya
   alındı; izole kopyalar daha yüksek özgüllükte olduğu için davranışları değişmez. */
.stats { display: grid; gap: var(--spacing-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-4); }
}

.row-actions { display: inline-flex; gap: var(--spacing-1); justify-content: flex-end; flex-wrap: nowrap; }
/* Pasif satır soluk görünür; sabitlenen işlem hücresi saydamlaşmaz (yoksa altından kayan
   sütunların yazısı simgelerin üstünden görünüyordu), yalnızca içindeki düğmeler soluklaşır. */
.row-passive td { opacity: 0.6; }
.row-passive td:has(> .row-actions) { opacity: 1; }
.row-passive td > .row-actions { opacity: 0.75; }

/* Form alanlarını geniş ekranda yan yana, dar ekranda alt alta dizer. */
.form-grid { display: grid; gap: var(--spacing-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form-row { display: grid; gap: var(--spacing-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.empty-icon { font-size: 3rem; margin-bottom: var(--spacing-3); color: var(--text-muted); }
.modal-title { font-size: 1.2rem; font-weight: 700; margin: 0; color: var(--text-main); }
.spinner-small { width: 14px; height: 14px; border-width: 2px; }
.type-icon { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--bg-surface-subtle); font-size: 1.1rem; flex-shrink: 0; }

/* ---- Değerlendirme penceresi ----------------------------------------------
   Kriter satırları ızgarayla hizalanır: önceden stil yoktu, her satırın yıldızları
   etiket uzunluğuna göre farklı yerden başlıyordu. Telefonda etiket üste geçer. */
.review-modal__title-icon { color: var(--warning-500); width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.review-modal__overall { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2); padding: var(--spacing-3); margin-bottom: var(--spacing-3); background: var(--bg-surface-subtle); border-radius: var(--radius-lg); }
.review-modal__overall .review-modal__label { font-weight: 600; }
.review-modal__criteria { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--spacing-3); row-gap: var(--spacing-1); margin-bottom: var(--spacing-4); }
.review-modal__hint { grid-column: 1 / -1; font-size: var(--font-size-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--spacing-1); }
.review-modal__row { display: contents; }
.review-modal__label { display: inline-flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); color: var(--text-main); }
.review-modal__row > .review-modal__label { align-self: center; }
.review-done { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-2) var(--spacing-3); font-size: var(--font-size-sm); }
@media (max-width: 480px) {
    .review-modal__criteria { grid-template-columns: 1fr; }
    .review-modal__row > .review-modal__label { margin-top: var(--spacing-2); }
}

/* ------------------------------------------------------------------ İletişim bilgisi kartları
   Alıcı (ContactShareCard) ve satıcı firma (SellerContactShareCard) kartları aynı sınıfları
   kullanır. Stiller önceden yalnızca alıcı kartına özel (scoped) tanımlıydı; satıcı kartı
   stilsiz, düz metin gibi görünüyordu. */
.contact-card {
    background: var(--bg-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3);
}
.contact-card--granted { background: var(--success-50); border-color: var(--success-100); }
.contact-card--pending { background: var(--warning-50); border-color: var(--warning-100); }
.contact-card--rejected { background: var(--bg-surface-subtle); }

.contact-card__head { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; }
.contact-card__head > .stack-sm { flex: 1; }

.contact-card__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: grid;
    place-items: center;
    background: var(--bg-surface);
    color: var(--text-secondary);
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}
.contact-card__icon--success { background: var(--success-500); color: #fff; border-color: transparent; }
.contact-card__icon--warning { background: var(--warning-500); color: #fff; border-color: transparent; }
.contact-card__icon--danger { background: var(--danger-100); color: var(--danger-600); border-color: transparent; }

.contact-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2) var(--spacing-3);
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
}
.contact-card__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-card__cell--wide { grid-column: 1 / -1; }
.contact-card__label { font-size: var(--font-size-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }

.contact-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-2); margin-top: var(--spacing-3); }
.contact-card__actions .btn { min-height: var(--min-touch-target); }
.contact-card__request, .contact-card__call { width: 100%; }

@media (min-width: 640px) {
    .contact-card__request, .contact-card__call { width: auto; }
    .contact-card__actions { display: flex; justify-content: flex-end; }
    .contact-card__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------ Satıcı bakiye göstergesi (üst bar) */
.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--spacing-3);
  border: 1px solid var(--success-100);
  border-radius: var(--radius-full);
  background: var(--success-50);
  color: var(--tint-success-fg);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.balance-chip:hover { border-color: var(--success-500); }
.balance-chip--low { background: var(--warning-50); border-color: var(--warning-100); color: var(--tint-warning-fg); }
.balance-chip__free { font-weight: 600; font-size: var(--font-size-xs); opacity: .85; }
.balance-chip__short { display: none; }
/* Telefonda üst bar dar: bakiye simgesiz ve kuruşsuz, tema düğmesi çekmece menüde. Önceden
   satıcının üst barı 76px taşıyor, mobil tarayıcı sayfayı genişlettiği için alttan açılan
   pencereler (teklif formu dahil) ekrandan taşıyordu. */
@media (max-width: 480px) {
  .balance-chip { padding: 0 var(--spacing-2); font-size: var(--font-size-xs); gap: 4px; }
  .balance-chip__icon, .balance-chip__amount { display: none; }
  .balance-chip__short { display: inline; }
  .topbar__theme { display: none; }
  /* Satıcının üst barı (menü, marka, bakiye, zil, avatar) 390px'e sığsın diye boşluklar daraltılır. */
  .topbar, .app-shell--topnav .topbar { gap: var(--spacing-2); padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
}
@media (pointer: coarse) {
  .balance-chip { min-height: 40px; }
}