/* ==========================================================================
   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);
  /* Çalışma ekranlarının ortak kuralları (ADR-050) --text-primary adını kullanır; tanımsızken üst menünün açılır paneli koyu şeridin
     beyaz yazısını devralıyor, menü öğeleri beyaz zeminde görünmüyordu (ADR-051 görsel denetimi). Ana metin rengine eşittir. */
  --text-primary: var(--text-main);

  --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;
  /* Başlık yazı tipi (ana sayfa): esnaf tabelası karakterli grotesk; yüklenemezse gövde yazı tipine düşer. */
  --font-display: "Bricolage Grotesque", var(--font-family);
  /* Logo renkleri (OP #48 yazı logosu: lacivert yazı, turuncu yaylar). Logo görseldir; bu değerler logo rengine eşlik eden
     ögeler içindir. */
  --brand-ink: #062c72;
  --brand-tag: #f49c24;

  /* Bölüm renkleri (2026-10-08, yeni arayüz): Çarşı lacivert, Yemek koyu kahve ve köz, Usta koyu petrol yeşili; turuncu
     (--accent-500) ortak vurgudur. Koyu bölüm zeminleri (açılış, canlı bant) iki temada da koyudur; üzerindeki yazılar
     --on-dark-* renklerindedir. */
  --carsi-900: #0b1f38;
  --carsi-800: #0f2a4a;
  --carsi-700: #17406f;
  --yemek-900: #1f0e04;
  --yemek-800: #2b1406;
  --yemek-700: #4a1f05;
  --yemek-600: #7a3104;
  --yemek-ember: #e2552b;
  --yemek-cream: #f3d9c2;
  --usta-900: #0a2624;
  --usta-800: #0f3a35;
  --usta-700: #155049;
  --mint-400: #3ddc97;
  --mint-600: #127a52;
  --mint-50: #e2f7ee;
  --saffron-400: #ffb14a;
  --paprika-500: #d9481c;
  --on-dark-1: #ffffff;
  --on-dark-2: #c3d1e4;
  --on-dark-3: #9fb2cb;
  --dot-grid: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  --bg-hero-carsi: radial-gradient(900px 480px at 85% 10%, rgba(242, 140, 0, 0.22), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(31, 95, 174, 0.45), transparent 60%),
    linear-gradient(180deg, var(--carsi-900) 0%, var(--carsi-800) 100%);
  --bg-hero-yemek: radial-gradient(760px 520px at 78% 40%, rgba(242, 140, 0, 0.32), transparent 62%),
    radial-gradient(600px 400px at 0% 100%, rgba(217, 72, 28, 0.28), transparent 60%),
    linear-gradient(180deg, var(--yemek-900), #2d1406);
  --bg-hero-usta: radial-gradient(720px 460px at 82% 18%, rgba(242, 140, 0, 0.26), transparent 62%),
    radial-gradient(640px 420px at 0% 100%, rgba(61, 220, 151, 0.18), transparent 60%),
    linear-gradient(180deg, var(--usta-900), var(--usta-800));
  --bg-live-band: radial-gradient(800px 420px at 100% 0%, rgba(242, 140, 0, 0.14), transparent 60%),
    radial-gradient(900px 500px at 0% 60%, rgba(31, 95, 174, 0.35), transparent 60%),
    linear-gradient(180deg, var(--carsi-900), #0e2747 60%, var(--carsi-900));
  --shadow-float: 0 30px 60px -30px rgba(11, 31, 56, 0.5), 0 8px 18px -10px rgba(11, 31, 56, 0.25);
  --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;
  /* Yeni arayüz sayfa sütunu (ec-wrap, .carsi-body, .fh-wrap…). Geniş ekranda büyür ki 1920–2560 px'te yanlar boş kalmasın
     (kullanıcı 2026-10-09); metin satırları kendi ch sınırlarıyla okunur kalır. */
  --page-max: 1240px;
  --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;
}
@media (min-width: 1680px) { :root { --page-max: 1520px; --content-max-width: 1760px; } }
@media (min-width: 2200px) { :root { --page-max: 1800px; --content-max-width: 2040px; } }

/* --------------------------------------------------------------------------
   2. Koyu Tema
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --brand-ink: #e7eef8;
  --brand-tag: #ff9f2e;
  --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;
  --text-primary: var(--text-main);

  --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;
  /* Alt menünün ortasındaki yuvarlak düğme (Talep Ver, çalışma ekranlarında Teklif/Görev) menünün 12 px üstüne taşar: sayfa sonundaki
     son öğe düğmeye değmesin diye boşluk bu payı da içerir (arayüz denetimi 2026-10-24). */
  padding: var(--spacing-4) var(--spacing-4) calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-6) + 12px);
}

.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 ("Talep Ver"; masaüstünde, geçiş düğmesinin yanında) */
.topbar__cta { flex-shrink: 0; }
.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;
  /* Sekme sayısı ne olursa olsun (yönetim hesabında 2–3) çubuk tam genişlikte eşit bölünür; sabit 5 sütunda az sekme sola
     yaslanıp sağ yarı boş kalıyordu (2026-10-17). */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 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: var(--carsi-900);
  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)); }
}

/* Tablette sohbet rafının yuvarlak düğmesi (ChatDock, 60 px) alt gezinmenin 12 px üstünde, sağda durur: sayfa sonundaki son öğe
   düğmenin altında kalmasın diye içerik alt boşluğu düğme kadar büyür. Alt eylem çubuğu olan sayfalarda düğme çubuğun üstüne
   çıktığı için boşluk değişmez (çubuk yerinde kalır). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body:has(.chat-dock--tablet):not(:has(.sticky-actions, .fc-summary__actions)) .app-shell__content {
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 12px + 60px + var(--spacing-4));
  }
}

/* --------------------------------------------------------------------------
   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); }
/* Bölüm başlığı yeni arayüzün başlık yazı tipinde (2026-10-16): cüzdan, usta paneli ve restoran paneli bölüm başlıkları aynı
   dildedir (telefonda 18 px, masaüstünde 20 px). */
.section__title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 750; letter-spacing: -0.015em; }
.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; }
/* Turuncu zeminde lacivert yazı (~6,7:1): beyaz yazı 2,46:1 ile okunmuyordu (arayüz denetimi 2026-10-21, ürün sahibi kararı
   2026-10-22). Bölüm başlığı, sohbet rafı ve yemek panelindeki turuncu düğmeler zaten bu düzendeydi; marka turuncusu aynı. */
.btn-accent, .custom-btn-secondary { background: var(--accent-500); color: var(--carsi-900); box-shadow: var(--shadow-accent); }
.btn-accent:hover, .custom-btn-secondary:hover { background: var(--accent-600); color: var(--carsi-900); }
.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(--tint-danger-fg); }
.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)); } }

/* Sayfanın alt eylem çubuğu (Kaydet, Gönder, Devam, Teklif ver…). Telefon kabuğunda (.app-shell--m) ekranın altına sabittir:
   yeri, görünümü ve sayfa alt boşluğu phone.css'teki ortak kuraldadır (arayüz denetimi 2026-10-29). Bu yapışkan kural yalnız eski
   telefon kabuğunda (yönetim hesabı) geçerlidir. */
.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);
}
/* Klavye açıkken (platform-ui.js, <html data-kb="open">) alt gezinme gizlenir; sabit şeritler ve sohbet klavyenin üstüne iner. */
html[data-kb="open"] .mobile-bottom-nav { display: none; }
html[data-kb="open"] .faob { display: none; }
html[data-kb="open"] .sticky-actions { bottom: 0; }
html[data-kb="open"] .chat-layout { height: calc(100dvh - var(--topbar-height) - var(--safe-top)); }
@media (min-width: 1024px) { .sticky-actions { position: static; margin: var(--spacing-6) 0 0; border: none; padding: 0; background: transparent; justify-content: flex-end; } }
/* Uzun formlarda masaüstünde de ekranın altında sabit kaydet şeridi (OP #105, #107 — 2026-10-20): sayfa açılınca kaydet/iptal
   düğmeleri görünür, form bu şeridin altından kayar. Telefonda .sticky-actions ekranın altına sabittir (phone.css). */
@media (min-width: 1024px) {
  .sticky-actions.sticky-actions--desk {
    position: sticky; bottom: var(--spacing-3); z-index: 20; margin: var(--spacing-5) 0 0;
    padding: var(--spacing-3) var(--spacing-4); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    background: var(--bg-surface); box-shadow: 0 12px 32px -18px rgb(0 0 0 / .5); justify-content: flex-end; align-items: center;
  }
  /* Sağ alttaki "Mesajlar" çubuğu (ChatDock, ~58 px) varken şerit onun üstünde durur; kaydet düğmesinin ucu örtülmez. */
  body:has(.chat-dock:not(.chat-dock--tablet)) .sticky-actions.sticky-actions--desk { bottom: calc(var(--spacing-3) + 64px); }
}

/* --------------------------------------------------------------------------
   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; }
/* Parola alanındaki göster/gizle düğmesi: alanın sağında dikey ortada. Alanın soldaki simge kuralı (.icon mutlak, left: 14px) düğmenin
   içindeki göz simgesine de uyuyordu; simge düğmenin altına kayıyordu (giriş, kayıt, parola sıfırlama; tam test 2026-10-30). */
.form-control-wrapper > .pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-grid; place-items: center; }
.form-control-wrapper > .pw-toggle .icon { position: static; }

.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); }
/* Parola alanlarında tarayıcının yerel göster/gizle ve temizle düğmeleri gizlenir (Edge ::-ms-reveal / ::-ms-clear): alanların
   kendi göster/gizle düğmesi var; ikisi birden görünüyordu (OP #90). */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display: none; }
.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; }
/* Yalnız anahtarın değiştirdiği satır (OP #120): etiket yalnız anahtarı sarar, yazı yanında durur ve tıklanınca değiştirmez. */
.switch-row { display: flex; align-items: center; gap: var(--spacing-3); }
.switch-row > .switch__label { cursor: default; }
[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
   -------------------------------------------------------------------------- */
/* Köşe yarıçapı yeni arayüzün içerik kartlarıyla aynı (22 px; ec-card, sd-card, mo-card, upn-item, fm-box). Küçük döşemeler
   (stat-card, list-group-card) 16 px kalır. Usta sayfalarındaki ".x .card { radius-xl }" kuralları artık yedektir (2026-10-16). */
.card, .custom-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
}
.custom-card { padding: var(--spacing-4); }
.card { --bs-card-bg: var(--bg-surface); --bs-card-border-color: var(--border-color); --bs-card-cap-bg: var(--bg-surface-subtle); }
.card-interactive, .custom-card-interactive { cursor: pointer; transition: transform var(--transition-speed) var(--ease-out), box-shadow var(--transition-speed), border-color var(--transition-speed); }
.card-interactive:hover, .custom-card-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--primary-200); }
.custom-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-3); padding-bottom: var(--spacing-3); border-bottom: 1px solid var(--border-color); }
.card-pad { padding: var(--spacing-4); }
@media (min-width: 1024px) { .card-pad { padding: var(--spacing-5); } }

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

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

/* İstatistik kartı */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  min-height: 108px;
  position: relative;
  overflow: hidden;
}
/* Kart kendi genişliğine göre yerleşir (container query): ızgara sütun sayısını ekran
   genişliğine göre seçtiği için dar bir alanda (pencere, yan panel) kart ~140px'e düşüyor,
   sağ üstteki simge "TAMAMLANAN SATIŞ" gibi uzun etiketlerin ve "%91" gibi değerlerin
   üstüne biniyordu. Simgenin yeri artık kartın kendisine değil etiket/değer satırlarına
   ayrılır; kart daralınca simge başlığın üstüne iner ve metin tüm genişliği kullanır. */
.stat-card { box-shadow: var(--shadow-card); gap: var(--spacing-1); container-type: inline-size; }
/* Etiket normal büyük/küçük harfle yazılır (YENI-ARAYUZ.md §2: büyük harfli etiket yok); küçük boyda büyük harfin sağladığı
   okunurluğu biraz daha büyük yazı ve orta kalınlık sağlar. */
.stat-card__label { font-size: var(--font-size-xs); font-weight: 600; line-height: 1.35; color: var(--text-muted); letter-spacing: 0; overflow-wrap: anywhere; hyphens: auto; }
/* Değer sayı/tutar olduğu için ortasından bölünmez ("1.053.6 / 40 ₺"); kart daralınca yazı küçülür. */
.stat-card__value { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: normal; word-break: keep-all; white-space: nowrap; }
@container (max-width: 210px) { .stat-card__value { font-size: var(--font-size-xl); } }
@container (max-width: 160px) { .stat-card__value { font-size: var(--font-size-lg); } }
.stat-card:has(> .stat-card__icon) > .stat-card__label,
.stat-card:has(> .stat-card__icon) > .stat-card__value { padding-right: 46px; }
@container (max-width: 125px) {
  .stat-card:has(> .stat-card__icon) > .stat-card__label,
  .stat-card:has(> .stat-card__icon) > .stat-card__value { padding-right: 0; }
  .stat-card__icon { position: static; order: -1; width: 32px; height: 32px; margin-bottom: var(--spacing-1); }
  .stat-card__icon .icon { width: 17px; height: 17px; }
  .stat-card__value { font-size: var(--font-size-xl); }
}
.stat-card__hint { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: auto; }
/* İpucu satırı olmayan kart en küçük yüksekliğe zorlanmaz: değerin altında boşluk kalıyordu (2026-10-24). Izgarada aynı satırdaki
   kartlar yine eşit boyda uzar. */
.stat-card:not(:has(> .stat-card__hint)) { min-height: 0; }
.stat-card__icon { position: absolute; right: var(--spacing-4); top: var(--spacing-4); width: 38px; height: 38px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--primary-50); color: var(--tint-primary-fg); }
.stat-card__icon .icon { width: 19px; height: 19px; }
.stat-card--primary .stat-card__icon { background: var(--primary-50); color: var(--tint-primary-fg); }
.stat-card--success .stat-card__icon { background: var(--success-50); color: var(--tint-success-fg); }
.stat-card--warning .stat-card__icon { background: var(--warning-50); color: var(--tint-warning-fg); }
.stat-card--danger .stat-card__icon { background: var(--danger-50); color: var(--tint-danger-fg); }
.stat-card--accent .stat-card__icon { background: var(--accent-50); color: var(--tint-accent-fg); }
.stat-grid { display: grid; gap: var(--spacing-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); } }

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

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

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

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

/* flex-shrink: 0 — çip yana kaydırılan şeritte (chip-row ve benzerleri) içerik genişliğinin altına daralmaz. Chromium tek satırlık
   çipi zaten daraltmaz (min-width: auto); bu tabanı uygulamayan motorda çip daralıp metin sağ çerçeveye biniyordu (ürün sahibi
   2026-10-25, Usta'da "Filtrele / Bugün müsait"). Metin tek satır olduğundan Chromium'da yerleşim değişmez. */
.chip, .btn-filter-pill, .radius-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  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-property: background-color, border-color, color, box-shadow;
  transition-duration: var(--transition-speed);
}
/* Dokunmatik ekranda süzgeç çipleri en az 44 px (YENI-ARAYUZ §1.2); masaüstünde 36 px kalır. */
@media (pointer: coarse) { .chip, .btn-filter-pill, .radius-pill { min-height: var(--min-touch-target); } }
.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; } }

/* Yana kaydırılan alanlar (çip satırları, sekmeler, raylar, tablolar). platform-ui.js taşan alana data-sx yazar: devamı olan
   kenar solar, böylece kullanıcı yana kaydırılabileceğini görür; fareli ekranlarda ince kaydırma çubuğu da görünür.
   Kullanıcı 2026-10-17: "yana doğru uzayan yerleri kullanıcı bilemiyor". */
/* Solma 28 px: 44 px'te ekrana neredeyse sığan satırlarda seçili son çip yarı silik görünüyordu. */
[data-sx="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
[data-sx="start"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}
[data-sx="start end"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
/* Bileşen stilleri kaydırma çubuğunu gizler (scrollbar-width: none); fareyle sürüklenebilsin diye burada açılır. */
@media (pointer: fine) {
  [data-sx] { scrollbar-width: thin !important; scrollbar-color: var(--border-color) transparent; }
}

.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); }
/* Koyu tema okunurluğu (2026-10-09): açık temanın koyu mavi yazı tonları (--primary-600/700) koyu zeminde okunmuyordu: üst
   çubuktaki baş harfler, teklif kartındaki firma kısaltması, "İletişim"/"Mesaj gönder" düğmeleri, seçili sekme, mavi simgeler. */
[data-theme="dark"] .avatar { color: var(--tint-primary-fg); }
[data-theme="dark"] .avatar--accent { color: var(--tint-accent-fg); }
[data-theme="dark"] .btn-outline-primary { color: var(--tint-primary-fg); border-color: color-mix(in srgb, var(--primary-300) 55%, transparent); }
[data-theme="dark"] .btn-outline-primary:hover { background: var(--primary-100); color: var(--text-main); border-color: var(--primary-300); }
[data-theme="dark"] .text-primary { color: var(--tint-primary-fg) !important; }
[data-theme="dark"] .text-success { color: var(--tint-success-fg) !important; }
[data-theme="dark"] .text-warning { color: var(--tint-warning-fg) !important; }
/* 2026-10-30 tam test: kırmızı yazılar (doğrulama iletisi, zorunlu yıldızı, tehlikeli menü öğesi, .text-danger) koyu zeminde 3,6:1 idi. */
[data-theme="dark"] .text-danger, [data-theme="dark"] .error-state .text-danger { color: var(--tint-danger-fg) !important; }
[data-theme="dark"] .form-feedback, [data-theme="dark"] .validation-message, [data-theme="dark"] .invalid-feedback, [data-theme="dark"] .form-label .req,
[data-theme="dark"] .menu-item--danger, [data-theme="dark"] .btn-outline-danger { color: var(--tint-danger-fg); }
[data-theme="dark"] .tabs__item.active { color: var(--tint-primary-fg); }
[data-theme="dark"] .chip:not(.active):hover { color: var(--tint-primary-fg); }

/* --------------------------------------------------------------------------
   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; }
/* Sekme de çip gibi şeritte daralmaz (flex-shrink: 0; bkz. .chip). */
.tabs__item { flex-shrink: 0; 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); }
/* Koyu temada yalnızca bekleyen adım koyulaşır; önceden bu kural tamamlanan ve şimdiki adımın rengini de eziyordu (bütün
   çubuklar gri görünüyordu: talep sihirbazı, firma doğrulama). */
[data-theme="dark"] .stepper__step:not(.done):not(.current) { 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
   -------------------------------------------------------------------------- */
/* position: relative: mutlak konumlu iç ögeler (ör. başlıktaki .visually-hidden) kaydırma kabına bağlı kalır; yoksa
   tablonun sağ ucundan kökü taşırıp tablette sayfayı uzaklaştırıyordu (/affiliate/earnings 820px → 905px). */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.data-table th { text-align: left; font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; padding: var(--spacing-3) var(--spacing-4); background: var(--bg-surface-subtle); border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.data-table td { padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--bg-surface-hover); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Telefonda geniş tablolar yatay kayar; satır işlemleri (en sağdaki düğmeler) sağa yapışık
   kalır, yönetici her satırda tabloyu sonuna kadar kaydırmak zorunda kalmaz. */
@media (max-width: 767.98px) {
    .data-table td:has(> .row-actions),
    .data-table:has(td > .row-actions) thead th:last-child {
        position: sticky;
        right: 0;
        z-index: 1;
        background: var(--bg-surface);
        box-shadow: -10px 0 10px -10px rgba(15, 23, 42, 0.25);
    }
    .data-table:has(td > .row-actions) thead th:last-child { background: var(--bg-surface-subtle); }
}
.table { --bs-table-bg: var(--bg-surface); --bs-table-color: var(--text-main); --bs-table-border-color: var(--border-color); --bs-table-striped-bg: var(--bg-surface-subtle); }

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

/* --------------------------------------------------------------------------
   12. Geri bildirim: Boş durum, Hata, Skeleton, Toast, Uyarı
   -------------------------------------------------------------------------- */
/* Boş durum (2026-10-24): düz kenarlı kart (kesikli kenar "dosya bırakma alanı" gibi duruyordu); simge yuvarlak, bölüm tonunda
   (.notif-tile ile aynı dil). */
.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 solid var(--border-color); border-radius: var(--radius-xl); }
.empty-state__icon { width: 60px; height: 60px; border-radius: var(--radius-full); display: grid; place-items: center; background: color-mix(in srgb, var(--primary-500) 12%, var(--bg-surface)); color: var(--primary-600); font-size: 1.6rem; margin-bottom: var(--spacing-2); }
.app-shell--area-yemek .empty-state__icon:not([style]) { background: color-mix(in srgb, var(--yemek-ember) 13%, var(--bg-surface)); color: var(--yemek-ember); }
.app-shell--area-usta .empty-state__icon:not([style]) { background: color-mix(in srgb, var(--mint-600) 14%, var(--bg-surface)); color: var(--mint-600); }
[data-theme="dark"] .empty-state__icon:not([style]) { color: var(--primary-300); }
[data-theme="dark"] .app-shell--area-usta .empty-state__icon:not([style]) { color: var(--mint-400); }
.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; }
/* Kaydırılan dikey flex gövdede çocuklar küçülmez, gövde kayar: overflow:hidden kartlar (list-group-card, segmented, fee-summary)
   sığmak için ezilip kırpılıyordu (yönetim bakiye düzeltme penceresi, 2026-10-23). :where özgüllüğü sıfırdır; kendi flex değeri
   olan çocuk (ör. kendi içinde kayan liste) etkilenmez. Yönetim çekmecesinde aynı kural: admin.css .adm-drawer__body > *. */
:where(.bottom-sheet-body.stack, .bottom-sheet-body.stack-sm, .bottom-sheet-body.stack-lg, .modal-body.stack, .modal-body.stack-sm, .modal-body.stack-lg) > * { flex-shrink: 0; }
/* 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. */
/* z-index 5: harita denetimleri (MapLibre 2) pencere alt çubuğunun üstüne çıkıyordu (şube bölge seçimi, 2026-10-17). */
.sheet-actions { position: sticky; bottom: calc(var(--spacing-4) * -1); z-index: 5; 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; }
.sheet-actions--split { justify-content: space-between; }
/* 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); }
/* Ağaç düzeni (Option.Depth): kök kalın ve üstünde ince çizgi, alt düzeyler girintili ve sol kılavuz çizgili. */
.searchable-select__option--root { font-weight: 700; color: var(--text-main); }
li + li > .searchable-select__option--root { border-top: 1px solid var(--border-color); }
.searchable-select__option[style*="--ss-depth"] {
    padding-left: calc(var(--spacing-3) + var(--ss-depth, 0) * 18px);
    background-image: linear-gradient(var(--border-color), var(--border-color));
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: calc(var(--spacing-3) + var(--ss-depth, 0) * 18px - 10px) 0;
}
.searchable-select__option[style*="--ss-depth"]:hover, .searchable-select__option[style*="--ss-depth"].searchable-select__option--active {
    background-color: var(--bg-subtle, rgba(0,0,0,0.04));
}
.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); }
}

/* Onay penceresi (CustomDialog) çekmecenin (1101) ve uygulama penceresinin (1150) üstünde açılır: bir çekmeceden sorulan
   onay ("Sepeti boşalt ve ekle") arkada kalırsa ilk dokunuş çekmeceyi kapatır ve onay boşa gider. */
.modal.show.d-block { z-index: 1160; }
.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); }
/* Açılınca odak pencerenin kendisine taşınır (CustomDialog, ADR-065): programla verilen bu odakta çerçeve çizilmez; düğmelerin odak halkası kalır. */
.modal-content[tabindex="-1"]:focus { outline: none; }
.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; }

/* --------------------------------------------------------------------------
   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%; }
/* Sağda haritanın +/- düğmelerine (sağ üst, ~40 px) yer bırakılır; öğeler içerik genişliğindedir. Önceden şube lejantı tam genişliğe
   yayılıp yakınlaştırma düğmelerinin üstüne biniyordu (2026-10-19). */
.map-overlay-top { position: absolute; top: var(--spacing-3); left: var(--spacing-3); right: 52px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2); pointer-events: none; }
.map-overlay-top > * { pointer-events: auto; max-width: 100%; }
/* 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; }
/* Üst katman sütununun içindeyken lejantın altında ortalanır (telefonda lejantla çakışmaz). */
.map-overlay-top .map-search-here { position: static; transform: none; align-self: center; }
/* 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; color: #fff; display: grid; place-items: center; }
.map-marker-el span svg { width: 16px; height: 16px; display: block; }
.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--address { background: var(--success-500); }
.map-marker-el--usta { background: var(--success-600, #15803d); }
/* Yönetim operasyon haritasında ~1 km'lik talep hücresi (ADR-056): ızgara noktasında, sayıyı yazan yuvarlak kabarcık (iğne değil). */
.map-marker-el--cell { width: 30px; height: 30px; border-radius: 50%; transform: none; border-width: 2px; background: var(--accent-500); }
.map-marker-el--cell span { transform: none; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.map-marker-el--cell-wide { width: auto; min-width: 30px; padding: 0 7px; border-radius: 999px; }
.map-marker-el--cell.map-marker-el--selected { transform: scale(1.18); }
/* Canlı işaretçi (yoldaki kurye / usta, ADR-039): yuvarlak, nabız atan halka; hedef (adres) sabit. */
.map-live-marker { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-600); border: 3px solid #fff; box-shadow: var(--shadow-md); display: grid; place-items: center; position: relative; transition: transform .2s; }
.map-live-marker span { font-size: 18px; line-height: 1; color: #fff; display: grid; place-items: center; }
.map-live-marker span svg { width: 20px; height: 20px; display: block; }
.map-live-marker--courier::after, .map-live-marker--usta::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--primary-500); opacity: .5; animation: live-pulse 1.8s ease-out infinite; }
/* Birden çok kurye (ADR-040): her kurye kendi renginde (--live-color), altında kısa adı; gideceği ev işareti aynı renkte halkalı. */
.map-live-marker--courier { background: var(--live-color, var(--primary-600)); }
.map-live-marker--courier::after { border-color: var(--live-color, var(--primary-500)); }
.map-live-marker__tag { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: var(--live-color, var(--neutral-900, #111827)); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; box-shadow: var(--shadow-sm); pointer-events: none; }
.map-live-marker--usta { background: var(--success-600, #15803d); }
.map-live-marker--usta::after { border-color: var(--success-500); }
.map-live-marker--destination { width: 34px; height: 34px; background: var(--accent-500); border-color: var(--live-color, #fff); }
@keyframes live-pulse { from { transform: scale(.8); opacity: .6; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-live-marker::after { animation: none; } }
.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); }
/* minmax(0,1fr): uzun, tek satırlık liste metinleri sütunu ekrandan genişletmesin (telefonda taşıyordu). */
.map-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); }
.map-split__list { min-width: 0; }
@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-xs); font-weight: 700; text-align: center; padding: 4px; }
.compare-col__ribbon--fast { background: var(--info-500); }
.compare-col__ribbon--near { background: var(--accent-500); color: var(--carsi-900); }
.compare-col__ribbon--value { background: var(--primary-600); }
.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(--tint-success-fg); }
.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; }
/* Satır: etiket ile değer arasında boşluk, ilk satır taban çizgisinde hizalı; uzun etiket sarınca değer sağda sabit kalır, tutarlar
   tablo rakamlarıyla alt alta hizalanır (2026-10-24, cüzdan ücret tablosu). Uzun değer (IBAN, banka adı) satırın %60'ını geçmez,
   orada sarar; telefonda satırı taşırmaz. */
.fee-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-3); 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:not(:first-child) { flex-shrink: 0; max-width: 60%; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.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(--tint-success-fg); font-weight: 700; }

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

/* --------------------------------------------------------------------------
   17. Kimlik doğrulama sayfaları
   -------------------------------------------------------------------------- */
.auth-layout { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 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; min-width: 0; 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; } }
/* Telefonda sayfa iki parmakla yakınlaşmaz ve çift dokunuşla büyümez (uygulama gibi; ürün sahibi 2026-10-25). Kaydırma serbest;
   haritalar kendi tuvallerinde iki parmak hareketini işler (MapLibre kendi touch-action'ını verir). */
@media (max-width: 1023.98px) and (pointer: coarse) {
  html { touch-action: pan-x pan-y; }
}

/* 6 haneli kod kutuları dar ekrana sığar: kutular eşit paylaşır, en çok 52 px (6×48 + boşluklar 328 px'ti; telefonda form kartının
   iç genişliği 280–310 px olduğundan sağdaki kutular taşıyordu). Kutu içi boşluk yok; rakam daralan kutuda da ortada kalır. */
.otp-inputs { display: flex; gap: var(--spacing-2); justify-content: space-between; max-width: 100%; }
.otp-inputs input { flex: 1 1 0; width: auto; min-width: 0; max-width: 52px; height: 56px; padding: 0; text-align: center; font-size: var(--font-size-xl); font-weight: 700; }
@media (max-width: 380px) { .otp-inputs { gap: 6px; } .otp-inputs input { height: 52px; } }

/* --------------------------------------------------------------------------
   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;
  /* clip: süs dairesi (::before) sağa taştığı için "hidden" kutu programla kaydırılabiliyordu; telefonda
     "Esnaf için" sekmesine basınca odak kaydırması bütün açılışı ~100px sola itiyordu. clip kaydırmaya izin vermez. */
  overflow: clip;
  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); color: var(--carsi-900); }
.step--success .step__num { background: var(--success-500); }
.step__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.step__title { font-size: var(--font-size-base); font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--spacing-2); }
.step__title .icon { color: var(--text-muted); }
.step__text { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--line-relaxed); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   19. Yardımcı sınıflar
   -------------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--spacing-3); }
.stack-sm { display: flex; flex-direction: column; gap: var(--spacing-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--spacing-5); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
/* Sunucudan sayfa sayfa toplanan listede sınır aşıldı notu (PagedLoader, 2026-10-21). */
.list-cap-note { margin: var(--spacing-3) 0 0; text-align: center; }
/* "Parolamı unuttum" küçük yazıyla 18 px yüksekliğindeydi; dokunma alanı 32 px (telefonda 44 px) olur, görünüm değişmez
   (arayüz denetimi 2026-10-21). */
.auth-forgot { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; }
@media (pointer: coarse) { .auth-forgot { min-height: var(--min-touch-target); } }
.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(--tint-success-fg) !important; }
.text-danger { color: var(--danger-500) !important; }
.text-warning { color: var(--tint-warning-fg) !important; }
.text-accent { color: var(--accent-600) !important; }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.fw-bold, .font-weight-bold { font-weight: 700 !important; }
.fw-800 { font-weight: 800; }
.font-weight-medium { font-weight: 500; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tabular { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--border-color); margin: var(--spacing-4) 0; }
.hide-mobile { display: none !important; }
@media (min-width: 1024px) { .hide-mobile { display: initial !important; } .hide-desktop { display: none !important; } }
/* Tablo hücresinde "initial" satır içi (inline) demektir ve tabloyu bozar; hücreler tablo hücresi olarak döner. */
@media (min-width: 1024px) { th.hide-mobile, td.hide-mobile { display: table-cell !important; } }
.icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
/* icon--xs (14 px) yalnızca Yemek kartı kapsamında tanımlıydı; rozetlerde ve küçük düğmelerde kullanılıyor, genelde 20 px
   çiziliyordu (2026-10-24). */
.icon--xs { width: 14px; height: 14px; }
.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; }
/* Yazı rengi açıkça verilir: <code class="kbd"> Bootstrap'in pembe kod rengini alıp küçük puntoda 4,5:1'in altında kalıyordu
   (arayüz denetimi 2026-10-21). */
.kbd { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--text-main); 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(--tint-danger-fg); 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(--tint-danger-fg); padding: var(--spacing-4); border-radius: var(--radius-md); }
.blazor-error-boundary::after { content: "Bu bölüm yüklenirken bir hata oluştu."; }

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

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

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

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

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

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

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

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

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

/* ------------------------------------------------------------------ 20. Ziyaretçi (public) yerleşimi
   Oturumsuz ziyaretçi bir pazaryeri sitesi görür: sol uygulama menüsü yoktur, üst menü tanıtım
   bağlantılarını taşır, içerik daha geniş bir kolonda ortalanır. */
.app-shell--public .app-shell__content {
    max-width: 1200px;
    /* Telefonda ziyaretçinin de alt gezinme çubuğu vardır; sayfa sonu çubuğun arkasında kalmasın (2026-10-17: KVKK, Keşfet ve
       "Usta ol" sayfalarının son satırları çubuğun altındaydı). Masaüstünde çubuk yoktur. */
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-6));
}
@media (min-width: 1024px) { .app-shell--public .app-shell__content { 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: var(--content-max-width); }
    .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,
.topnav__measure-item {
    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,
.topnav__measure-item .badge-count { margin-left: 2px; }

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

/* Davet Et & Kazan: alıcıya kazanç fırsatını hatırlatan vurgulu ikon. */
.topnav__link--invite .icon { color: var(--tint-accent-fg); }

/* Ölçü satırı (2026-10-06): birincil bağlantıların görünmez kopyası; kaç tanesinin üst çubuğa sığdığı buradan ölçülür,
   sığmayanlar Keşfet'e iner (platformUi.observeNavFit). Yer kaplamaz, tıklanmaz. */
.topnav__measure {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    gap: inherit;
    width: max-content;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}
.topnav__measure > * { flex-shrink: 0; }
/* 1024–1279px'te (yatay tablet, dar dizüstü) alıcı menüsü Inter yazı tipiyle zaten ~34px
   taşıyordu. Bu aralıkta marka yazısı görsel olarak gizlenir (E simgesi kalır ve ana sayfaya
   götürür; ad ekran okuyucuya okunmaya devam eder), böylece menü ve aksiyonlar tek satıra sığar.
   Yalnızca davet bağlantısı olan (alıcı) üst barda uygulanır; diğer rollerin üst barı değişmez. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .topbar:has(.topnav__link--invite) .topbar__brand .brand-logo__word {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .topbar:has(.topnav__link--invite) .topbar__brand .brand-logo__mark { display: block; }
}

/* Menü, sol taraftaki geçiş ve "Talep Ver" ile sağdaki aksiyonlar arasındaki boşluğun tamamını alır; içine sığan
   bağlantılar gösterilir. */
@media (min-width: 1024px) {
    .topnav { display: flex; }
}

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

/* Arama (2026-10-06): masaüstünde bildirim düğmeleriyle aynı biçimde bir simge; tıklanınca altında tek kutulu, gölgeli bir
   arama alanı açılır (önceden panel ve kutu iki kat çerçeve oluşturuyor, simge düğmede ortalanmıyordu). Telefonda üst
   barda arama yoktur. */
.topbar__search-wrap { display: none; position: relative; }
.topbar__search-toggle { display: none; }
@media (min-width: 1024px) {
    .app-shell--topnav .topbar__search-wrap { display: flex; align-items: center; flex: 0 0 auto; }
    .app-shell--topnav .topbar__search-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .app-shell--topnav .topbar__search-wrap .topbar__search { display: none; }
    .app-shell--topnav .topbar__search-wrap--open .topbar__search {
        display: block;
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        width: min(440px, 70vw);
        max-width: none;
        margin: 0;
        z-index: 1150;
    }
    .app-shell--topnav .topbar__search-wrap--open .search-box {
        min-height: 50px;
        padding: 0 var(--spacing-4);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        background: var(--bg-surface);
        box-shadow: var(--shadow-lg);
    }
    .app-shell--topnav .topbar__search-wrap--open .search-box:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-lg), var(--ring-focus); }
    .app-shell--topnav .topbar__search-wrap--open .search-box input { min-height: 46px; font-size: var(--font-size-base); }
    .app-shell--topnav .topbar__search-wrap--open .topbar__search-toggle { background: var(--primary-50); color: var(--text-link); }
}
/* 1024–1599px'te tema düğmesi gizlenir (tema hesap menüsünden değiştirilir); menüye yer kalır. */
@media (min-width: 1024px) and (max-width: 1599.98px) {
    .app-shell--topnav .topbar__theme { display: none; }
}

/* 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ü kalan boşluğu alır (sarmalanmaz); yalnızca sığan bağlantılar çizildiği için taşmaz. Açılır panelin
   kırpılmaması için taşma görünür kalır. */
.app-shell--topnav .topnav { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow: visible; position: relative; }
.app-shell--topnav .topbar__actions { flex-shrink: 0; }

/* 1024–1279px (dar dizüstü, yatay tablet): satıcı üst barı 30–106px, yönetim ekibininki 250px'e
   kadar taşıyordu; sağdaki bakiye, bildirim ve hesap düğmeleri ekran dışına düşüyordu. Bu
   aralıkta marka yazısı ve tema düğmesi gizlenir (tema hesap menüsünde), "Talep Ver" yalnızca
   ikon olur ve menü aralıkları daralır. 1180px altında menü de ikonlara iner (ipucu ve ekran
   okuyucu adı korunur). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .app-shell--topnav .topbar { gap: var(--spacing-2); }
    .app-shell--topnav .topbar__brand .brand-logo__word,
    .topbar__cta-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .app-shell--topnav .topbar__brand .brand-logo__mark { display: block; }
    .app-shell--topnav .topbar__theme { display: none; }
    .topbar__cta { margin-right: 0; }
    .topnav__link, .topnav__measure-item { padding: var(--spacing-2); gap: 4px; }
}
/* Yönetim ekibinin üst barında fazladan "Yönetim" bağlantısı ve "Talep Ver" vardır; 1280–1439px'te
   de tema düğmesi gizlenip "Talep Ver" ikona iner. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
    .topbar:has(.topnav__link--staff) .topbar__theme { display: none; }
    .topbar:has(.topnav__link--staff) .topbar__cta-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ------------------------------------------------------------------ Satıcı bakiye göstergesi (üst bar) */
.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 var(--spacing-3);
  border: 1px solid var(--success-100);
  border-radius: var(--radius-full);
  background: var(--success-50);
  color: var(--tint-success-fg);
  font-size: var(--font-size-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.balance-chip:hover { border-color: var(--success-500); }
.balance-chip--low { background: var(--warning-50); border-color: var(--warning-100); color: var(--tint-warning-fg); }
.balance-chip__free { font-weight: 600; font-size: var(--font-size-xs); opacity: .85; }
.balance-chip__short { display: none; }
/* Telefonda üst bar dar: bakiye simgesiz ve kuruşsuz, tema düğmesi çekmece menüde. Önceden
   satıcının üst barı 76px taşıyor, mobil tarayıcı sayfayı genişlettiği için alttan açılan
   pencereler (teklif formu dahil) ekrandan taşıyordu. */
@media (max-width: 480px) {
  .balance-chip { padding: 0 var(--spacing-2); font-size: var(--font-size-xs); gap: 4px; }
  .balance-chip__icon, .balance-chip__amount { display: none; }
  .balance-chip__short { display: inline; }
  .topbar__theme { display: none; }
  /* Satıcının üst barı (menü, marka, bakiye, zil, avatar) 390px'e sığsın diye boşluklar daraltılır. */
  .topbar, .app-shell--topnav .topbar { gap: var(--spacing-2); padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
}
/* Bakiye büyüdükçe (ör. 1.250 ₺) satıcı üst barı dar telefonlarda yine taşıyordu (canlıda 4px, her
   sayfada). Bakiye görünürken marka yazısı görsel olarak gizlenir; "E" logosu kalır, ad ekran
   okuyucuya okunmaya devam eder. */
@media (max-width: 420px) {
  .topbar:has(.balance-chip) .topbar__brand .brand-logo__word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .topbar:has(.balance-chip) .topbar__brand .brand-logo__mark { display: block; }
}
@media (pointer: coarse) {
  .balance-chip { min-height: 40px; }
}

/* Satıcının teklif verdiği talep kartı: yeni taleplerden ayırt edilsin (sol şerit ve açık zemin). */
.offered-card { border-left: 4px solid var(--success-500); background: var(--success-50); }
[data-theme="dark"] .offered-card { background: color-mix(in srgb, var(--success-500) 10%, var(--bg-surface)); }
.offered-card__badge { align-self: flex-start; white-space: normal; }
.list-item__flag { display: block; margin-top: 2px; }
.summary__offer-filter { flex-wrap: nowrap; max-width: 100%; }
.summary__offer-filter .segmented__item { white-space: nowrap; }

/* ------------------------------------------------------------------ Marka logosu (OP #48, 2026-10-15; ADR-018 eki)
   "esnafcebinde" yazı logosu ve "e" simgesi kayıpsız WebP görseldir (BrandLogo.razor); boyut CSS yüksekliğiyle verilir,
   genişlik oranla gelir. .bl-ink renkli (açık zemin), .bl-light açık sürüm (koyu zemin). "theme" zemininde ikisi de çizilir,
   tema seçer. Compact: dar üst çubukta yazı görsel olarak gizlenir (ekran okuyucu okur), süs "e" simgesi görünür. */
.brand-logo, .brand-emblem { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; }
.brand-logo img, .brand-emblem img { display: block; max-width: none; }
.brand-logo__word { height: 26px; width: auto; }
.brand-logo--lg .brand-logo__word { height: 40px; }
.brand-logo .brand-logo__mark { display: none; width: 34px; height: 34px; }
.brand-emblem__img { width: 34px; height: 34px; }
.brand-emblem--lg .brand-emblem__img { width: 56px; height: 56px; }
/* "theme" zemininde temaya uymayan sürüm her durumda gizlidir (!important: sıkışık üst çubuk kuralları simgeyi açsa da). */
:root:not([data-theme="dark"]) .brand-logo--theme .bl-light { display: none !important; }
[data-theme="dark"] .brand-logo--theme .bl-ink { display: none !important; }
/* Logo bağlantısı telefonda da en az 44 px dokunma hedefi (36 px logo; tarayıcı düzen testi 2026-10-18). */
.auth-card__brand { margin-bottom: var(--spacing-2); min-height: 44px; align-items: center; }
.auth-card__brand .brand-logo__word { height: 36px; }
.auth-layout__brand .brand-logo__word { height: 40px; }
@media (max-width: 767.98px) {
    .auth-layout__brand .brand-logo__word { height: 32px; }
}
/* Üst çubuk: yazı logosu üst çubuğun yazı boyuyla aynı hizada; tıklama hedefi bağlantının tamamıdır. */
.topbar__brand .brand-logo__word { height: 24px; }

/* ------------------------------------------------------------------ Türkçe tarih ve 24 saatlik saat alanı
   Ortak DateField ve TimeField bileşenleri (Components/Common) kendi .razor.css dosyalarında biçimlenir. Eski TrDateInput /
   TrTimeInput ve tarayıcının kendi tarih/saat seçicisi (tarayıcı dilinde: "October 2026", "10:00 PM") kaldırıldı. */
/* Alt pencere (BottomSheet) içinde takvim/saat listesi pencerenin altına yapışık ikinci çekmece olarak açılır; kısa bir pencerede
   sığsın diye alan açıkken pencere en az takvim kadar uzar (kapsamlı .razor.css dış kapsayıcıya ulaşamadığı için burada). */
.bottom-sheet-container:has(.df--open, .tf--open) { min-height: min(540px, 85dvh); }

/* Şube haritası göstergesi üst köşede durur (altta ölçek çubuğu ve harita atfıyla çakışıyordu); sağdaki yakınlaştırma düğmelerine yer bırakır. */
.branches__legend { flex-wrap: wrap; row-gap: 4px; max-width: calc(100% - 56px); }

/* Tarih/zaman ve sayı hücreleri satır ortasından bölünmesin. */
.text-nowrap { white-space: nowrap; }

/* Filtre satırındaki tarih alanları: etiket üstte, sabit genişlik; "Bitiş" tek başına alt satıra düşüyordu. */
.filters__date { display: flex; flex-direction: column; gap: 2px; flex: 0 0 150px; }
.filters__date .df { width: 100%; }

/* Gelen teklifler grup başlığındaki talep bağlantısı telefonda 24px yüksekteydi; dokunma hedefi 44px'e çıkarılır. */
.incoming__group-link { display: block; }
@media (max-width: 640px), (pointer: coarse) { .incoming__group-link { padding: 10px 0; margin: -6px 0; } }

/* ------------------------------------------------------------------ EsnafCebinde Yemek bağlantısı (§109) */
/* Ana sayfadaki sabit, kapatılamaz yemek kartı. Sıcak turuncu–kırmızı geçiş ana markanın vurgu rengiyle uyumlu;
   telefonda arama kutusunun hemen altında ilk ekrana sığacak yükseklikte tutulur. */
.food-promo {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-4);
  margin-top: var(--spacing-5);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-xl);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 255, 255, .22) 0 18%, transparent 19%),
    radial-gradient(circle at 10% 110%, rgba(255, 255, 255, .14) 0 22%, transparent 23%),
    linear-gradient(118deg, #ff7a18 0%, #f05a28 45%, #d63a3a 100%);
  box-shadow: 0 12px 28px -12px rgba(214, 58, 58, .55);
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 44px;
}
.food-promo:hover, .food-promo:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(214, 58, 58, .65); color: #fff; }
.food-promo:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
/* Görsel: zıplayan emojiler (🍕🍔🥙) yerine sitenin çizgi simgesi, bildirim kutusunun (.notif-tile--yemek) yemek tonunda (2026-10-24,
   profesyonel görünüm). Kutu turuncu zeminde açık bir daire olarak durur. */
.food-promo__art.notif-tile { flex: 0 0 48px; width: 48px; height: 48px; }
.food-promo__art.notif-tile .icon { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .food-promo { transition: none; } }
.food-promo__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.food-promo__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-2xs); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: .95; }
.food-promo__badge { background: #fff; color: #d63a3a; border-radius: var(--radius-full); padding: 1px 8px; font-size: 10px; letter-spacing: .02em; }
.food-promo__title { font-size: var(--font-size-lg); font-weight: 800; line-height: 1.2; }
.food-promo__text { font-size: var(--font-size-sm); opacity: .92; line-height: 1.4; }
.food-promo__cta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: #fff; color: #c2410c; font-weight: 800; font-size: var(--font-size-sm);
  padding: 10px 16px; border-radius: var(--radius-full); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35);
  min-height: 44px;
}
.food-promo--compact { margin-top: 0; padding: var(--spacing-3) var(--spacing-4); }
.food-promo--compact .food-promo__art.notif-tile { flex-basis: 44px; width: 44px; height: 44px; }
.food-promo--compact .food-promo__title { font-size: var(--font-size-base); }
@media (max-width: 640px) {
  .food-promo { grid-template-columns: auto 1fr; padding: var(--spacing-4); gap: var(--spacing-3); }
  .food-promo__art.notif-tile { flex-basis: 44px; width: 44px; height: 44px; }
  .food-promo__title { font-size: var(--font-size-base); }
  .food-promo__text { display: none; }
  .food-promo__cta { grid-column: 1 / -1; justify-content: center; }
}
[data-theme="dark"] .food-promo { box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7); }

/* Menülerdeki yemek girişleri: vurgu rengiyle ayırt edilir. */
/* Çarşı ↔ Yemek bölüm geçişi (§109.8) */
.product-switch { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; padding: 3px; border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--bg-surface-subtle); }
.product-switch__item { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--radius-full); color: var(--text-secondary); font-size: var(--font-size-sm); font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.product-switch__item:hover { color: var(--text-main); text-decoration: none; }
/* Seçili bölüm her iki tarafta da turuncu: Talep markanın vurgu turuncusu, Yemek turuncudan kırmızıya geçiş. */
.product-switch__item--talep.active { background: linear-gradient(118deg, var(--accent-500), var(--accent-600)); color: var(--carsi-900); box-shadow: 0 6px 14px -8px rgba(217, 118, 0, .8); }
.product-switch__item--talep:not(.active):hover { color: var(--accent-700); }
.product-switch__item--yemek.active { background: linear-gradient(118deg, #ff7a18, #d63a5a); color: #fff; box-shadow: 0 6px 14px -8px rgba(214, 58, 90, .8); }
.product-switch__item--yemek:not(.active):hover { color: #c2410c; }
.product-switch--compact { display: flex; width: 100%; }
.product-switch--compact .product-switch__item { flex: 1; justify-content: center; min-height: 44px; }
[data-theme="dark"] .product-switch__item--talep.active { background: linear-gradient(118deg, #f28c00, #d97600); color: #fff; }
/* Dar masaüstünde üst menüyle yarışmasın diye yalnızca simge kalır (ad title'dan okunur). */
@media (max-width: 1399px) { .product-switch:not(.product-switch--compact) .product-switch__item > span { display: none; } .product-switch:not(.product-switch--compact) .product-switch__item { padding: 0 10px; } }
/* Çarşı | Yemek geçişinin tek yeri üst çubuktur (§109.8; çekmece ve alt çubukta geçiş yok). Telefonda (oturum açıkken) tek
   satıra sığmadığı için üst çubuğun ikinci satırında tam genişlikte, etiketli sekme olarak durur; üst çubuk yüksekliği
   değişkenle büyür, ona göre konumlanan yapışkan öğeler (sipariş zili, kategori çubuğu, adres listesi) kendiliğinden kayar. */
@media (max-width: 767.98px) {
    .app-shell:has(.topbar .product-switch--topbar) { --topbar-height: 108px; }
    .topbar:has(.product-switch--topbar) { flex-wrap: wrap; align-content: center; row-gap: 6px; }
    /* Sağdaki grup (adres, bildirim, hesap) menü ve logonun yanında kalan yere sığar; adres seçicisi daralır. Önceden grup
       bütünüyle ikinci satıra sarılıyor, bölüm sekmeleri üçüncü satırda 108 px'lik çubuğun dışına taşıp konum şeridinin
       altında kalıyordu (2026-10-16, 390 px müşteri görünümü). */
    .topbar:has(.product-switch--topbar) .topbar__actions { flex: 1 1 0; min-width: 0; justify-content: flex-end; }
    .topbar:has(.product-switch--topbar) .topbar-address-wrap { flex: 0 1 auto; min-width: 0; }
    .topbar:has(.product-switch--topbar) .topbar-address { max-width: 100%; }
    .product-switch.product-switch--topbar { order: 10; display: flex; flex: 1 0 100%; }
    .product-switch.product-switch--topbar .product-switch__item { flex: 1; justify-content: center; min-height: 40px; padding: 0 12px; }
    .product-switch.product-switch--topbar .product-switch__item > span { display: inline; }
}
/* Telefonda marka yazısı gizlenince yalnızca "e" simgesi kalır (34px); dokunma hedefi en az 44px tutulur. Üst çubuktaki açılır
   paneller (bildirimler, hesap) zile hizalanınca soldan ekranı aşıyordu: adres listesi gibi üst çubuğun altında, kenarlardan
   12px boşlukla tam genişlikte açılır (üst çubuk backdrop-filter taşıdığı için sabit konum üst çubuğa göredir). */
@media (max-width: 767.98px) {
    .topbar .topbar__brand { min-width: var(--min-touch-target, 44px); min-height: var(--min-touch-target, 44px); justify-content: center; }
    .topbar .dropdown-panel { position: fixed; top: calc(var(--topbar-height) + var(--safe-top) + 6px); left: 12px; right: 12px; width: auto !important; min-width: 0 !important; max-width: none; }
}
.topnav__link--food { color: #e8590c; font-weight: 700; }
.topnav__link--food:hover { color: #c2410c; background: rgba(255, 122, 24, .1); }
[data-theme="dark"] .topnav__link--food { color: #ff9a4d; }
.mobile-menu__link--food { background: linear-gradient(118deg, rgba(255, 122, 24, .12), rgba(214, 58, 58, .1)); border-radius: var(--radius-lg); margin: 0 0 var(--spacing-2); }
.mobile-menu__link--food .menu-icon { background: linear-gradient(118deg, #ff7a18, #d63a3a); color: #fff; }
.mobile-menu__link--food .mobile-menu__title { color: #c2410c; font-weight: 800; }
[data-theme="dark"] .mobile-menu__link--food .mobile-menu__title { color: #ff9a4d; }

/* ===================================================================
   Yemek restoran terminali: büyük dokunmatik düğmeler ve seçim pencereleri (master prompt §86).
   Terminal ve sipariş ayrıntısı sayfaları ortak kullanır.
   =================================================================== */
.ft-big { min-height: 64px; padding: 0 var(--spacing-4); border: 0; border-radius: var(--radius-lg); color: #fff; font-size: 1.1rem; font-weight: 900; letter-spacing: .03em; cursor: pointer; transition: transform .1s, filter .15s; }
.ft-big:active:not(:disabled) { transform: scale(.98); }
.ft-big:disabled { opacity: .55; cursor: not-allowed; }
.ft-big--accept { background: #16a34a; box-shadow: 0 10px 22px -12px rgba(22, 163, 74, .9); }
.ft-big--reject { background: #dc2626; }
.ft-big--go { background: #1d4ed8; }
/* "Sonraki adım" düğmesi: üstte küçük ipucu, altta geçilecek aşama, sağda ok. Düğmedeki ad şu anki durum sanılmasın diye. */
.ft-next { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); text-align: left; }
.ft-next__text { display: grid; line-height: 1.15; }
.ft-next__hint { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
.ft-next__label { font-size: 1.15rem; font-weight: 900; }
.ft-next .icon { width: 26px; height: 26px; flex-shrink: 0; }

/* Sipariş aşama şeridi (FoodOrderSteps). */
.fos { display: flex; align-items: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; }
.fos__step { position: relative; flex: 1 1 0; display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; color: var(--text-muted); }
.fos__step::before { content: ""; position: absolute; top: 10px; left: calc(-50% + 12px); right: calc(50% + 12px); height: 2px; background: var(--border-color); }
.fos__step:first-child::before { display: none; }
.fos__step.is-done::before, .fos__step.is-current::before { background: #16a34a; }
.fos__dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--bg-surface); color: #fff; }
.fos__dot .icon { width: 14px; height: 14px; }
.fos__step.is-done .fos__dot { background: #16a34a; border-color: #16a34a; }
.fos__step.is-current .fos__dot { border-color: #1d4ed8; background: #1d4ed8; box-shadow: 0 0 0 4px rgba(29, 78, 216, .18); }
.fos__step.is-next .fos__dot { border-style: dashed; border-color: #1d4ed8; }
.fos__label { font-size: var(--font-size-xs); font-weight: 700; overflow-wrap: anywhere; }
.fos__step.is-done .fos__label { color: var(--text-secondary); }
.fos__step.is-current .fos__label { color: var(--text-main); font-weight: 900; }
.fos__tag { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-full); background: #1d4ed8; color: #fff; }
.fos__tag--next { background: transparent; color: #1d4ed8; border: 1px dashed #1d4ed8; }
.fos--compact .fos__label { font-size: 11px; }
.fos--compact .fos__tag { font-size: 9px; padding: 0 5px; }
[data-theme="dark"] .fos__step.is-current .fos__dot { box-shadow: 0 0 0 4px rgba(96, 165, 250, .25); }
.ft-sheet { display: grid; gap: var(--spacing-3); }
.ft-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2); }
.ft-choice { min-height: 64px; border: 2px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-main); font-size: 1.15rem; font-weight: 800; cursor: pointer; }
.ft-choice.active { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.ft-reasons { display: grid; gap: var(--spacing-2); }
.ft-reason { min-height: 52px; padding: 0 var(--spacing-4); border: 2px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-main); font-weight: 700; text-align: left; cursor: pointer; }
.ft-reason.active { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }

/* ===================================================================
   Yemek restoran yönetimi (Aşama 17): panel, ayarlar, menü, seçenekler, kampanyalar, çalışanlar ortak düzeni.
   =================================================================== */
.fm { display: grid; gap: var(--spacing-4); min-width: 0; }
.fm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-3); }
.fm-head h1 { margin: 0 0 4px; font-size: var(--font-size-2xl); font-weight: 800; }
.fm-branch { width: auto; min-width: 200px; min-height: 44px; font-weight: 700; }
.fm-box { display: grid; gap: var(--spacing-3); padding: var(--spacing-4); border: 1px solid var(--border-color); border-radius: var(--radius-xl); background: var(--bg-surface); min-width: 0; }
.fm-box > h2, .fm-box__head h2 { margin: 0; font-size: var(--font-size-base); font-weight: 800; }
.fm-box__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.fm-form { display: grid; gap: var(--spacing-2); }
.fm-images { display: grid; gap: var(--spacing-4); }
@media (min-width: 900px) { .fm-images { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; } }
.fm-form .btn-lg { margin-top: var(--spacing-2); }
.fm-fit { width: fit-content; }
.fm-role { cursor: pointer; }
.fm-role input { width: 20px; height: 20px; accent-color: var(--primary-500); flex-shrink: 0; }
.fm-role.is-selected { border-color: var(--primary-400); background: var(--primary-50); }
.fm-row { display: grid; gap: var(--spacing-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.fm-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; width: fit-content; max-width: 100%; padding: 4px; border-radius: var(--radius-lg); background: var(--bg-surface-subtle); }
.fm-seg__item { min-height: 40px; min-width: 44px; padding: 0 var(--spacing-3); text-align: center; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-weight: 800; font-size: var(--font-size-sm); cursor: pointer; }
.fm-seg__item.active { background: var(--bg-surface); color: var(--text-main); box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .35); }
.fm-checks { display: flex; flex-wrap: wrap; gap: var(--spacing-1) var(--spacing-4); }
.fm-checks label { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: var(--font-size-sm); cursor: pointer; }
/* Yalnızca onay / seçim kutuları küçük; arama ve metin kutuları satırda genişler (önceden 18px'e büzülüyordu). */
.fm-checks input[type=checkbox], .fm-checks input[type=radio] { width: 18px; height: 18px; accent-color: var(--primary-500); }
.fm-checks input[type=search], .fm-checks input[type=text] { flex: 1 1 240px; min-width: 200px; width: auto; }
.fm-checks--groups { flex-direction: column; gap: 4px; }
.fm-checks--groups small { margin-left: 4px; }
.fm-checks--groups .fm-group-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 2px 4px; border-radius: var(--radius-md); }
.fm-checks--groups .fm-group-row:hover { background: var(--bg-surface-subtle); }
.fm-checks--groups .fm-group-row label { flex: 1; display: inline-flex; align-items: center; gap: 8px; margin: 0; min-height: 36px; }
.fm-checks--groups .fm-group-row__confirm { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; color: var(--text-muted); }

/* Ürün formu: içindekiler ve ücretli ekstralar */
.fm-ingr, .fm-extras { display: grid; gap: var(--spacing-2); padding: var(--spacing-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface-subtle); }
.fm-ingr__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fm-ingr__row { display: flex; align-items: center; gap: var(--spacing-2); min-height: 40px; padding: 4px 6px 4px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); }
.fm-ingr__row.is-removable { border-left: 3px solid var(--success-500, #10b981); }
.fm-ingr__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-ingr__toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--text-secondary); cursor: pointer; }
.fm-ingr__toggle input { width: 16px; height: 16px; accent-color: var(--success-600, #059669); }
.fm-ingr__add { display: flex; gap: var(--spacing-2); align-items: center; }
.fm-ingr__add .form-control { flex: 1; min-width: 0; }
.fm-extras__price { color: var(--primary-700); }
.fm-variant { display: grid; gap: var(--spacing-2); padding: var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-surface); }
.fm-variant__head { display: flex; gap: var(--spacing-2); align-items: center; }
.fm-variant__head .form-control { flex: 1; min-width: 0; font-weight: 700; }
.fm-variant__options { display: grid; gap: var(--spacing-2); margin: 0; padding: 0; list-style: none; }
.fm-variant__option { display: flex; gap: var(--spacing-2); align-items: center; }
.fm-variant__option .form-control:not(.fm-extras__price-input) { flex: 1; min-width: 0; }
.fm-variant__option .fm-extras__price-input { flex: 0 0 96px; }
.fm-variant__option input[type=radio] { width: 20px; height: 20px; flex-shrink: 0; }
.fm-fit { justify-self: start; }
.fm-ingr__add .fm-extras__price-input { flex: 0 0 96px; }
.fm-list { display: grid; gap: var(--spacing-2); }
.fm-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.fm-item.is-off { opacity: .6; }
.fm-item__body { display: grid; flex: 1; min-width: 180px; gap: 2px; }
.fm-item__thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-md); object-fit: cover; background: var(--bg-surface-subtle); }
.fm-kpis { display: grid; gap: var(--spacing-3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* Sayaç kartı, StatTile (.stat-card) ile aynı ölçülerde (2026-10-16): etiket xs/600, değer 2xl/800 tabular, kart gölgesi;
   restoran paneli, esnaf cüzdanı ve usta paneli sayaçları aynı dili konuşur. */
.fm-kpi { display: grid; gap: var(--spacing-1); align-content: start; min-height: 108px; padding: var(--spacing-4); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-card); }
.fm-kpi span { font-size: var(--font-size-xs); line-height: 1.35; color: var(--text-muted); font-weight: 600; }
.fm-kpi strong { font-size: var(--font-size-2xl); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fm-kpi small { font-size: var(--font-size-xs); color: var(--text-muted); }
/* Tanım listesindeki bağlantı (ör. destek talebinde ilgili sipariş): 44 px dokunma alanı. */
.dl-link { display: inline-flex; align-items: center; min-height: 44px; }
/* Kart içi bağlantı: telefonda parmakla dokunulabilecek yükseklikte (44 px). */
.fm-kpi a { font-size: var(--font-size-xs); font-weight: 800; min-height: 44px; display: inline-flex; align-items: center; }
/* Belirteçle (2026-10-16): sabit açık zemin koyu temada açık yazıyı okunmaz kılıyordu. */
.fm-kpi.is-hot { border-color: var(--accent-500); background: var(--accent-50); }
/* Tıklanabilir gösterge: ilgili listeye (süzgeçli) götürür. */
.fm-kpi--link { color: inherit; text-decoration: none; transition: border-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed); }
.fm-kpi--link:hover { color: inherit; text-decoration: none; border-color: var(--primary-400); box-shadow: 0 10px 22px -18px rgba(15, 23, 42, .6); transform: translateY(-1px); }
.fm-kpi--link small::after { content: " →"; }
.fm-kpi--wide { grid-column: span 2; }
.fm-perf { display: grid; gap: var(--spacing-2) var(--spacing-4); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.fm-perf > div { display: flex; justify-content: space-between; gap: var(--spacing-2); padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: var(--font-size-sm); }
.fm-perf span { color: var(--text-secondary); }
.fm-checklist { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fm-checklist li { display: flex; align-items: center; gap: var(--spacing-2); min-height: 40px; font-size: var(--font-size-sm); }
.fm-checklist li span { flex: 1; }
.fm-checklist li.is-done { color: var(--tint-success-fg); }
.fm-apply { justify-items: start; max-width: 640px; }
.fm-apply h1 { margin: 0; font-size: var(--font-size-xl); font-weight: 800; }
.fm-apply__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--accent-50); color: var(--tint-accent-fg); }
.fm-apply .fm-form { width: 100%; }
.fm-hours { display: grid; gap: var(--spacing-2); }
.fm-day { display: grid; grid-template-columns: 110px 1fr; align-items: start; gap: var(--spacing-2); padding: var(--spacing-2) 0; border-bottom: 1px solid var(--border-color); }
.fm-day__name { display: flex; align-items: center; min-height: 40px; font-weight: 800; font-size: var(--font-size-sm); }
.fm-day__ranges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); }
.fm-range { display: inline-flex; align-items: center; gap: 4px; }
.fm-range input, .fm-range .fm-time { width: 112px; min-height: 40px; }
.fm-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.fm-table th, .fm-table td { padding: 6px 8px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.fm-table .is-error { color: var(--tint-danger-fg); }
@media (max-width: 599px) { .fm-kpi--wide { grid-column: auto; } .fm-day { grid-template-columns: 1fr; } }

/* ===================================================================
   Yemek değerlendirmeleri (Aşama 19, master prompt §76–77): puan rozeti, yıldız seçimi, değerlendirme kartı,
   sipariş sonrası "değerlendir / sorun bildir" alanı. Müşteri, restoran paneli ve yönetim ortak kullanır.
   =================================================================== */
.fstars { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--radius-full); background: #fff7e6; color: #92400e; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fstars .icon { color: #f59e0b; }
.fstars strong { font-weight: 900; color: #78350f; }
.fstars__count { color: #a16207; font-weight: 600; }
.fstars--empty { background: var(--bg-surface-subtle); color: var(--text-muted); }
.fstars--empty .icon { color: var(--text-muted); }
.fstars--lg { padding: 4px 12px; font-size: 14px; }
[data-theme="dark"] .fstars { background: rgba(245, 158, 11, .14); color: #fcd34d; }
[data-theme="dark"] .fstars strong { color: #fde68a; }
[data-theme="dark"] .fstars__count { color: #fbbf24; }
[data-theme="dark"] .fstars--empty { background: var(--bg-surface-subtle); color: var(--text-muted); }

.fsi { display: grid; grid-template-columns: minmax(96px, 140px) auto 1fr; align-items: center; gap: var(--spacing-2); }
.fsi__label { font-weight: 700; font-size: var(--font-size-sm); }
.fsi__stars { display: inline-flex; gap: 2px; }
.fsi__star { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--border-strong); cursor: pointer; transition: transform .1s, color .15s; }
.fsi__star .icon { width: 28px; height: 28px; }
.fsi__star:hover { transform: scale(1.08); }
.fsi__star:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.fsi__star.is-on { color: #f59e0b; }
.fsi__hint { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 700; }
.fsi--main .fsi__label { font-size: var(--font-size-base); }
@media (max-width: 480px) { .fsi { grid-template-columns: 1fr auto; } .fsi__hint { display: none; } .fsi__star { width: 40px; height: 44px; } }

.frv { display: grid; gap: var(--spacing-2); padding: var(--spacing-3) 0; border-bottom: 1px solid var(--border-color); min-width: 0; }
.frv:last-child { border-bottom: 0; }
.frv.is-hidden { opacity: .65; }
.frv__head { display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; }
.frv__avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #ffedd5, #fecaca); color: #9a3412; font-weight: 900; }
.frv__who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.frv__who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frv__score { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: var(--radius-full); background: #16a34a; color: #fff; font-weight: 900; font-size: var(--font-size-sm); }
.frv__score.is-mid { background: #d97706; }
.frv__score.is-low { background: #dc2626; }
.frv__subs { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--font-size-xs); color: var(--text-secondary); }
.frv__subs b { color: var(--text-main); }
.frv__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.frv__reply { display: grid; gap: 2px; padding: var(--spacing-2) var(--spacing-3); border-left: 3px solid var(--primary-400); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--bg-surface-subtle); font-size: var(--font-size-sm); }
.frv__reply p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.frv__flag { font-size: var(--font-size-xs); font-weight: 700; color: #b91c1c; }
.frv__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
[data-theme="dark"] .frv__avatar { background: linear-gradient(135deg, #7c2d12, #7f1d1d); color: #fed7aa; }

.fac { display: grid; gap: var(--spacing-3); }
.fac__form { display: grid; gap: var(--spacing-2); }
.fac__issues { display: grid; gap: var(--spacing-2); }
.fac__issue { display: grid; gap: 2px; min-height: 52px; padding: var(--spacing-2) var(--spacing-3); border: 2px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-main); text-align: left; cursor: pointer; }
.fac__issue strong { font-weight: 800; }
.fac__issue span { font-size: var(--font-size-xs); color: var(--text-muted); }
.fac__issue.active { border-color: var(--primary-500); background: var(--primary-50); }
[data-theme="dark"] .fac__issue.active { background: rgba(59, 130, 246, .12); }
.fac__tickets { display: grid; gap: var(--spacing-2); margin: 0; padding: 0; list-style: none; }
.fac__ticket { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); min-height: 44px; padding: var(--spacing-2) var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-lg); color: var(--text-main); text-decoration: none; }
.fac__ticket:hover { border-color: var(--border-strong); text-decoration: none; }

/* ===================================================================
   Talep bölümü üst çubuk (2026-10-03): teslimat adresi seçici ve tek "Keşfet" menüsü.
   Talepler üstte seçili adrese göre oluşturulur; menü bağlantıları bölümlü tek panelde toplanır.
   =================================================================== */
.topbar-address { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 280px; min-height: 44px; padding: 4px 12px 4px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-main); font-family: inherit; text-align: left; cursor: pointer; flex: 0 1 auto; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); }
.topbar-address:hover { border-color: var(--border-strong); box-shadow: 0 6px 16px -12px rgba(15, 23, 42, .5); }
.topbar-address:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.topbar-address__icon { color: var(--primary-500); flex-shrink: 0; }
.topbar-address__text { display: grid; min-width: 0; line-height: 1.15; }
.topbar-address__label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.topbar-address__value { font-size: var(--font-size-sm); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-address__chevron { color: var(--text-muted); flex-shrink: 0; }
.topbar-address--empty { border-style: dashed; border-color: var(--primary-400); }
.topbar-address--empty .topbar-address__value { color: var(--text-link); }
/* Adres bildirimlerin yanında (2026-10-06): masaüstünde menüye yer bırakmak için daha dar; 1024–1279px'te etiketsiz. */
@media (min-width: 1024px) { .topbar__actions .topbar-address { max-width: 230px; margin-right: var(--spacing-1); } }
/* Teslimat adresinin telefon satırı (ürün sahibi 2026-10-17: "konum seçimi menünün altında olsun"): üst çubuğun üçüncü satırında,
   Çarşı | Yemek | Usta menüsünün altında tam genişlik; sağdaki gruptaki kopya telefonda gizlenir. Geniş ekranda satır yoktur. */
/* .topbar-address-wrap (display: inline-flex) dosyada daha sonra geldiği için gizleme iki sınıfla yazılır; aksi hâlde satır kopyası
   geniş ekranda da görünüyordu (2026-10-17). */
.topbar-address-wrap.topbar-address-row { display: none; }
@media (max-width: 767.98px) {
    .topbar .topbar__actions .topbar-address-wrap { display: none; }
    /* Seçiciler üst çubuğun iki satırlı telefon kurallarından (.topbar:has(.product-switch--topbar) …) daha özgüldür. */
    .topbar:has(.product-switch--topbar) .topbar-address-wrap.topbar-address-row { display: flex; order: 20; flex: 1 0 100%; min-width: 0; }
    .topbar:has(.product-switch--topbar) .topbar-address-row .topbar-address { flex: 1 1 auto; width: 100%; max-width: none; min-height: 40px; padding: 2px 12px 2px 10px; }
    .topbar:has(.product-switch--topbar) .topbar-address-row .topbar-address__text { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; }
    .topbar:has(.product-switch--topbar) .topbar-address-row .topbar-address__label { display: inline; flex-shrink: 0; }
    .topbar:has(.product-switch--topbar) .topbar-address-row .topbar-address__value { flex: 1; min-width: 0; }
    .topbar:has(.product-switch--topbar) .topbar-address-row .topbar-address__chevron { display: inline-block; }
    .app-shell:has(.topbar .topbar-address-row) { --topbar-height: 156px; }
}
/* Ziyaretçinin konum satırı (2026-10-17, yalnızca telefon): tek satırlık ziyaretçi üst çubuğu ikinci satıra sarılır. Geniş ekrandaki
   karşılığı sağdaki gruptaki .topbar-location-chip düğmesidir (OP #84); telefonda sağ gruptaki kopyalar zaten gizlidir. */
.topbar-address-wrap.topbar-location-row { display: none; }
.topbar-location__note { margin: var(--spacing-2) var(--spacing-4) var(--spacing-3); }
@media (max-width: 767.98px) {
    .topbar.topbar--public:has(.topbar-location-row) { flex-wrap: wrap; align-content: center; row-gap: 6px; }
    .topbar.topbar--public .topbar-address-wrap.topbar-location-row { display: flex; order: 20; flex: 1 0 100%; min-width: 0; }
    .topbar.topbar--public .topbar-location-row .topbar-address { flex: 1 1 auto; width: 100%; max-width: none; min-height: 40px; padding: 2px 12px 2px 10px; }
    .topbar.topbar--public .topbar-location-row .topbar-address__text { display: flex; align-items: baseline; gap: 6px; flex: 1; min-width: 0; }
    .topbar.topbar--public .topbar-location-row .topbar-address__label { display: inline; flex-shrink: 0; }
    .topbar.topbar--public .topbar-location-row .topbar-address__value { flex: 1; min-width: 0; }
    .topbar.topbar--public .topbar-location-row .topbar-address__chevron { display: inline-block; }
    .topbar-location__note { margin: var(--spacing-2) var(--spacing-4) var(--spacing-3); }
    .app-shell:has(.topbar--public .topbar-location-row) { --topbar-height: 112px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .topbar__actions .topbar-address { max-width: 170px; }
    .topbar__actions .topbar-address__label { display: none; }
}
@media (max-width: 1023.98px) {
    .topbar-address { max-width: 46vw; min-height: 40px; padding: 2px 10px 2px 8px; gap: 6px; }
    .topbar-address__label { display: none; }
    .topbar-address__chevron { display: none; }
}
/* Telefonda adres görünürken marka yazısı görsel olarak gizlenir ("E" logosu kalır); üst bar tek satıra sığar. */
@media (max-width: 767.98px) {
    .topbar:has(.topbar-address) .topbar__brand .brand-logo__word {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .topbar:has(.topbar-address) .topbar__brand .brand-logo__mark { display: block; }
}

/* Keşfet menünün en sağındaki öğedir: panel tetikleyicinin sağ kenarına yaslanır, sola açılır. Sola yaslıyken menü kalabalık olunca
   (usta paneli: Panel, Talepler, Tekliflerim, Mesajlar, İşlerim, Takvim) 1920 px'te ekranın sağından taşıyordu (2026-10-24). */
.topnav__panel--mega { left: auto; right: 0; min-width: 260px; padding: var(--spacing-2); }
/* İki bölüm varken (ör. "Usta paneli" + "Diğer") yan yana sütunlar için genişler; tek bölümde dar kalır. */
.topnav__panel--mega:has(.topnav__section ~ .topnav__section) { min-width: min(560px, calc(100vw - 2rem)); }
.topnav__mega { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-1) var(--spacing-2); }
.topnav__section { display: grid; align-content: start; gap: 2px; min-width: 0; }
.topnav__section-title { padding: var(--spacing-2) var(--spacing-3) 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.topnav__item { border-radius: var(--radius-md); }
.topnav__item.active { color: var(--text-link); background: var(--primary-50); font-weight: 700; }
.topnav__item .badge-count { margin-left: auto; }
.topnav__item--invite .icon { color: var(--tint-accent-fg); }
[data-theme="dark"] .topnav__item.active { background: rgba(59, 130, 246, .14); }
/* Teslimat adresi listesi (üst çubuk): yalnızca kayıtlı adresler; yeni adres Adreslerim sayfasında haritayla eklenir. */
.topbar-address-wrap { position: relative; display: inline-flex; min-width: 0; flex: 0 1 auto; }
.topbar-address__panel { left: 0; right: auto; width: min(380px, calc(100vw - 24px)); z-index: 1150; }
/* Adres sağdaki aksiyonlarda (2026-10-06): liste sağa hizalı açılır, ekranı aşmaz. */
.topbar__actions .topbar-address__panel { left: auto; right: 0; }
.topbar-address__head { padding: var(--spacing-3) var(--spacing-4) var(--spacing-1); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.topbar-address__list { display: grid; max-height: min(52vh, 420px); overflow-y: auto; padding: 0 var(--spacing-2); }
.topbar-address__option { display: flex; align-items: center; gap: var(--spacing-3); width: 100%; min-height: 52px; padding: var(--spacing-2) var(--spacing-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-main); font-family: inherit; text-align: left; cursor: pointer; }
.topbar-address__option:hover { background: var(--bg-surface-hover); }
.topbar-address__option.is-selected { background: var(--primary-50); }
.topbar-address__option .icon { color: var(--primary-500); flex-shrink: 0; }
.topbar-address__option-text { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.topbar-address__option-text strong { font-weight: 800; }
.topbar-address__option-text span { font-size: var(--font-size-xs); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-address__check { color: var(--tint-success-fg) !important; }
.topbar-address__foot { display: grid; margin-top: var(--spacing-1); border-top: 1px solid var(--border-color); }
[data-theme="dark"] .topbar-address__option.is-selected { background: rgba(59, 130, 246, .14); }
@media (max-width: 767.98px) {
    /* Telefonda liste üst çubuğun hemen altında ekran genişliğinde açılır. */
    .topbar-address__panel { position: fixed; top: calc(var(--topbar-height) + var(--safe-top) + 6px); left: 12px; right: 12px; width: auto; }
}
/* Ziyaretçi üst çubuğu: Çarşı | Yemek geçişi etiketleriyle görünür; telefonda marka yazısı gizlenir, "E" logosu kalır. */
.product-switch.product-switch--public .product-switch__item > span { display: inline; }
.product-switch.product-switch--public .product-switch__item { padding: 0 12px; }
@media (max-width: 767.98px) {
    .topbar--public:has(.product-switch--public) .topbar__brand .brand-logo__word {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .topbar--public:has(.product-switch--public) .topbar__brand .brand-logo__mark { display: block; }
    .product-switch.product-switch--public .product-switch__item { padding: 0 10px; min-height: 40px; }
}
/* Ürün görseli yükleme (restoran menüsü): dosya seçici gizli, düğme görünümlü etiket açar. */
.fm-upload { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface-subtle); min-width: 0; }
.fm-upload__preview { width: 88px; height: 88px; flex-shrink: 0; border-radius: var(--radius-md); object-fit: cover; background: var(--bg-surface); }
.fm-upload__preview--empty { display: inline-grid; place-items: center; color: var(--text-muted); border: 1px solid var(--border-color); }
.fm-upload__preview--empty .icon { width: 32px; height: 32px; }
.fm-upload__body { display: grid; gap: var(--spacing-2); min-width: 0; }
.fm-upload__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); }
.fm-upload__btn { position: relative; overflow: hidden; cursor: pointer; min-height: 40px; }
.fm-upload__btn.is-busy { pointer-events: none; opacity: .75; }
.fm-upload__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
/* Restoran mutfak kategorisi seçici: dokunarak seçilen çipler + serbest giriş. */
.fcp { display: grid; gap: var(--spacing-2); }
.fcp__chips { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.fcp__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--spacing-3); border: 1px solid var(--border-color); border-radius: var(--radius-full); background: var(--bg-surface); color: var(--text-main); font-family: inherit; font-size: var(--font-size-sm); font-weight: 700; cursor: pointer; }
.fcp__chip:hover:not(:disabled) { border-color: var(--border-strong); }
.fcp__chip.active { border-color: #ea580c; background: #fff7ed; color: #9a3412; }
.fcp__chip:disabled { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .fcp__chip.active { background: rgba(234, 88, 12, .16); color: #fdba74; }

/* Harita: çokgen çizim köşeleri (MapLibre işaretçisi, JS oluşturur) */
.map-draw-vertex { width: 14px; height: 14px; border: 3px solid #e8492f; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); cursor: pointer; }
.map-draw-vertex.is-first { width: 18px; height: 18px; background: #e8492f; border-color: #fff; }

/* Restoran ayarları: teslimat bölgeleri haritası ve geniş bölge düzenleme penceresi */
.fm-areas { display: grid; gap: var(--spacing-3); }
.fm-areas__map { height: 300px; border-radius: var(--radius-lg); overflow: hidden; }
.fm-areas__map .map-canvas { height: 100%; min-height: 300px; }
.fm-areas__dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); }
@media (min-width: 1100px) { .fm-areas { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .fm-areas__map, .fm-areas__map .map-canvas { height: 380px; min-height: 380px; } }
.bottom-sheet-container.fm-area-sheet { max-height: 94dvh; }
@media (min-width: 1024px) { .bottom-sheet-container.fm-area-sheet { width: min(1180px, calc(100% - 2rem)); max-height: 92vh; } }
.fm-mealcards { display: grid; gap: 6px; padding: var(--spacing-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface-subtle); }
/* Yönetici onayı (2026-10-04): restoran panelindeki bekleyen değişiklikler ve rozetler. */
.fm-pending { display: block; color: var(--warning-700, #b45309); }
.fpc__list { display: grid; gap: var(--spacing-2); margin: 0; padding: 0; list-style: none; }
.fpc__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-3); padding: var(--spacing-3); border: 1px solid var(--border-color); border-left-width: 4px; border-radius: var(--radius-lg); }
.fpc__item.is-pending { border-left-color: var(--warning-500, #f59e0b); }
.fpc__item.is-approved { border-left-color: var(--success-500, #22c55e); }
.fpc__item.is-rejected { border-left-color: var(--danger-500, #ef4444); }
.fpc__more { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-3); }
.fpc__body { display: grid; gap: 2px; flex: 1 1 260px; min-width: 0; }
.fpc__note { color: var(--tint-danger-fg); font-weight: 600; }
.fpc__diff { margin: 2px 0; padding-left: 18px; font-size: var(--font-size-sm); }
.fpc__actions { display: flex; gap: var(--spacing-2); }
.fm-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-size-sm); font-weight: 600; }


/* ==========================================================================
   Yeni arayüz (2026-10-08): bölüm renkli koyu üst çubuk ve yeni sayfaların ortak parçaları.
   Taslaklar: docs/tasarim/anasayfa-v2 (anasayfa, talep = Çarşı, yemek, usta). Sayfa stilleri kendi .razor.css dosyalarındadır;
   buradaki sınıflar birden çok sayfanın paylaştığı yapı taşlarıdır. Kılavuz: docs/tasarim/YENI-ARAYUZ.md.
   ========================================================================== */

/* Sayfanın asıl renk belirteçleri: koyu üst çubuk bunları kendi içinde değiştirir; üst çubuktan açılan paneller (menü,
   bildirimler, adres, arama) bu kayıtlı değerlerle yine sayfa renginde çizilir. Değerler kök öğede hesaplanır, bu yüzden
   açık ve koyu temada doğru renge karşılık gelir. */
:root {
  --page-text-main: var(--text-main);
  --page-text-secondary: var(--text-secondary);
  --page-text-muted: var(--text-muted);
  --page-text-link: var(--text-link);
  --page-border-color: var(--border-color);
  --page-border-strong: var(--border-strong);
  --page-bg-surface: var(--bg-surface);
  --page-bg-surface-subtle: var(--bg-surface-subtle);
  --page-bg-surface-hover: var(--bg-surface-hover);
  --page-brand-ink: var(--brand-ink);
  --area-bar: rgba(11, 31, 56, 0.94);
}
.app-shell--area-yemek { --area-bar: rgba(31, 14, 4, 0.94); }
.app-shell--area-usta { --area-bar: rgba(10, 38, 36, 0.94); }

.app-shell .topbar {
  --text-main: #f2f6fb;
  --text-secondary: #c9d6e8;
  --text-muted: #9fb2cb;
  --text-link: #ffd08a;
  --border-color: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --bg-surface: rgba(255, 255, 255, 0.06);
  --bg-surface-subtle: rgba(255, 255, 255, 0.08);
  --bg-surface-hover: rgba(255, 255, 255, 0.12);
  --brand-ink: #ffffff;
  background: var(--area-bar);
  color: var(--text-main);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.app-shell .topbar .dropdown-panel,
.app-shell .topbar .topbar__search {
  --text-main: var(--page-text-main);
  --text-secondary: var(--page-text-secondary);
  --text-muted: var(--page-text-muted);
  --text-link: var(--page-text-link);
  --border-color: var(--page-border-color);
  --border-strong: var(--page-border-strong);
  --bg-surface: var(--page-bg-surface);
  --bg-surface-subtle: var(--page-bg-surface-subtle);
  --bg-surface-hover: var(--page-bg-surface-hover);
  --brand-ink: var(--page-brand-ink);
  color: var(--text-main);
}
.app-shell .topbar .btn-ghost { color: var(--text-main); }
.app-shell .topbar .btn-ghost:hover { background: var(--bg-surface-hover); }
/* Koyu çubukta seçili menü: açık mavi zemin üstünde açık sarı yazı okunmuyordu. Beyaz yazı, hafif aydınlık zemin ve bölüm
   renginde alt çizgi; bölüm rengi Çarşı'da safran, Yemek'te közlenmiş turuncu, Usta'da nane. */
.app-shell { --area-accent: var(--saffron-400); }
.app-shell--area-yemek { --area-accent: #ff9a62; }
.app-shell--area-usta { --area-accent: var(--mint-400); }
.app-shell .topbar .topnav__link.active { color: #ffffff; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 -3px 0 var(--area-accent); }
.app-shell .topbar .topnav__link.active:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
.app-shell .topbar .btn-primary { background: #ffffff; color: var(--carsi-900); border-color: #ffffff; box-shadow: none; }
.product-switch__item--usta.active { background: linear-gradient(118deg, #2fbf8c, var(--usta-700)); color: #fff; box-shadow: 0 6px 14px -8px rgba(21, 80, 73, .8); }
.product-switch__item--usta:not(.active):hover { color: var(--mint-400); }
.app-shell .topbar .product-switch__item--talep:not(.active):hover { color: var(--saffron-400); }
.app-shell .topbar .product-switch__item--yemek:not(.active):hover { color: #ffb08a; }
/* Telefonda ziyaretçi üst çubuğu: üç sekme, logo ve "Giriş Yap" yan yana sığsın diye yalnızca seçili sekmenin adı yazılır,
   diğerleri simgeyle görünür (taslaktaki gibi); ana sayfada hiçbir sekme seçili olmadığından üçü de simgedir. */
@media (max-width: 599px) {
  .product-switch.product-switch--public .product-switch__item:not(.active) > span { display: none; }
  .product-switch.product-switch--public .product-switch__item:not(.active) { padding: 0 10px; }
}

/* Ortak yerleşim: geniş ekranda --page-max (1240 → 1520 → 1800 px) sütun, telefonda 16 px kenar boşluğu. */
.ec-wrap { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--spacing-4); }
@media (min-width: 768px) { .ec-wrap { padding: 0 var(--spacing-8); } }
/* Sayfa içeriği kabuk boşluğu olmadan tam genişlik açılış alanıyla başlasın diye (AppShell ContentClass). */
/* Kenardan kenara sayfalar (ana sayfalar) yan ve üst boşluğu kaldırır; telefonda alt gezinme çubuğunun payı kalır. Önceden alt
   boşluk da sıfırlanıyor, sayfanın son 64 px'i (ör. "Davet et, kazan" düğmeleri) çubuğun arkasında kalıyordu (2026-10-17). */
.app-shell__content--bleed { padding: 0 0 calc(var(--bottom-nav-height) + var(--safe-bottom)) !important; max-width: none !important; }
/* Restoran sayfasının masaüstünde kenardan kenara kapağı (FoodRestaurant.razor.css) pencere genişliğinde çizilir; yatay taşma kırpılır
   (clip kaydırma kabı oluşturmaz, yapışık üst çubuk çalışır). */
@media (min-width: 1024px) { .app-shell:has(.fr-head) { overflow-x: clip; } }
@media (min-width: 1024px) { .app-shell__content--bleed { padding-bottom: 0 !important; } }
/* Bölüm renkli sayfa başlığının (SectionPageHead) gövdesi: başlık şeridiyle aynı --page-max sütunu. Usta alt sayfaları ve bölümden
   bağımsız hesap sayfaları (profil, bildirimler, destek, yasal metinler) kullanır; sayfa ızgaraları kendi .razor.css dosyalarındadır. */
.sec-body { width: 100%; min-width: 0; max-width: var(--page-max); margin: 0 auto; }
/* Etiketli adım göstergesi (Usta talep sihirbazı, usta başvurusu): ince çubuğun altında adım adı. Düz .stepper yalnızca çubuktur;
   içine yazı konunca 4 px yüksekliğe sıkışıp görünmüyordu. Tamamlanan adım rengi --stepper-done ile bölüme göre verilebilir. */
.stepper--labeled { margin: 0; padding: 0; list-style: none; align-items: flex-start; }
.stepper--labeled .stepper__step { display: grid; gap: 6px; min-width: 0; height: auto; background: none; color: var(--text-muted); font-size: var(--font-size-xs); font-weight: 650; }
.stepper--labeled .stepper__step::before { content: ""; display: block; height: 4px; border-radius: var(--radius-full); background: var(--border-strong); }
.stepper--labeled .stepper__step.done::before { background: var(--stepper-done, var(--primary-500)); }
.stepper--labeled .stepper__step.current::before { background: var(--accent-500); }
.stepper--labeled .stepper__step.done, .stepper--labeled .stepper__step.current { color: var(--text-main); }
.stepper--labeled .stepper__step > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-theme="dark"] .stepper--labeled .stepper__step { background: none; }
/* Koyu temada baş harf avatarı: yukarıdaki "Koyu tema okunurluğu" kuralında (iki dalda aynı kural eklenmişti). */

/* Koyu açılış alanı: bölüm renginde zemin, nokta ızgarası ve ışıma. */
.ec-hero { position: relative; overflow: hidden; color: var(--on-dark-1); background: var(--bg-hero-carsi); padding: var(--spacing-8) 0 var(--spacing-12); }
.ec-hero--yemek { background: var(--bg-hero-yemek); }
.ec-hero--usta { background: var(--bg-hero-usta); }
.ec-hero::before, .ec-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--dot-grid); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%); mask-image: linear-gradient(180deg, #000 30%, transparent 95%); }
.ec-hero > *, .ec-band > * { position: relative; }
.ec-hero h1 { font-family: var(--font-display); font-variation-settings: "opsz" 96; font-weight: 750; font-size: clamp(2.4rem, 6vw, 4.1rem); line-height: 1; letter-spacing: -0.03em; margin: var(--spacing-4) 0 0; color: var(--on-dark-1); }
.ec-hero__lead { font-size: var(--font-size-lg); line-height: 1.6; color: var(--on-dark-2); max-width: 48ch; margin: var(--spacing-4) 0 0; }
.ec-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--font-size-sm); color: #dfe8f4; }
.ec-pill__dot { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--success-600); color: #fff; }

/* Koyu bant (canlı hareket, esnaf daveti): açılışla aynı dil. */
.ec-band { position: relative; overflow: hidden; color: var(--on-dark-1); background: var(--bg-live-band); padding: var(--spacing-12) 0; }

/* Bölüm başlığı. */
.ec-section { padding-top: var(--spacing-12); }
.ec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-3) var(--spacing-6); margin-bottom: var(--spacing-6); }
.ec-head h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0; }
.ec-head p { margin: var(--spacing-2) 0 0; color: var(--text-muted); font-size: var(--font-size-base); line-height: 1.6; max-width: 58ch; }
.ec-band .ec-head h2 { color: var(--on-dark-1); }
.ec-band .ec-head p { color: var(--on-dark-2); }
/* Dokunma alanı en az 40 px (telefonda "Tüm açık talepler" 24 px yüksekliğindeydi; E2E bulgusu 2026-10-10). */
.ec-head__link { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-link); font-weight: 650; white-space: nowrap; }
.ec-band .ec-head__link { color: var(--saffron-400); }

/* Renkli simge kutusu: --c1/--c2 ile renklenir (kategori, hizmet, bölüm). 2026-10-24 (profesyonel görünüm): parlak degrade, beyaz
   glif ve gölge yerine bildirim kutusu (.notif-tile) gibi yumuşak ton: zemin --c1'in yüzeye karışımı, glif --c2. Kutu --c1/--c2'yi
   kendisi tanımlamaz (önceden tanımlıyor, üst öğenin verdiği bölüm/kategori rengini eziyordu); renk üst öğeden ya da kutunun kendi
   stilinden gelir, hiç verilmezse var(...) yedeğiyle vurgu rengine düşer. */
.ec-tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0; color: var(--c2, var(--accent-700)); background: color-mix(in srgb, var(--c1, var(--accent-500)) 14%, var(--bg-surface)); box-shadow: none; }
/* Koyu temada koyu ton (--c2) koyu yüzeyde okunmaz: glif açık tonun (--c1) metin rengine karışımı, zemin biraz daha doygun. */
[data-theme="dark"] .ec-tile { color: color-mix(in srgb, var(--c1, var(--accent-500)) 75%, var(--text-main)); background: color-mix(in srgb, var(--c1, var(--accent-500)) 20%, var(--bg-surface)); }
.ec-tile .icon { width: 25px; height: 25px; }
.ec-tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.ec-tile--sm .icon { width: 19px; height: 19px; }
/* Yönetimden yüklenen hizmet görseli (ADR-058, UstaServiceIcon): içinde durduğu kutuyu doldurur, köşeleri kutunun yuvarlaklığını alır. */
.ec-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Bilgi kartı: beyaz yüzey, köşede bölüm rengi ışıması. */
.ec-card { --c1: var(--accent-500); position: relative; padding: var(--spacing-5); border-radius: var(--radius-xl); border: 1px solid var(--border-color); background: radial-gradient(260px 150px at 100% 0%, color-mix(in srgb, var(--c1) 14%, transparent), transparent 70%), var(--bg-surface); box-shadow: var(--shadow-xs); }
a.ec-card, .ec-card--interactive { transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s; text-decoration: none; color: inherit; }
a.ec-card:hover, .ec-card--interactive:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 45%, var(--border-color)); box-shadow: var(--shadow-card-hover); }

/* Koyu zemin üzerinde yüzen beyaz kart (açılış kompozisyonları). */
.ec-float { border-radius: 18px; background: #fff; color: var(--carsi-800); box-shadow: var(--shadow-float); }

/* Canlı harita ve akış (ana sayfa, Çarşı). */
.ec-live { display: grid; gap: var(--spacing-5); }
@media (min-width: 1024px) { .ec-live { grid-template-columns: 1.3fr 1fr; } }
.ec-live__map { position: relative; height: 320px; border-radius: 26px; overflow: hidden; background: radial-gradient(400px 260px at 60% 55%, rgba(31, 95, 174, 0.35), transparent 70%), #0a1a30; border: 1px solid rgba(255, 255, 255, 0.08); }
@media (min-width: 1024px) { .ec-live__map { height: 460px; } }
.ec-live__feed { display: grid; gap: 10px; align-content: start; height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }
@media (min-width: 1024px) { .ec-live__feed { height: 460px; } }
.ec-feed-item { --c: var(--accent-500); display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.09); color: var(--on-dark-1); text-decoration: none; transition: background 1.4s, border-color 1.4s; }
.ec-feed-item:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; color: var(--on-dark-1); }
.ec-feed-item--fresh { background: rgba(242, 140, 0, 0.15); border-color: rgba(255, 177, 74, 0.6); transition: none; animation: ec-feed-in .7s var(--ease-out); }
@keyframes ec-feed-in { 0% { opacity: 0; transform: translateY(-16px) scale(.98); } 100% { opacity: 1; transform: none; } }
.ec-feed-item__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--c) 30%, var(--carsi-900)); color: color-mix(in srgb, var(--c) 45%, #fff); }
.ec-feed-item__body { flex: 1; min-width: 0; }
.ec-feed-item__title { display: block; font-weight: 700; font-size: var(--font-size-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-feed-item__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: 12.5px; color: var(--on-dark-3); }
.ec-feed-item__meta em { font-style: normal; font-weight: 700; color: color-mix(in srgb, var(--c) 60%, #fff); }
.ec-feed-item__badge { padding: 5px 11px; border-radius: var(--radius-full); font-size: 12.5px; font-weight: 700; white-space: nowrap; background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 55%, #fff); }
.ec-live__head { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 6px; font-size: var(--font-size-sm); color: var(--on-dark-2); }
.ec-live__dot { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #7fe0ad; }
.ec-live__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1fb26b; animation: ec-beat 1.6s ease-out infinite; }
@keyframes ec-beat { 0% { box-shadow: 0 0 0 0 rgba(31, 178, 107, .55); } 100% { box-shadow: 0 0 0 10px rgba(31, 178, 107, 0); } }
.ec-note { margin-top: var(--spacing-3); font-size: var(--font-size-xs); color: var(--on-dark-3); }

@media (prefers-reduced-motion: reduce) {
  .ec-feed-item--fresh, .ec-live__dot::before { animation: none !important; }
  a.ec-card, .ec-card--interactive { transition: none; }
}

/* --------------------------------------------------------------------------
   Çalışma ekranları (ADR-050; bugün kurye ekranı, ADR-053): ortak üst menü (WorkTopBar), rol kilitli logo (BrandLogo Role)
   ve sitenin alt menüsüyle aynı standarttaki alt menü (WorkBottomNav). Kabuk bu kipte (app-shell--work) sitenin üst çubuğunu,
   alt menüsünü ve altbilgisini çizmez.
   -------------------------------------------------------------------------- */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; line-height: 0; min-width: 0; }
.brand-lockup .brand-logo__word { height: 22px; }
.brand-lockup__divider { width: 1px; height: 20px; background: currentColor; opacity: .32; flex: 0 0 auto; }
.brand-lockup__role { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 8px; font: 800 12.5px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.brand-lockup--dark { color: #fff; }
.brand-lockup--dark .brand-lockup__role { background: rgba(255, 255, 255, .12); color: #fff; }
.brand-lockup--dark.brand-lockup--usta .brand-lockup__role { color: var(--mint-400); background: rgba(61, 220, 151, .14); }
.brand-lockup--dark.brand-lockup--kurye .brand-lockup__role { color: #ffb38a; background: rgba(226, 85, 43, .22); }
.brand-lockup--dark.brand-lockup--carsi .brand-lockup__role { color: var(--saffron-400); background: rgba(242, 140, 0, .18); }
.brand-lockup--light, .brand-lockup--theme { color: var(--text-primary); }
.brand-lockup--light .brand-lockup__role, .brand-lockup--theme .brand-lockup__role { background: var(--bg-surface-subtle); color: var(--text-primary); }
.brand-lockup--light.brand-lockup--usta .brand-lockup__role, .brand-lockup--theme.brand-lockup--usta .brand-lockup__role { background: var(--mint-50); color: var(--mint-600); }
.brand-lockup--light.brand-lockup--kurye .brand-lockup__role, .brand-lockup--theme.brand-lockup--kurye .brand-lockup__role { background: #fdebe1; color: #a8401c; }
.brand-lockup--light.brand-lockup--carsi .brand-lockup__role, .brand-lockup--theme.brand-lockup--carsi .brand-lockup__role { background: #fff1dc; color: #8a4b00; }
@media (max-width: 359.98px) { .brand-lockup .brand-logo__word { height: 18px; } .brand-lockup { gap: 7px; } }

/* Üst menü: sabit (yapışık), koyu rol zemini; içerik sayfa sütunuyla hizalı. */
.work-topbar { position: sticky; top: 0; z-index: 900; padding-top: var(--safe-top); background: var(--usta-900); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 8px 20px -14px rgba(0, 0, 0, .5); }
.work-topbar--yemek { background: var(--yemek-800); }
.work-topbar--carsi { background: var(--carsi-900); }
.work-topbar__inner { height: 56px; max-width: var(--work-max, 640px); margin: 0 auto; padding: 0 var(--spacing-4); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); }
.work-topbar__brand { display: inline-flex; align-items: center; min-height: var(--min-touch-target, 44px); min-width: 0; color: inherit; text-decoration: none; }
.work-topbar__brand:hover { text-decoration: none; color: inherit; }
.work-topbar__menu-wrap { position: relative; flex: 0 0 auto; }
.work-topbar__menu-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: var(--min-touch-target, 44px); padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .06); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; }
.work-topbar__menu-btn:hover { background: rgba(255, 255, 255, .12); }
.work-topbar__menu-btn:focus-visible { outline: 3px solid var(--mint-400); outline-offset: 2px; }
.work-topbar__dot { position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-500); box-shadow: 0 0 0 2px var(--usta-900); }
.work-topbar__panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - var(--safe-top) - 80px); overflow-y: auto; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); padding: 6px; z-index: 1150; }
.work-topbar__who { display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px; }
.work-topbar__who b { display: block; font-size: 14.5px; overflow-wrap: anywhere; }
.work-topbar__who small { display: block; color: var(--text-muted); font-size: 12.5px; }
.work-topbar__section { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.work-topbar__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--min-touch-target, 44px); padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.work-topbar__item:hover { background: var(--bg-surface-subtle); text-decoration: none; color: inherit; }
.work-topbar__item > span { flex: 1; min-width: 0; }
.work-topbar__item small { display: block; font-weight: 500; font-size: 12.5px; color: var(--text-muted); }
.work-topbar__item.is-current { background: var(--mint-50); color: var(--mint-600); }
.work-topbar__item--danger { color: var(--tint-danger-fg); }
.work-topbar__check { flex: 0 0 auto; }

/* Alt menü: sitenin mobile-bottom-nav standardı; vurgu rengi rolden. Adressiz sekme düğmedir. */
.mobile-bottom-nav button.nav-item { background: none; border: 0; font: inherit; font-size: var(--font-size-2xs); font-weight: 600; cursor: pointer; padding: 0; }
.mobile-bottom-nav button.nav-item:disabled { opacity: .45; cursor: default; }
.work-bottom-nav--usta .nav-item.active { color: var(--usta-700); }
.work-bottom-nav--usta .nav-item.action-create { color: var(--usta-700); }
.work-bottom-nav--usta .nav-item.action-create .create-icon-bubble { background: linear-gradient(135deg, var(--mint-400), #22b87a); color: #062018; box-shadow: 0 10px 18px -10px rgba(18, 122, 82, .9); }
.work-bottom-nav--yemek .nav-item.active { color: var(--yemek-ember); }
.work-bottom-nav--yemek .nav-item.action-create { color: var(--yemek-600); }
.work-bottom-nav--yemek .nav-item.action-create .create-icon-bubble { background: linear-gradient(135deg, #ff7a45, var(--yemek-ember)); color: #fff; }
[data-theme="dark"] .work-bottom-nav--usta .nav-item.active, [data-theme="dark"] .work-bottom-nav--usta .nav-item.action-create { color: var(--mint-400); }
[data-theme="dark"] .work-topbar__item.is-current { background: rgba(61, 220, 151, .14); color: var(--mint-400); }
/* Çarşı vurgusu (ADR-051): lacivert üst menü, turuncu vurgu; ortadaki birincil eylem sitenin turuncu düğmesidir. Bileşen parametresi
   olarak kalır (Çarşı çalışma ekranı ADR-053 ile kalktı). */
.work-topbar--carsi .work-topbar__dot { box-shadow: 0 0 0 2px var(--carsi-900); }
.work-topbar--carsi .work-topbar__menu-btn:focus-visible { outline-color: var(--accent-500); }
.work-topbar--carsi .work-topbar__item.is-current { background: var(--accent-50); color: var(--tint-accent-fg); }
.work-bottom-nav--carsi .nav-item.active { color: var(--primary-500); }
.work-bottom-nav--carsi .nav-item.action-create { color: var(--accent-600); }
[data-theme="dark"] .work-bottom-nav--carsi .nav-item.active, [data-theme="dark"] .work-bottom-nav--carsi .nav-item.action-create { color: var(--accent-500); }
[data-theme="dark"] .work-topbar--carsi .work-topbar__item.is-current { background: rgba(242, 140, 0, .16); color: var(--saffron-400); }
/* Geniş ekranda (sitenin alt menüsü gizlenir) çalışma ekranının alt menüsü sayfa sütunu genişliğinde ortada kalır. */
@media (min-width: 1024px) {
  .mobile-bottom-nav.work-bottom-nav { display: grid; left: 50%; right: auto; width: min(var(--work-max, 640px), 100%); transform: translateX(-50%); border: 1px solid var(--border-color); border-bottom: 0; border-radius: 18px 18px 0 0; }
}

/* Kabuk çalışma ekranı kipinde: içerik kenardan kenara (üst menü ve şeritler tam genişlik), alt boşluk alt menü kadar. */
.app-shell--work .app-shell__content { padding: 0 0 calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-6)); max-width: none; }
.app-shell--work .offline-banner { top: calc(var(--safe-top) + 56px); }
/* Kurye kipindeki hesap sayfaları (ADR-063): kurye üst ve alt menüsünü kabuk çizer (CourierModeGuard); sayfa kendi düzenini kurmadığı için
   içerik olağan kenar boşluklarıyla durur, alt boşluk geniş ekranda da görünen kurye alt menüsü kadardır. Başlık satırı yalnız telefonda. */
.app-shell--work.app-shell--work-inset .app-shell__content { padding: var(--spacing-4) var(--spacing-4) calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-6) + 12px); max-width: var(--content-max-width); }
@media (min-width: 1024px) {
  .app-shell--work.app-shell--work-inset .app-shell__content { padding: var(--spacing-6) var(--spacing-8) calc(var(--bottom-nav-height) + var(--safe-bottom) + var(--spacing-10)); }
}
.work-pagebar { display: none; }

/* Bildirim simge kutusu (NotificationIconTile, 2026-10-24): sitenin çizgi simgesi, bölüm renginde yuvarlak açık zemin ("Kuryeniz
   yolda" şeridindeki kutu gibi). Tonlar color-mix ile yüzey rengine karışır; koyu temada da okunur. */
.notif-tile {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--radius-full);
  display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--primary-500) 12%, var(--bg-surface)); color: var(--primary-600);
}
.notif-tile .icon { width: 20px; height: 20px; }
.notif-tile--sm { flex-basis: 32px; width: 32px; height: 32px; }
.notif-tile--sm .icon { width: 16px; height: 16px; }
.notif-tile--carsi { background: color-mix(in srgb, var(--accent-500) 14%, var(--bg-surface)); color: var(--accent-700); }
.notif-tile--yemek { background: color-mix(in srgb, var(--yemek-ember) 13%, var(--bg-surface)); color: var(--yemek-ember); }
.notif-tile--usta { background: color-mix(in srgb, var(--mint-600) 14%, var(--bg-surface)); color: var(--mint-600); }
.notif-tile--uyari { background: color-mix(in srgb, var(--danger-500) 12%, var(--bg-surface)); color: var(--danger-500); }
[data-theme="dark"] .notif-tile { color: var(--primary-300); }
[data-theme="dark"] .notif-tile--carsi { color: var(--accent-500); }
[data-theme="dark"] .notif-tile--usta { color: var(--mint-400); }
/* Yemek tonu koyu temada genel kuraldan (mavi) etkileniyordu; köz rengi koyu yüzeyde de okunur (2026-10-24, Yemek duyuru kartı). */
[data-theme="dark"] .notif-tile--yemek { color: var(--yemek-ember); }
[data-theme="dark"] .notif-tile--uyari { color: #f87171; }

/* Süren sipariş ve usta işi şeritleri (AppShell, 2026-10-24): bölüm koyusu zeminde, koyu üst çubukla sayfa başlığı arasında
   kesintisiz; geniş ekranda yan yana. Önceden sayfa zemininde iki tam genişlik satırdı ve koyu bandı bölüyordu. */
.live-strips { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3) var(--spacing-3); background: var(--carsi-900); }
.app-shell--area-yemek .live-strips { background: var(--yemek-900); }
.app-shell--area-usta .live-strips { background: var(--usta-900); }
.live-strips:empty { display: none; }
.app-shell .live-strips .faob, .app-shell .live-strips .uajb { width: 100%; min-width: 0; max-width: none; margin: 0; }
@media (min-width: 1024px) {
  .live-strips {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    /* Sayfa gövdesinin (.sec-body) kenarıyla aynı hiza: kabuk boşluğu ya da ortalanmış --page-max sütununun kenarı. */
    padding-inline: max(var(--spacing-8), calc((100% - var(--page-max, 1440px)) / 2));
  }
}

/* ------------------------------------------------------------------ Fotoğraf görüntüleyici (platform-ui.js, pv*)
   Resim bağlantıları yeni sekme yerine sayfanın üstünde açılır; mobil uygulamada tarayıcıya çıkılmaz (2026-10-30). */
html.pv-open, html.pv-open body { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 1400; display: flex; color: #fff; background: rgba(6, 10, 18, calc(0.94 * var(--pv-fade, 1))); animation: pv-in 0.18s ease-out; -webkit-tap-highlight-color: transparent; }
.pv__stage { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none;
  padding: calc(var(--safe-top) + 64px) max(12px, env(safe-area-inset-right, 0px)) calc(var(--safe-bottom) + 24px) max(12px, env(safe-area-inset-left, 0px)); }
.pv__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; opacity: 0; will-change: transform; -webkit-user-drag: none; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8); }
.pv.is-ready .pv__img { opacity: 1; }
.pv.is-error .pv__img { display: none; }
.pv__spinner { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
.pv.is-ready .pv__spinner { display: none; }
.pv__error { display: none; margin: 0; font-size: var(--font-size-sm, 0.875rem); color: rgba(255, 255, 255, 0.8); }
.pv.is-error .pv__error { display: block; }
.pv__bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(var(--safe-top) + 10px) 12px 10px 20px; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); pointer-events: none; }
.pv__count { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.pv__btn { pointer-events: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); cursor: pointer; transition: background 0.15s ease; }
.pv__btn:hover { background: rgba(255, 255, 255, 0.24); }
.pv__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pv__nav { position: absolute; top: 50%; margin-top: -22px; }
.pv__nav--prev { left: max(12px, env(safe-area-inset-left, 0px)); }
.pv__nav--next { right: max(12px, env(safe-area-inset-right, 0px)); }
.pv__nav[hidden] { display: none; }
/* Dokunmatik ekranda geçiş kaydırmayla yapılır; oklar fotoğrafı örtmesin diye gizlenir. */
@media (pointer: coarse) { .pv__nav { display: none; } }
@keyframes pv-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pv { animation: none; } .pv__img { transition: none !important; } }