/* ============================================================================
   Dinootomasyon — Panel
   Yön: atölye — mürekkep + bakır. Token'lar tokens.css'te.

   İlkeler
     1. Renk bilgi taşır, dekorasyon yapmaz. Normal durum nötr; renk yalnızca
        dikkat gerektiren istisna için.
     2. Tek tablo dili, tek kart dili, tek buton dili.
     3. Hiyerarşi ölçek ve boşlukla kurulur, kutu ve gölge yığmakla değil.
     4. Her etkileşimli öğenin görünür bir odak hali vardır.

   NOT: Bu dosya tokens.css'ten SONRA yüklenmelidir.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Eski değişken adları — geriye dönük uyum.
   View'larda hâlâ satır içi var(--accent), var(--border) gibi kullanımlar var.
   Bunlar tek tek temizlenene kadar takma ad olarak yaşıyorlar; yeni kod
   doğrudan tokens.css adlarını kullanmalı.
   -------------------------------------------------------------------------- */
:root {
  --bg-primary: var(--paper);
  --bg-secondary: var(--surface);
  --bg-card: var(--surface);
  --bg-card-hover: var(--surface-hover);
  --bg-input: var(--surface);
  --border: var(--line);
  --border-light: var(--line-strong);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --accent: var(--copper-ink);
  --accent-hover: var(--copper-hover);
  --accent-light: var(--copper-wash);
  --success: var(--ok);
  --success-light: var(--ok-wash);
  --warning: var(--warn);
  --warning-light: var(--warn-wash);
  /* --danger ve --info zaten tokens.css'te aynı adla tanımlı.
     Burada tekrar tanımlamak kendine referans veren bir döngü kurar ve
     değişkeni geçersiz kılar — bu yüzden yalnızca *-light takma adları var. */
  --danger-light: var(--danger-wash);
  --info-light: var(--info-wash);
  --gradient-1: var(--copper-solid);
  --gradient-2: var(--ok);
  --gradient-gold: var(--copper-solid);
  --shadow: var(--shadow-2);
  --shadow-sm: var(--shadow-1);
  --radius: var(--r-4);
  --radius-sm: var(--r-3);
  --radius-xs: var(--r-2);
  --transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}

/* ============================================================================
   Temel
   ========================================================================== */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  background: var(--paper);
  color: var(--ink-2);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

a {
  color: var(--copper-ink);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--copper-hover); text-decoration: underline; text-underline-offset: 2px; }

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

code, pre, .font-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 0.1em 0.38em;
  color: var(--ink);
}

::selection { background: var(--copper-wash-2); color: var(--ink); }

hr { border: none; height: 1px; background: var(--line); margin: var(--s-6) 0; }

/* ----------------------------------------------------------------------------
   Odak — panelde daha önce hiç yoktu. Klavyeyle gezinen kullanıcı nerede
   olduğunu görmeli. Fare tıklamasında halka çıkmasın diye :focus-visible.
   -------------------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-2);
}

/* İçeriğe atla — klavye kullanıcısı 20 menü öğesini geçmek zorunda kalmasın */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--paper); text-decoration: none; }

/* İkonlar */
.ico { flex-shrink: 0; display: block; }
.ico-inline {
  display: inline-block;
  vertical-align: -0.18em;
  margin-right: 0.35em;
}

/* ============================================================================
   Kabuk
   ========================================================================== */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-sidebar);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-3) var(--ease);
}

.sidebar-header {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink);
}
.sidebar-brand:hover { color: var(--ink); text-decoration: none; }

.sidebar-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Marka adı düz mürekkep. Gradient dolgulu metin okunurluğu düşürüyordu
   ve landing'in yönüyle çelişiyordu. */
.sidebar-logo-text,
.sidebar-logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.sidebar-tenant {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-top: var(--s-2);
  padding-left: calc(32px + var(--s-3));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav {
  flex: 1;
  padding: var(--s-3) var(--s-3) var(--s-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-group-label {
  padding: var(--s-5) var(--s-3) var(--s-2);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.sidebar-nav > .nav-group-label:first-child { padding-top: var(--s-2); }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  margin-bottom: 1px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: var(--transition);
  position: relative;
}

.nav-item:hover {
  background: var(--surface-hover);
  color: var(--ink);
  text-decoration: none;
}

.nav-item.active {
  background: var(--copper-wash);
  color: var(--copper-ink);
  font-weight: 700;
}

/* Aktif işareti: sol kenarda ince bakır çubuk — arka plan yıkamasını
   tek başına bırakmak yeterince belirgin değil */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: calc(var(--s-3) * -1 + 3px);
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  border-radius: 1px;
  background: var(--copper);
}

.nav-item .icon,
.nav-item .ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink-3);
}
.nav-item:hover .ico { color: var(--ink-2); }
.nav-item.active .ico { color: var(--copper); }

.sidebar-footer {
  padding: var(--s-3);
  border-top: 1px solid var(--line);
}

.main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  padding: var(--s-8) var(--s-10);
}

/* ============================================================================
   Sayfa başlığı
   ========================================================================== */
.page-header {
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--ink-3);
  margin-top: var(--s-1);
  max-width: var(--measure);
}

.section-heading {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-4);
}

/* ============================================================================
   Kart
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
}

/* Kartlar tıklanabilir değilse hover'da hareket etmemeli — eski
   translateY(-2px) her yüzeyi oynak gösteriyordu. */
.card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.card-hint {
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-top: var(--s-1);
}

/* ============================================================================
   İstatistik — tek dil.
   Eski .stat-card (renkli üst şerit + hover kalkması) ile .admin-stat-card
   (düz) ayrı görünüyordu; ikisi de artık aynı.
   ========================================================================== */
.stats-grid,
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.stat-card,
.admin-stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.stat-label,
.admin-stat-lbl {
  order: -1;
  font-size: var(--text-2xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-weight: 700;
}

.stat-value,
.admin-stat-val {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-meta {
  font-size: var(--text-xs);
  color: var(--ink-3);
}

.stat-icon { display: none; }  /* dekoratif emoji yuvası — artık kullanılmıyor */

/* Eski renk varyantları: view'ları kırmamak için duruyor ama artık
   üst şerit çizmiyorlar. Renk bilgi taşımadığı yerde renk yok. */
.stat-card.purple, .stat-card.green, .stat-card.blue, .stat-card.orange { }

/* ============================================================================
   Tablo — tek sistem ("sessiz tablo").
   Renk yalnızca dikkat gerektiren hücrede. Zebra yok, ağır başlık yok.
   ========================================================================== */
.table-wrapper,
.table-quiet-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

table,
.table-quiet {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead th,
.table-quiet thead th {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  background: transparent;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

tbody td,
.table-quiet tbody td {
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink-2);
}

.table-quiet tbody td { vertical-align: top; }

tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color var(--dur-1) var(--ease); }
tbody tr:hover { background: var(--surface-hover); }

tbody td strong { color: var(--ink); font-weight: 600; }

/* Birincil hücre: ad + altında kimlik */
.q-name {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ink);
}
.q-name:hover { color: var(--copper-ink); }

.q-sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* Sayı öne çıkar, birim geri çekilir */
.q-metric { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.q-unit { color: var(--ink-3); font-weight: 400; }
.q-zero { color: var(--ink-4); font-weight: 400; }
.q-warn { color: var(--danger); font-weight: 500; }

.q-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: var(--r-full);
  margin-right: var(--s-2);
  vertical-align: middle;
  background: var(--ink-4);
}
.q-dot-on { background: var(--ok); }
.q-dot-off { background: var(--line-strong); }

.q-bar {
  height: 3px;
  width: 72px;
  margin-top: var(--s-1);
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.q-bar-fill { height: 100%; background: var(--ink-3); }
.q-bar-fill.is-high { background: var(--danger); }

/* Satır aksiyonları: buton yığını değil, sessiz metin bağlantısı */
.q-actions {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  flex-wrap: wrap;
}

.q-action {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  /* Önceden --text-xs + --ink-3 idi: satırın en sağında, gri ve küçük.
     "Düzenle" bulunamıyordu. Sessiz kalsın ama okunabilir olsun. */
  font-size: var(--text-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease);
  white-space: nowrap;
  min-height: 32px;
}
.q-action:hover { color: var(--copper-ink); text-decoration: underline; text-underline-offset: 2px; }
.q-action-danger:hover { color: var(--danger); }

/* Satırın birincil eylemi — yığın hâline gelmeden öne çıksın */
.q-action--primary {
  color: var(--copper-ink);
  font-weight: 600;
}
.q-action--primary:hover { color: var(--copper-hover); }

/* Satır içi düzeltme çağrısı: uyarının kendisi tıklanabilir olsun */
.q-fix {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--danger);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.q-fix:hover { color: var(--ink); }

/* ============================================================================
   Rozet
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 3px var(--s-2);
  border-radius: var(--r-1);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Nötr varsayılan — süreç içindeki normal durum renk hak etmez */
.badge { background: var(--surface-sunk); color: var(--ink-2); border-color: var(--line); }

.badge-pending   { background: var(--warn-wash);   color: var(--warn);   border-color: transparent; }
.badge-confirmed { background: var(--info-wash);   color: var(--info);   border-color: transparent; }
.badge-shipped   { background: var(--copper-wash); color: var(--copper-ink); border-color: transparent; }
.badge-delivered { background: var(--ok-wash);     color: var(--ok);     border-color: transparent; }
.badge-rejected  { background: var(--danger-wash); color: var(--danger); border-color: transparent; }
.badge-active    { background: var(--ok-wash);     color: var(--ok);     border-color: transparent; }
.badge-inactive  { background: var(--surface-sunk);color: var(--ink-3);  border-color: var(--line); }

/* ============================================================================
   Buton
   Hap şekli (99px) bırakıldı — jenerik SaaS imzasıydı. Hover'da yükselme de
   bırakıldı; onun yerine yüzey koyulaşıyor.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn .ico { width: 16px; height: 16px; }

.btn-primary {
  background: var(--copper-solid);
  color: #fff;
  border-color: var(--copper-solid);
}
.btn-primary:hover { background: var(--copper-hover); border-color: var(--copper-hover); color: #fff; }

.btn-outline {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
.btn-outline:hover { background: var(--surface-hover); border-color: var(--ink-3); color: var(--ink); }

/* Sessiz aksiyon — tabloda ve kart başlığında */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-3);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--ink); }

.btn-success { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-success:hover { background: #35684c; border-color: #35684c; color: #fff; }

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

.btn-warning { background: var(--warn); color: #fff; border-color: var(--warn); }
.btn-warning:hover { background: #6f500d; border-color: #6f500d; color: #fff; }

.btn-info { background: var(--info); color: #fff; border-color: var(--info); }
.btn-info:hover { background: #274f68; border-color: #274f68; color: #fff; }

.btn-sm { padding: var(--s-1) var(--s-3); min-height: 30px; font-size: var(--text-xs); }
.btn-xs { padding: 2px var(--s-2); min-height: 24px; font-size: var(--text-2xs); }

.btn-icon {
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: var(--r-2);
}

.btn-block { width: 100%; }

/* ============================================================================
   Form
   Eski dosyada .form-label ve .form-input İKİ KEZ tanımlıydı; ikinci tanım
   birinciyi eziyor, etiketleri istenmeden BÜYÜK HARF yapıyordu. Tek tanım.
   ========================================================================== */
.form-group { margin-bottom: var(--s-5); }
.form-group:last-child { margin-bottom: 0; }

.form-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: var(--s-2);
  letter-spacing: 0.005em;
}

.form-label .req { color: var(--danger); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea,
textarea.form-input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  min-height: 38px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.45;
  transition: var(--transition);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-4); }

.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--ink-4); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
textarea.form-input:focus {
  outline: none;
  border-color: var(--copper);
  box-shadow: var(--focus-ring);
}

.form-input:disabled,
.form-select:disabled { background: var(--surface-sunk); color: var(--ink-4); cursor: not-allowed; }

.form-textarea { min-height: 96px; resize: vertical; }

.form-select {
  cursor: pointer;
  appearance: none;
  padding-right: var(--s-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237d7688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
}

/* Alan altı yardım metni */
.form-help {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-3);
  margin-top: var(--s-2);
  line-height: 1.45;
  max-width: 52ch;
}

.form-error { color: var(--danger); }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
}

.form-inline {
  display: flex;
  gap: var(--s-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

/* Onay kutusu / radyo */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
  user-select: none;
}
.check-row input[type="checkbox"],
.check-row input[type="radio"],
.toggle-card input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--copper-solid);
  cursor: pointer;
  flex-shrink: 0;
}

/* Bölüm — uzun formu konu konu ayırır */
.form-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-6);
  margin-bottom: var(--s-5);
}

.form-section-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--ink);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.form-section-header .ico { color: var(--ink-3); }

.form-section-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.license-toggle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-2);
}

.toggle-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}
.toggle-card:hover { border-color: var(--copper); background: var(--copper-wash); }
.toggle-card span { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }

/* Filtre çubuğu */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: flex-end;
  margin-bottom: var(--s-5);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.filter-bar .form-group { margin-bottom: 0; }
.filter-bar .form-input,
.filter-bar .form-select { width: auto; min-width: 160px; }

/* Satır içi düzenleme */
.inline-edit { display: inline-flex; align-items: center; gap: var(--s-2); }
.inline-edit input {
  width: 78px;
  padding: var(--s-1) var(--s-2);
  min-height: 28px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-sm);
  text-align: center;
}
.inline-edit input:focus { outline: none; border-color: var(--copper); box-shadow: var(--focus-ring); }

/* Yükleme alanı */
.upload-zone {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-3);
  padding: var(--s-8);
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: var(--s-4);
  color: var(--ink-3);
}
.upload-zone:hover,
.upload-zone.dragover { border-color: var(--copper); background: var(--copper-wash); color: var(--ink-2); }
.upload-zone .ico { margin: 0 auto var(--s-3); width: 28px; height: 28px; }
.upload-zone p { font-size: var(--text-sm); }

/* ============================================================================
   İlerleme
   ========================================================================== */
.progress-bar {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--s-2);
}
.progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--copper);
  transition: width var(--dur-3) var(--ease);
}
.progress-fill.is-high { background: var(--danger); }

/* ============================================================================
   Uyarı kutusu
   ========================================================================== */
.alert {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  margin-bottom: var(--s-4);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  border: 1px solid transparent;
  line-height: 1.5;
}
.alert .ico { margin-top: 1px; width: 18px; height: 18px; }
.alert a { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.alert-success { background: var(--ok-wash);     color: var(--ok);     border-color: rgba(63, 125, 92, 0.24); }
.alert-danger  { background: var(--danger-wash); color: var(--danger); border-color: rgba(168, 50, 47, 0.24); }
.alert-warning { background: var(--warn-wash);   color: var(--warn);   border-color: rgba(138, 100, 16, 0.24); }
.alert-info    { background: var(--info-wash);   color: var(--info);   border-color: rgba(47, 97, 128, 0.24); }

/* ============================================================================
   Boş durum
   ========================================================================== */
.empty-state {
  text-align: center;
  padding: var(--s-12) var(--s-5);
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.empty-state .ico { margin: 0 auto var(--s-4); width: 28px; height: 28px; color: var(--ink-4); }
.empty-state h3 {
  font-size: var(--text-md);
  color: var(--ink);
  margin-bottom: var(--s-2);
}
.empty-state p { font-size: var(--text-sm); max-width: 46ch; margin: 0 auto; }
.empty-state .btn { margin-top: var(--s-5); }

/* ============================================================================
   Modal
   ========================================================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(21, 18, 26, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-modal);
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.modal-overlay.active { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  padding: var(--s-8);
  width: 100%;
  max-width: 540px;
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: var(--shadow-4);
  animation: modalIn var(--dur-2) var(--ease);
}

.modal-large { max-width: 820px; }

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

.modal-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-6);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

/* ============================================================================
   Bildirim
   ========================================================================== */
.toast-container {
  position: fixed;
  top: var(--s-5);
  right: var(--s-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
}

.toast {
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  font-weight: 500;
  box-shadow: var(--shadow-3);
  animation: toastIn var(--dur-3) var(--ease);
  pointer-events: auto;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}

@keyframes toastIn {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ============================================================================
   Sayfalama
   ========================================================================== */
.pagination {
  display: flex;
  gap: var(--s-1);
  justify-content: center;
  margin-top: var(--s-6);
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 var(--s-2);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.pagination a:hover { border-color: var(--copper); color: var(--copper-ink); text-decoration: none; }
.pagination .active {
  background: var(--copper-solid);
  border-color: var(--copper-solid);
  color: #fff;
}

/* ============================================================================
   Durum sekmeleri (siparişler)
   ========================================================================== */
.status-segment-wrapper {
  overflow-x: auto;
  padding-bottom: var(--s-1);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.status-segment-wrapper::-webkit-scrollbar { display: none; }

.status-segment { display: flex; gap: var(--s-1); width: max-content; }

.segment-pill {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2) var(--r-2) 0 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  margin-bottom: -1px;
}
.segment-pill:hover { color: var(--ink); background: var(--surface-hover); text-decoration: none; }
.segment-pill.active {
  color: var(--copper-ink);
  border-bottom-color: var(--copper);
}
.segment-pill .count {
  margin-left: var(--s-2);
  font-size: var(--text-2xs);
  color: var(--ink-4);
  font-weight: 500;
}

/* ============================================================================
   Sipariş kartları
   ========================================================================== */
.orders-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}

.order-app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.order-app-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-1);
}

.order-id-label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  font-size: var(--text-md);
}

.order-time { font-size: var(--text-xs); color: var(--ink-3); margin-bottom: var(--s-4); }

.customer-avatar-box {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface-sunk);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  margin-bottom: var(--s-4);
}

.avatar-circle {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--copper-wash-2);
  color: var(--copper-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.customer-details { display: flex; flex-direction: column; min-width: 0; }
.customer-name { font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.customer-phone { font-size: var(--text-xs); color: var(--ink-3); }

.order-products-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-bottom: var(--s-4);
}
.summary-product-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.prod-badge {
  background: var(--surface-sunk);
  color: var(--ink-2);
  padding: 1px var(--s-2);
  border-radius: var(--r-1);
  font-weight: 600;
  font-size: var(--text-2xs);
  flex-shrink: 0;
}
.prod-name { font-weight: 500; color: var(--ink); }
.prod-variant { font-size: var(--text-xs); color: var(--ink-3); }

.card-footer-pricing {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  margin-bottom: var(--s-4);
}
.pay-method { font-size: var(--text-xs); color: var(--ink-3); font-weight: 500; }
.total-price {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}

.quick-actions-row { display: flex; gap: var(--s-2); margin-top: auto; }
.quick-actions-row form { flex: 1; }
.inline-tracking-form { display: flex; gap: var(--s-2); width: 100%; }
.tracking-input { flex: 1; min-height: 30px; padding: var(--s-1) var(--s-2); font-size: var(--text-xs); }

.shipped-info-badge {
  background: var(--ok-wash);
  color: var(--ok);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  font-size: var(--text-xs);
  width: 100%;
  text-align: center;
}

/* ============================================================================
   Yan çekmece
   ========================================================================== */
.app-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(21, 18, 26, 0.4);
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease);
}
.app-drawer-overlay.open { opacity: 1; pointer-events: auto; }

.app-drawer {
  position: fixed;
  inset: 0 -440px 0 auto;
  width: 440px;
  max-width: 100%;
  background: var(--surface);
  z-index: calc(var(--z-modal) + 1);
  box-shadow: var(--shadow-4);
  display: flex;
  flex-direction: column;
  transition: right var(--dur-3) var(--ease);
}
.app-drawer-overlay.open .app-drawer { right: 0; }

.drawer-header {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}
.drawer-title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}
.drawer-close {
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: var(--s-1);
  border-radius: var(--r-2);
  display: flex;
}
.drawer-close:hover { color: var(--ink); background: var(--surface-hover); }

.drawer-body { flex: 1; overflow-y: auto; padding: var(--s-6); }
.drawer-divider { border: none; height: 1px; background: var(--line); margin: var(--s-5) 0; }
.drawer-section { display: flex; flex-direction: column; }

.section-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--s-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Zaman çizelgesi */
.progress-timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: var(--s-6);
}
.progress-timeline::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--line-strong);
  z-index: 1;
}
.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  flex: 1;
}
.step-circle {
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-2xs);
  margin-bottom: var(--s-2);
  transition: var(--transition);
}
.step-label { font-size: var(--text-2xs); font-weight: 600; color: var(--ink-4); }
.timeline-step.active .step-circle {
  background: var(--copper-solid);
  border-color: var(--copper-solid);
  color: #fff;
}
.timeline-step.active .step-label { color: var(--ink); }

.info-list { display: flex; flex-direction: column; gap: var(--s-2); }
.info-item { display: flex; font-size: var(--text-sm); gap: var(--s-3); }
.info-item .label { width: 88px; flex-shrink: 0; color: var(--ink-3); }
.info-item .val { color: var(--ink); font-weight: 500; }

.address-box {
  background: var(--surface-sunk);
  padding: var(--s-3);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  line-height: 1.5;
  width: 100%;
  font-size: var(--text-sm);
}

.drawer-product-list { display: flex; flex-direction: column; gap: var(--s-2); }
.drawer-prod-card {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.prod-title { font-weight: 600; color: var(--ink); font-size: var(--text-sm); }
.prod-meta { font-size: var(--text-xs); color: var(--ink-3); margin-top: 1px; }
.prod-price { font-weight: 600; color: var(--ink); font-size: var(--text-sm); }

.pricing-summary-card {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-4);
}
.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-2);
  margin-bottom: var(--s-1);
}
.summary-line:last-child { margin-bottom: 0; }
.pricing-summary-card hr { margin: var(--s-3) 0; }
.summary-line.grand-total {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}

/* ============================================================================
   SSS + Telegram önizlemesi
   ========================================================================== */
.faq-page-container {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--s-8);
  align-items: start;
}

.faq-list-side { display: flex; flex-direction: column; }

.faq-row-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--line);
  transition: var(--transition);
}
.faq-row-card:last-child { border-bottom: none; }
.faq-row-card:hover { border-left-color: var(--line-strong); background: var(--surface-hover); }
.faq-row-card.active-simulation {
  border-left-color: var(--copper);
  background: var(--copper-wash);
}

.faq-card-main { flex: 1; min-width: 0; }
.faq-q-text { font-size: var(--text-base); font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); }
.faq-a-text { font-size: var(--text-sm); color: var(--ink-3); line-height: 1.5; }
.faq-card-actions { display: flex; gap: var(--s-2); flex-shrink: 0; }

.faq-simulator-side { position: sticky; top: var(--s-8); display: flex; justify-content: center; }

.telegram-phone-mockup {
  width: 300px;
  height: 520px;
  background: #f4f6fa;
  border: 6px solid var(--ink);
  border-radius: 28px;
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.tg-phone-header {
  height: 52px;
  background: #527da3;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 var(--s-3);
  gap: var(--s-2);
  z-index: 2;
  flex-shrink: 0;
}
.tg-back-arrow, .tg-more-icon { opacity: 0.85; display: flex; }
.tg-avatar-circle {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: #4a90e2;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.tg-chat-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tg-bot-name { font-size: var(--text-sm); font-weight: 600; }
.tg-bot-status { font-size: var(--text-2xs); opacity: 0.8; }

.tg-chat-body {
  flex: 1;
  padding: var(--s-4) var(--s-3);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  z-index: 2;
  scroll-behavior: smooth;
  background: #eef2f7;
}
.tg-chat-body::-webkit-scrollbar { width: 4px; }
.tg-chat-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; }

.tg-date-divider {
  align-self: center;
  background: rgba(121, 157, 187, 0.4);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  text-transform: uppercase;
}

.tg-message {
  max-width: 82%;
  padding: var(--s-2) var(--s-3);
  border-radius: 12px;
  font-size: var(--text-sm);
  line-height: 1.4;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
}
.bubble-left {
  align-self: flex-start;
  background: #fff;
  color: #212121;
  border-bottom-left-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.bubble-right {
  align-self: flex-end;
  background: #effdde;
  color: #212121;
  border-bottom-right-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.tg-msg-text { margin-bottom: 1px; }
.tg-msg-time { align-self: flex-end; font-size: 0.62rem; color: #a3a3a3; }
.bubble-right .tg-msg-time { color: #5bb35a; }

.tg-chat-footer {
  height: 44px;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 0 var(--s-3);
  gap: var(--s-3);
  z-index: 2;
  flex-shrink: 0;
  color: #88929c;
}
.tg-footer-input {
  flex: 1;
  color: #a3a3a3;
  font-size: var(--text-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.anim-pop { animation: messagePop var(--dur-2) var(--ease) forwards; }
@keyframes messagePop {
  from { transform: scale(0.94); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

.typing-indicator-bubble { padding: var(--s-3) var(--s-4); }
.typing-indicator { display: flex; align-items: center; gap: 4px; height: 10px; }
.typing-indicator span {
  width: 5px; height: 5px;
  background: #88929c;
  border-radius: var(--r-full);
  display: inline-block;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}

/* ============================================================================
   Kiracı profili (admin)
   ========================================================================== */
.tenant-profile-header { align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.tenant-profile-heading { min-width: 0; flex: 1 1 280px; }

.tenant-profile-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: var(--s-2);
}
.tenant-profile-back:hover { color: var(--copper-ink); text-decoration: none; }

.tenant-profile-title-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.tenant-profile-title-row .page-title { margin: 0; }

.tenant-profile-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tenant-inline-form { display: inline; margin: 0; }
.tenant-hidden-form { display: none; }
.tenant-profile-stack { display: flex; flex-direction: column; }
.tenant-card { margin-bottom: var(--s-4); }

.tenant-integration-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}
.tenant-integration-block--last { margin-bottom: 0; }

.tenant-integration-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

.tenant-toggle-plain { border: none; padding: 0; background: transparent; }
.tenant-toggle-plain:hover { background: transparent; border-color: transparent; }
.tenant-toggle-field { display: flex; flex-direction: column; }

.tenant-section-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.tenant-save-bar { margin: var(--s-1) 0 var(--s-5); padding-top: var(--s-4); }
.tenant-save-btn { padding: var(--s-3) var(--s-8); font-size: var(--text-base); min-height: 42px; }

.tenant-status-row { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); }
.tenant-status-pill {
  font-size: var(--text-sm);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--ink-3);
  word-break: break-word;
}
.tenant-status-pill.is-ok {
  color: var(--ok);
  background: var(--ok-wash);
  border-color: rgba(63, 125, 92, 0.24);
}

.tenant-danger-zone {
  border-color: rgba(168, 50, 47, 0.30);
  background: var(--danger-wash);
}
.tenant-danger-zone .form-section-header { color: var(--danger); border-bottom-color: rgba(168, 50, 47, 0.22); }
.tenant-danger-copy { font-size: var(--text-sm); color: var(--ink-2); margin-bottom: var(--s-1); line-height: 1.5; }

/* ============================================================================
   İçe aktarma önizlemesi
   ========================================================================== */
.import-preview { margin-top: var(--s-4); }
.import-summary { display: flex; gap: var(--s-4); margin-bottom: var(--s-3); }
.import-summary .count {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
}

.actions { display: flex; gap: var(--s-2); align-items: center; }

/* ============================================================================
   Mobil üst çubuk ve menü düğmesi
   ========================================================================== */
.mobile-topbar { display: none; }

.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(21, 18, 26, 0.35);
  z-index: calc(var(--z-sidebar) - 1);
}
.sidebar-scrim.show { display: block; }

body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* ============================================================================
   Yardımcı sınıflar
   ========================================================================== */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.flex-center { display: flex; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.gap-4 { gap: var(--s-1); }
.gap-8 { gap: var(--s-2); }
.gap-12 { gap: var(--s-3); }
.gap-16 { gap: var(--s-4); }
.gap-24 { gap: var(--s-6); }

.mt-4 { margin-top: var(--s-1); }
.mt-8 { margin-top: var(--s-2); }
.mt-16 { margin-top: var(--s-4); }
.mt-24 { margin-top: var(--s-6); }
.mt-32 { margin-top: var(--s-8); }
.mb-8 { margin-bottom: var(--s-2); }
.mb-16 { margin-bottom: var(--s-4); }
.mb-24 { margin-bottom: var(--s-6); }
.mb-32 { margin-bottom: var(--s-8); }
.mb-0 { margin-bottom: 0; }

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--ink-3); }
.text-ink { color: var(--ink); }
.text-success { color: var(--ok); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warn); }
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.measure { max-width: var(--measure); }
.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s-2); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Duyarlılık
   ========================================================================== */
@media (max-width: 1100px) {
  .faq-page-container { grid-template-columns: 1fr; }
  .faq-simulator-side { position: static; }
  .main-content { padding: var(--s-6); }
}

@media (max-width: 860px) {
  .mobile-topbar {
    display: flex;
    position: fixed;
    top: var(--imp-h, 0px);
    left: 0;
    right: 0;
    z-index: calc(var(--z-sidebar) + 1);
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .mobile-topbar-title {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hamburger { display: flex; }

  .sidebar {
    width: min(320px, 88vw);
    transform: translateX(-100%);
    box-shadow: var(--shadow-4);
    top: calc(var(--imp-h, 0px) + 56px + env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-scrim {
    top: calc(var(--imp-h, 0px) + 56px + env(safe-area-inset-top, 0px));
  }

  .main-content {
    margin-left: 0;
    padding: calc(56px + env(safe-area-inset-top, 0px) + 16px)
             max(16px, env(safe-area-inset-right, 0px))
             calc(24px + env(safe-area-inset-bottom, 0px))
             max(16px, env(safe-area-inset-left, 0px));
    overflow-x: hidden;
  }

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

  .filter-bar,
  .admin-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar .form-input,
  .filter-bar .form-select,
  .admin-filter-search {
    width: 100% !important;
    max-width: none !important;
  }
  .form-row { grid-template-columns: 1fr; }
  .page-header { margin-bottom: var(--s-6); }
  .page-title { overflow-wrap: anywhere; }

  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .btn-xs { min-height: 36px; padding: 6px 10px; }
  .q-action { min-height: 40px; display: inline-flex; align-items: center; }

  .form-input,
  .form-select,
  .form-textarea,
  textarea.form-input {
    font-size: 16px;
    min-height: 44px;
  }

  .subtabs { gap: 6px; }
  .subtab {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .admin-filter-chips { width: 100%; }
  .admin-filter-chips .btn { flex: 1 1 auto; }

  .orders-app-grid { grid-template-columns: 1fr; }
  .segment-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .inline-tracking-form { flex-wrap: wrap; }
  .tracking-input { min-height: 44px; font-size: 16px; }
  .app-drawer {
    width: 100%;
    right: -100%;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .drawer-close { width: 44px; height: 44px; align-items: center; justify-content: center; }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal,
  .modal-large {
    max-width: 100%;
    max-height: min(92dvh, 92vh);
    border-radius: 16px 16px 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .modal-footer {
    flex-wrap: wrap;
    justify-content: stretch;
  }
  .modal-footer .btn { flex: 1 1 140px; }

  .toast-container {
    top: calc(var(--imp-h, 0px) + 56px + env(safe-area-inset-top, 0px) + 8px);
    left: 12px;
    right: 12px;
  }

  .table-wrapper table thead th:first-child,
  .table-wrapper table tbody td:first-child,
  .table-quiet thead th:first-child,
  .table-quiet tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    box-shadow: 6px 0 10px -8px rgba(21, 18, 26, 0.22);
  }
  .table-wrapper table thead th:first-child,
  .table-quiet thead th:first-child { z-index: 2; }

  code {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .page-subtitle { overflow-wrap: anywhere; }
  .card { max-width: 100%; }
  .flex { flex-wrap: wrap; }
  .main-content div[style*="display:flex"],
  .main-content div[style*="display: flex"] {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

@media (max-width: 720px) {
  .tenant-profile-actions { width: 100%; justify-content: stretch; }
  .tenant-profile-actions .btn,
  .tenant-profile-actions .tenant-inline-form,
  .tenant-profile-actions .tenant-inline-form .btn { width: 100%; }
  .tenant-save-bar { flex-direction: column-reverse; align-items: stretch; }
  .tenant-save-bar .btn { width: 100%; }
}

@media (max-width: 520px) {
  .stats-grid,
  .admin-stats-grid { grid-template-columns: 1fr; }
  .app-drawer { width: 100%; right: -100%; }
  .orders-app-grid { grid-template-columns: 1fr; }
  .truncate { max-width: 100%; }
}

/* ============================================================================
   Baskı
   ========================================================================== */
@media print {
  .sidebar, .hamburger, .mobile-topbar, .btn, .q-actions, .filter-bar, .toast-container { display: none !important; }
  .main-content { margin: 0; padding: 0; }
  .card, .table-wrapper { border-color: #ddd; box-shadow: none; }
  body { background: #fff; }
}

/* ============================================================================
   Taklit oturumu şeridi
   Yönetici bir firmanın panelindeyken hangi kimlikte olduğunu unutmamalı.
   Sayfanın en üstünde sabit durur; kenar çubuğu ve içerik aşağı kayar.
   ========================================================================== */
.imp-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: calc(var(--z-sidebar) + 2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-2) var(--s-5);
  min-height: 40px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-2);
}

.imp-bar-text {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.imp-bar-text strong { color: var(--copper); font-weight: 700; }
.imp-bar .ico { color: var(--copper); }

.imp-bar-form { display: flex; margin: 0; }

.imp-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  min-height: 28px;
  border: 1px solid rgba(243, 238, 230, 0.35);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--paper);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.imp-bar-btn:hover { background: rgba(243, 238, 230, 0.12); border-color: var(--paper); }
.imp-bar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--copper);
}

/* Şerit varken sabit öğeleri aşağı kaydır */
body:has(.imp-bar) { --imp-h: 40px; }
body:has(.imp-bar) .sidebar { top: 40px; }
body:has(.imp-bar) .main-content { padding-top: calc(var(--s-8) + 40px); }

@media (max-width: 860px) {
  body:has(.imp-bar) .sidebar {
    top: calc(40px + 56px + env(safe-area-inset-top, 0px));
  }
  body:has(.imp-bar) .main-content {
    padding-top: calc(40px + 56px + env(safe-area-inset-top, 0px) + 16px);
  }
}