/* ==========================================================================
   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;
}
.stat-card { box-shadow: var(--shadow-card); gap: var(--spacing-1); padding-right: calc(var(--spacing-4) + 44px); }
.stat-card__label { font-size: var(--font-size-2xs); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.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; }
.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); }
.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; }
.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
   -------------------------------------------------------------------------- */
.chat-layout { display: grid; grid-template-columns: 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; }
@media (min-width: 1024px) { .chat-layout { grid-template-columns: 360px 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); }

/* 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; } }
.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); }

    /* 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; }

/* 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: wrap; }
.row-passive td { opacity: 0.6; }

/* 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; }