:root {
  --primary: #1f6f64;
  --primary-dark: #185a51;
  --primary-light: #e8f5f3;
  --primary-rgb: 31, 111, 100;
  --badge-bg: #1f6f64;
  --badge-text: #ffffff;
  --text: #1c1c1c;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --zebra: #f9fafb;
  --white: #ffffff;
  --bg: #ffffff;
  --surface: #ffffff;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --header-height: auto;
  --link: #185a51;
  --danger: #c0392b;
  --danger-bg: #fdf2f2;
  --success: #1a7a3a;
  --success-bg: #f0faf3;
  --muted-soft: #888888;
  --muted-softer: #999999;
}

html.theme-dark {
  --text: #e8eaed;
  --text-muted: #b0b5bb;
  --border: #3c4043;
  --zebra: #2a2d31;
  --white: #1e2126;
  --bg: #121418;
  --surface: #1e2126;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --primary-light: rgba(var(--primary-rgb), 0.18);
  --link: #ff8a80;
  --danger: #ff8a80;
  --danger-bg: rgba(255, 100, 100, 0.16);
  --success: #6ee7a0;
  --success-bg: rgba(46, 160, 90, 0.18);
  --muted-soft: #a0a4aa;
  --muted-softer: #8b9098;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overflow: hidden;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.app-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.header {
  background: var(--primary);
  color: #ffffff;
  padding: 0.45rem 1rem;
  flex-shrink: 0;
}

.header-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Boş alanı marka bloğu emiyor. Alt başlık tarihe göre uzayıp kısalıyor
   ("Son güncelleme: ..." vs "28 Temmuz 2026 verisi — ..."); flex verilmezse
   bu blok içeriğe göre büyüyüp Güncelle düğmelerini yatayda kaydırıyordu. */
.header-brand {
  min-width: 0;
  flex: 1 1 auto;
}

/* Düğmeler sabit kalsın: ne sıkışsınlar ne de alt satıra kaysınlar. */
.scan-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Uzun düğme metinlerinin dar ekran karşılığı. Varsayılan uzun olan. */
.etiket-kisa {
  display: none;
}

/* Alış Fiyatları'ndaki fark eşiği girdisi. Eskiden satır içi style ile
   sabit 200px'ti; medya sorgusuyla daraltılabilsin diye buraya taşındı. */
#diff-filter {
  width: 200px;
}

.header h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.scan-btn {
  flex-shrink: 0;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  background: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.scan-btn:hover:not(:disabled) {
  opacity: 0.92;
}

.scan-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.scan-actions .scan-btn {
  white-space: nowrap;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.account-username {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.9;
  white-space: nowrap;
}

.account-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-backdrop.hidden {
  display: none;
}

.modal-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  padding: 1.25rem 1.5rem;
  width: 100%;
  max-width: 380px;
}

.modal-card h3 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}

.modal-card label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0.6rem 0 0.2rem;
}

.modal-card input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
}

.modal-card input:focus {
  outline: none;
  border-color: var(--primary);
}

.modal-status {
  min-height: 1.1rem;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
}

.modal-status.err {
  color: var(--danger);
}

.modal-status.ok {
  color: var(--success);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.btn-primary,
.btn-secondary {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.scan-progress {
  background: var(--primary-light);
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1rem;
  flex-shrink: 0;
}

.scan-progress.hidden {
  display: none;
}

.role-hidden {
  display: none !important;
}

.scan-progress-bar {
  max-width: 1400px;
  margin: 0 auto 0.35rem;
  height: 6px;
  background: rgba(var(--primary-rgb), 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.scan-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.scan-progress-text {
  max-width: 1400px;
  margin: 0 auto;
  font-size: 0.8rem;
  color: var(--link);
  font-weight: 500;
}

.container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

#tab-dashboard.container,
#tab-vodafone.container,
#tab-buyback.container,
#tab-margin.container,
#tab-analysis.container {
  max-width: 100%;
  padding: 0.5rem 0.5rem 0.35rem;
}

.tab-panel {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tab-panel.active {
  display: flex;
}

.tab-panel.hidden {
  display: none !important;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.export-excel-btn {
  color: var(--link) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.dashboard-grade-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.grade-filter-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.grade-filter-btn:hover {
  border-color: var(--primary);
}

.grade-filter-btn.active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* Vodafone stok filtresi Excel düğmesinin yanında duruyor; toolbar daralınca
   etiketi bölünmesin diye küçülmüyor. Aktif görünümü .grade-filter-btn.active
   üzerinden geliyor — panelin diğer filtreleriyle aynı dil. */
.vodafone-stock-filter {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Ayarlar > Kullanıcılar: ekleme formu. Alanlar dar ekranda alt alta iniyor,
   düğme her zaman satırın sonunda kalıyor. */
.settings-users-form {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.settings-users-form .settings-field {
  flex: 1 1 180px;
  min-width: 0;
}

.settings-users-form .scan-btn {
  flex-shrink: 0;
}

#settings-users-body .users-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

#settings-users-body .users-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

#settings-users-body .users-btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.users-you-badge {
  font-size: 0.75rem;
  opacity: 0.7;
}

#search,
#buyback-search,
#margin-search,
#vodafone-search {
  width: 100%;
  max-width: 420px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

#search:focus,
#buyback-search:focus,
#margin-search:focus,
#vodafone-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.row-count-info,
.buyback-meta,
.buyback-note,
.devices-hint {
  flex-shrink: 0;
}

.table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.table-wrap table {
  border-collapse: collapse;
}

.table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Üç satırlı yapışkan başlık: site adı / tarih+Güncelle+süre / grade.

   Uzaklıklar (`top`) BURADA DEĞİL, app.js'teki stickyBasliklariHizala()
   içinde gerçek yüksekliklerden hesaplanıyor. Sabit yazmak iki kez
   tutmadı: tablo hücresinde `height` asgari değer olduğu için içerik
   büyüyünce satır uzuyor ve sabitler yalan oluyor. İkinci satıra süre
   etiketi eklenince 54 px varsayılan satır 94 px'e çıkmış, üçüncü satır
   ikincinin altında kaybolmuştu.

   Burada yalnızca katman sırası duruyor: üstteki satır alttakini örtsün. */
#price-table thead tr:nth-child(1) th {
  z-index: 5;
}

#price-table thead tr:nth-child(2) th {
  z-index: 4;
}

#price-table thead tr:nth-child(3) th {
  z-index: 3;
}

/*
 * Tablo ekrana SIĞMAK ZORUNDA DEĞİL.
 *
 * Kolon genişlikleri yüzdeyken her yeni site eskilerin payından kırpıyordu:
 * 10 site × 2 kalite = 20 fiyat kolonu, geniş ekranda bile kolon başına
 * ~85 piksel kalıyor ve "36.048 TL (stok yok)" üç satıra bölünüyordu.
 *
 * Artık genişlikler piksel: tablo doğal boyutunda çiziliyor, dar ekranda
 * `.table-wrap` yatay kaydırıyor. Ürün Kodu ve Model kolonları zaten solda
 * donuyor, yani kaydırırken hangi satırda olduğun kaybolmuyor.
 */
#price-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.72rem;
  background: var(--surface);
}

#price-table thead {
  background: var(--primary);
  color: #ffffff;
}

#price-table th {
  padding: 0.35rem 0.2rem;
  text-align: center;
  font-weight: 600;
  white-space: normal;
  line-height: 1.2;
  background: var(--primary);
  color: #ffffff;
}

.sortable-header {
  cursor: pointer;
  user-select: none;
}

.sortable-header:hover {
  text-decoration: underline;
}

#price-table th.col-model {
  width: 200px;
  text-align: left;
  padding-left: 0.5rem;
  vertical-align: middle;
}

#price-table th.col-code,
#price-table td.col-code {
  width: 96px;
  text-align: center;
}

#price-table th.col-site-group {
  padding: 0.3rem 0.15rem;
  font-size: 0.68rem;
  vertical-align: middle;
}

#price-table th.col-site-name {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

#price-table th.col-site-meta {
  padding: 0.35rem 0.2rem 0.4rem;
  font-weight: 500;
  vertical-align: middle;
}

#price-table th.col-grade-label {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.28rem 0.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.site-group-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.site-meta-date {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1.25;
  opacity: 0.92;
  white-space: normal;
}

.scan-site-btn {
  padding: 0.18rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 4px;
}

/* İlerleme çubuğunun yanındaki iptal düğmesi. Yalnızca tarama sürerken
   görünüyor; uzun tarama (Yepy 17 dk) yanlışlıkla başlatılırsa sunucuyu
   yeniden başlatmadan durdurulabilsin. */
.scan-progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.scan-progress-row .scan-progress-text {
  flex: 1 1 auto;
  margin: 0;
}

.scan-cancel-btn {
  flex-shrink: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--danger);
  background: var(--surface, var(--white));
  border: 1px solid var(--danger);
  border-radius: 6px;
  cursor: pointer;
}

.scan-cancel-btn:hover:not(:disabled) {
  background: var(--danger-bg);
}

.scan-cancel-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ===== Tarama seçim paneli =====
   Tek "Güncelle" düğmesi açıyor. Her sitenin yanında son taramasının
   süresi yazıyor; acelesi olan uzun sürenlerin tikini kaldırıyor. */
.scan-picker {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.45);
}

.scan-picker.hidden {
  display: none;
}

.scan-picker-card {
  width: min(420px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--surface, var(--white));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.scan-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}

.scan-picker-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.scan-picker-close {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  cursor: pointer;
}

.scan-picker-close:hover {
  background: var(--zebra);
  color: var(--text);
}

.scan-picker-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

/* Satış / alış bölüm başlığı. Liste iki ayrı taramayı barındırıyor;
   başlıksız hâlde "Getmobil" iki kez üst üste görünüp hangisinin ne
   olduğu anlaşılmıyordu. */
.scan-picker-group {
  padding: 0.65rem 1rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.scan-picker-group + .scan-picker-item label {
  padding-top: 0.35rem;
}

.scan-picker-item label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.scan-picker-item label:hover {
  background: var(--zebra);
}

.scan-picker-item input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

.scan-picker-name {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 500;
}

/* Süre sağda, sakin: seçim adın kendisiyle yapılıyor, süre yardımcı bilgi. */
.scan-picker-time {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Uzun sürenler görsel olarak ayrışsın ki gözle seçilebilsinler. */
.scan-picker-item--uzun .scan-picker-time {
  color: var(--danger);
  font-weight: 600;
}

.scan-picker-total {
  margin: 0;
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

.scan-picker-actions {
  display: flex;
  /* Dört düğme dar ekrana sığmıyor; alt satıra taşsınlar. */
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--zebra);
}

/* "Taramayı başlat" her zaman sağda ve satırın sonunda kalsın. */
.scan-picker-primary {
  margin-left: auto;
}

.scan-picker-secondary,
.scan-picker-primary {
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.scan-picker-secondary {
  background: var(--surface, var(--white));
  color: var(--text);
  border: 1px solid var(--border);
}

.scan-picker-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.scan-picker-primary {
  margin-left: auto;
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
}

.scan-picker-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Güncelle düğmesinin altındaki "tarama 3:38" etiketi: düğmeye basmadan
   önce ne kadar bekleneceği görünsün (Getmobil alışı 1 sn, HB Bilişim
   alışı 4 dk). Başlık koyu zeminde olduğu için beyaz üzerine düşük
   opaklık — kendi rengini almıyor ki düğmenin önüne geçmesin. */
.scan-duration {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.55rem;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.75;
  white-space: nowrap;
}

#price-table th.col-price {
  width: 104px;
  font-size: 0.62rem;
  font-weight: 500;
  padding: 0.25rem 0.1rem;
}

#price-table th.col-site-start {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

#price-table td {
  padding: 0.3rem 0.15rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

#price-table td.col-model {
  width: 200px;
  text-align: left;
  padding-left: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

#price-table tbody tr:nth-child(even) td.col-model {
  background: var(--zebra);
}

#price-table tbody tr:hover td.col-model {
  background: var(--primary-light);
}

#price-table td.col-price {
  width: 104px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

#price-table td.col-site-start {
  border-left: 2px solid var(--border);
}

#price-table tbody tr:nth-child(even) {
  background: var(--zebra);
}

#price-table tbody tr:hover {
  background: var(--primary-light);
}

#price-table tbody tr.hidden {
  display: none;
}

#price-table tbody tr,
#buyback-table tbody tr,
#vodafone-table tbody tr,
#margin-table tbody tr {
  height: 52px;
}

.cell-model {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 36px;
}

.col-model .model-name {
  font-weight: 600;
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.2;
}

.model-code {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--link);
}

.col-model .model-storage,
.cell-model__storage {
  display: block;
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 0.05rem;
  min-height: 16px;
}

.price-cell {
  font-size: 0.68rem;
  line-height: 1.2;
}

.price-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.68rem;
}

.price-link:hover {
  text-decoration: underline;
}

.price-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-weight: 600;
  font-size: 0.875rem;
}

.price-badge a {
  color: inherit;
  text-decoration: none;
}

.price-badge a:hover {
  text-decoration: underline;
}

.price-empty {
  color: var(--text-muted);
}


.price-out-of-stock {
  color: var(--muted-soft);
  font-style: italic;
}

.price-out-of-stock .price-link {
  color: var(--muted-soft);
}

.price-stock-hint {
  font-size: 0.75em;
  font-style: normal;
  color: var(--muted-softer);
}

.price-source-hint {
  font-size: 0.75em;
  font-style: normal;
  color: var(--muted-soft);
  font-weight: 600;
}

.vodafone-stock {
  font-size: 0.85rem;
  font-weight: 600;
}

.vodafone-stock.stock-in {
  color: var(--success);
}

.vodafone-stock.stock-out {
  color: var(--danger);
}

/* ============================================================
   Vodafone renk kırılımı
   Renk satırları ana tablonun kendi <tr>'leri; kolon dizilimi
   üst satırla birebir aynı. Ayrı bir tablo YOK.
   ============================================================ */

/* Ödeme rozetleri: stok yazısının altına, taşmasın */
.pay-badges {
  display: flex;
  gap: 0.15rem;
  justify-content: center;
  margin-top: 0.15rem;
  flex-wrap: wrap;
}

.pay-badge {
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.12rem 0.26rem;
  border-radius: 3px;
  border: 1px solid transparent;
  background: rgba(0, 0, 0, 0.07);
  color: var(--text);
  white-space: nowrap;
}

.pay-badge-off {
  background: transparent;
  border-color: var(--border);
  color: var(--muted-softer);
  text-decoration: line-through;
}

/* --- Açma/kapama --- */
tr.has-variants td.col-model {
  cursor: pointer;
}

tr.has-variants td.col-model .model-name::before {
  content: "▸";
  display: inline-block;
  width: 0.85em;
  margin-right: 0.1rem;
  opacity: 0.5;
  font-size: 0.85em;
}

tr.has-variants.variants-open td.col-model .model-name::before {
  content: "▾";
  opacity: 0.8;
}

/* --- Renk satırı --- */
tr.variant-row[hidden] {
  display: none;
}

tr.variant-row > td {
  background: var(--zebra);
  border-top: none;
  font-size: 0.72rem;
}

/* Grup sonunu belli et */
tr.variant-row:last-of-type > td,
tr.variant-row:has(+ tr:not(.variant-row)) > td {
  border-bottom: 2px solid var(--border);
}

/* Renk hücresi: ana satırın model kolonunda, içeri girintili */
td.variant-color-cell {
  padding-left: 1.6rem !important;
  text-align: left !important;
  white-space: nowrap;
}

.variant-color-name {
  font-weight: 600;
  color: var(--text);
}

.variant-cap {
  margin-left: 0.4rem;
  color: var(--text-muted);
  font-size: 0.92em;
}

/* Renk noktası: belirgin, rengi net okunsun */
.variant-dot {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: -0.18em;
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}

html.theme-dark .variant-dot {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Stok dışı renk satırı: soluk ama nokta rengi seçilebilir kalsın */
tr.variant-row.variant-row-off > td {
  opacity: 0.72;
}

#vodafone-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.72rem;
  background: var(--white);
}

#vodafone-table thead {
  background: var(--primary);
  color: var(--white);
}

#vodafone-table th {
  padding: 0.35rem 0.2rem;
  text-align: center;
  font-weight: 600;
  white-space: normal;
  line-height: 1.2;
}

#vodafone-table th.col-model {
  width: 9%;
  text-align: left;
  padding-left: 0.5rem;
  vertical-align: middle;
  font-size: 0.62rem;
}

#vodafone-table th.col-code,
#vodafone-table td.col-code {
  width: 5%;
  text-align: center;
}

#vodafone-table th.col-ouno {
  width: 5%;
  font-size: 0.58rem;
}

#vodafone-table th.col-price,
#vodafone-table th.col-diff,
#vodafone-table th.col-stock {
  width: 6%;
  font-size: 0.54rem;
  font-weight: 500;
  padding: 0.25rem 0.05rem;
}

#vodafone-table th.col-stock {
  font-size: 0.52rem;
}

#vodafone-table th.col-site-start {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

#vodafone-table td {
  padding: 0.3rem 0.08rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

#vodafone-table td.col-model {
  text-align: left;
  padding-left: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

#vodafone-table td.col-ouno,
#vodafone-table td.col-price,
#vodafone-table td.col-diff {
  text-align: center;
  white-space: normal;
  word-break: break-word;
  line-height: 1.15;
}

#vodafone-table td.col-site-start {
  border-left: 2px solid var(--border);
}

#vodafone-table th.col-stock,
#vodafone-table td.col-stock {
  text-align: center;
  white-space: nowrap;
}

#vodafone-table tbody tr:nth-child(even) td.col-model {
  background: var(--zebra);
}

#vodafone-table tbody tr:hover td.col-model {
  background: var(--primary-light);
}

#vodafone-table tbody tr:nth-child(even) {
  background: var(--zebra);
}

#vodafone-table tbody tr:hover {
  background: var(--primary-light);
}

#vodafone-table tbody tr.hidden {
  display: none;
}

#vodafone-table th.col-refresh,
#vodafone-table td.col-refresh {
  width: 2.2%;
  text-align: center;
  padding: 0.15rem 0.05rem;
  white-space: nowrap;
}

.vodafone-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.vodafone-refresh-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.vodafone-refresh-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.vodafone-refresh-btn.is-loading {
  animation: vodafone-refresh-spin 0.8s linear infinite;
}

#vodafone-body tr.row-refreshing {
  background: var(--primary-light);
}

@keyframes vodafone-refresh-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#vodafone-table .price-cell {
  font-size: 0.58rem;
  line-height: 1.1;
}

#vodafone-table .price-link {
  font-size: 0.58rem;
}

#vodafone-table .price-stock-hint,
#vodafone-table .price-source-hint {
  font-size: 0.5rem;
  display: block;
  margin-top: 0.1rem;
}

#vodafone-table .vodafone-diff-high,
#vodafone-table .vodafone-diff-low,
#vodafone-table .vodafone-diff-neutral {
  font-size: 0.54rem;
}

#tab-vodafone .table-wrap {
  overflow: auto;
}

.vodafone-diff-high {
  color: var(--danger);
  font-weight: 600;
  font-size: 0.68rem;
}

.vodafone-diff-low {
  color: var(--success);
  font-weight: 600;
  font-size: 0.68rem;
}

.vodafone-diff-neutral {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.price-change-up {
  color: var(--danger);
  font-size: 12px;
  cursor: help;
  margin-left: 4px;
}

.price-change-down {
  color: var(--success);
  font-size: 12px;
  cursor: help;
  margin-left: 4px;
}

.price-row-min {
  color: var(--success);
  background: var(--success-bg);
  border-radius: 6px;
}

.price-row-min .price-link,
.price-row-min .price-badge a {
  color: var(--success);
}

.price-row-max {
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: 6px;
}

.price-row-max .price-link,
.price-row-max .price-badge a {
  color: var(--danger);
}

.error-banner {
  padding: 1rem;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.tabs {
  display: flex;
  gap: 0;
  max-width: 100%;
  margin: 0;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  overflow-x: auto;
}

.tab {
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tab:hover {
  color: var(--link);
}

.tab.active {
  color: var(--link);
  border-bottom-color: var(--primary);
}

html[data-nav="left"] .app-body {
  flex-direction: row;
}

html[data-nav="left"] .tabs {
  flex-direction: column;
  width: 200px;
  min-width: 200px;
  max-width: 200px;
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: none;
  border-right: 1px solid var(--border);
  overflow-x: hidden;
  overflow-y: auto;
}

html[data-nav="left"] .tab {
  width: 100%;
  text-align: left;
  border-bottom: none;
  border-left: 3px solid transparent;
  padding: 0.65rem 1rem;
}

html[data-nav="left"] .tab.active {
  border-left-color: var(--primary);
  background: var(--primary-light);
}

html[data-nav="left"] .tab:hover {
  background: var(--zebra);
}

.tab-panel.hidden {
  display: none !important;
}

.devices-panel {
  padding-top: 0.5rem;
}

.devices-upload h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.devices-hint {
  margin: 0 0 1.25rem;
  color: var(--text-muted);
  max-width: 640px;
}

.devices-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.file-label {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--zebra);
  font-size: 0.9rem;
}

.file-label input[type="file"] {
  display: none;
}

.devices-upload-btn {
  color: var(--white) !important;
  background: var(--primary) !important;
}

.devices-status {
  min-height: 1.25rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.devices-status.ok {
  color: var(--link);
}

.devices-status.err {
  color: var(--danger);
}

.devices-meta {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--primary-light);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.devices-meta:empty {
  display: none;
}

.devices-list-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  max-height: 60vh;
}

.devices-table {
  width: 100%;
  border-collapse: collapse;
}

.devices-table th,
.devices-table td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.devices-table th {
  background: var(--zebra);
  font-weight: 600;
  position: sticky;
  top: 0;
}

.devices-table .col-num {
  width: 3rem;
  color: var(--text-muted);
}

.devices-table tbody tr:nth-child(even) {
  background: var(--zebra);
}

/* Bölümler arası boşluk iç elemanların margin'inden geliyordu, o yüzden
   0 ile 16px arasında değişiyordu ve kısa bölümler bir sonrakine yapışıyordu.
   Boşluğu panelin kendisine veriyoruz. */
.settings-panel + .settings-panel {
  margin-top: 2rem;
}

.settings-panel h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.settings-table-wrap {
  margin-bottom: 1rem;
  flex: none;
  overflow: visible;
  max-height: none;
}

.settings-table {
  width: 100%;
  border-collapse: collapse;
}

.settings-table th,
.settings-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.settings-table th {
  background: var(--zebra);
  font-weight: 600;
}

.settings-table .col-active {
  width: 5rem;
  text-align: center;
}

.settings-url {
  width: 100%;
  min-width: 280px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.settings-url:focus {
  outline: 2px solid var(--primary-light);
  border-color: var(--primary);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 420px;
  margin-bottom: 0.5rem;
}

.settings-field span {
  font-weight: 600;
  font-size: 0.9rem;
}

.settings-select {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
}

.settings-multipliers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 0.25rem;
}

.settings-multipliers .settings-field {
  margin-bottom: 0;
  max-width: 200px;
}

.formulas-list {
  display: grid;
  gap: 1rem;
}

.formula-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem;
  background: var(--surface);
}

.formula-title {
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.formula-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.55rem;
}

.formula-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

.formula-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--text);
}

.formula-vars {
  margin: 0.55rem 0;
  font-size: 0.87rem;
}

.formula-vars code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.84rem;
}

.formula-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

#formulas-access-box {
  margin-bottom: 0.8rem;
}

.formula-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 3000;
}

.formula-modal-card {
  width: min(700px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.formula-sim-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.7rem;
  margin: 0.65rem 0;
}

.formula-sim-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}

.formula-modal.hidden {
  display: none;
}

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
  max-width: 780px;
  margin-bottom: 0.5rem;
}

.appearance-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: none;
}

.color-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-input-row input[type="color"] {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.color-input-row input[type="text"] {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

#tab-settings.tab-panel.active {
  overflow: auto;
  display: block;
}

#tab-analysis .analysis-chart-wrap {
  flex-shrink: 0;
  height: min(320px, 40vh);
}

/*
 * Cihaz Analizi sekmesi SAYFA OLARAK kayıyor, ekrana sığmaya çalışmıyor.
 *
 * `.tab-panel` varsayılanı `overflow: hidden` + tablo sarmalayıcısında
 * `flex: 1`; tek tablolu sekmelerde doğru olan bu. Altına Fırsat Analizi
 * bloğu eklenince (645 px) tablo sarmalayıcısı 2 piksele çöktü ve geçmiş
 * listesi tamamen kayboldu — tablo DOM'da 7 satırla duruyordu ama görünmüyordu.
 *
 * Sekme kendi içinde dikey kayıyor, tablo kendi doğal boyutunda çiziliyor;
 * uzun geçmişte 420 pikselden sonra tablo kendi içinde kayıyor.
 * Kural yalnızca #tab-analysis'e bağlı: öteki sekmelerin düzeni değişmiyor.
 */
#tab-analysis.tab-panel.active {
  overflow-y: auto;
}

#tab-analysis .table-wrap {
  flex: 0 0 auto;
  max-height: 420px;
}

#buyback-table thead th,
#vodafone-table thead th,
#margin-table thead th,
#analysis-table thead th,
#buyback-analysis-table thead th,
.settings-table thead th {
  background: var(--primary);
  color: #ffffff;
}

.settings-table thead th {
  background: var(--zebra);
  color: var(--text);
}

.settings-save-btn {
  color: #ffffff !important;
  background: var(--primary) !important;
}

.users-panel {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.users-form-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.users-add-form {
  margin-bottom: 0.5rem;
}

.users-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}

.users-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 180px;
}

.users-field span {
  font-size: 0.875rem;
  font-weight: 600;
}

.users-field input {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.users-field input:focus {
  outline: 2px solid var(--primary-light);
  border-color: var(--primary);
}

.users-table .col-actions {
  width: 11rem;
  white-space: nowrap;
}

.users-actions {
  display: flex;
  gap: 0.35rem;
}

.users-btn {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
}

.users-btn:hover:not(:disabled) {
  background: var(--zebra);
}

.users-btn.primary {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.users-btn.danger {
  color: #b42318;
  border-color: #fecdca;
}

.users-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.users-edit-input {
  width: 100%;
  min-width: 120px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}

.users-you-badge {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--link);
}

.toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.toggle input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary);
  cursor: pointer;
}

.buyback-note {
  margin-bottom: 0.75rem;
}

.buyback-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

#buyback-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.68rem;
  background: var(--white);
}

#buyback-table thead {
  background: var(--primary);
  color: var(--white);
}

#buyback-table th,
#buyback-table td {
  padding: 0.28rem 0.15rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  word-break: break-word;
}

#buyback-table th.col-model,
#buyback-table td.col-model {
  width: 24%;
  text-align: left;
  padding-left: 0.4rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

#buyback-table th.col-code,
#buyback-table td.col-code {
  width: 8%;
  text-align: center;
}

#buyback-table th.col-ouno,
#buyback-table td.col-ouno {
  width: 12%;
}

#buyback-table th.col-price,
#buyback-table td.col-price {
  width: 12%;
  font-size: 0.6rem;
  font-weight: 500;
}

#buyback-table th.col-diff,
#buyback-table td.col-diff {
  width: 9%;
  font-size: 0.58rem;
  font-weight: 600;
  padding: 0.25rem 0.1rem;
}

#buyback-table th.col-site-start,
#buyback-table td.col-site-start {
  border-left: 2px solid rgba(255, 255, 255, 0.3);
}

#buyback-table td.col-site-start {
  border-left-color: var(--border);
}

.buyback-diff-positive {
  color: var(--success);
  font-weight: 700;
}

.buyback-diff-negative {
  color: var(--danger);
  font-weight: 700;
}

.buyback-diff-neutral {
  color: var(--text-muted);
  font-weight: 600;
}

#buyback-table tbody tr:nth-child(even) {
  background: var(--zebra);
}

#buyback-table tbody tr:hover {
  background: var(--primary-light);
}

#buyback-table tbody tr.hidden {
  display: none;
}

.row-highlight {
  outline: 2px solid #f59e0b;
  background: #fffbeb !important;
}

.row-count-info {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.margin-toolbar {
  align-items: flex-end;
}

.margin-site-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.margin-site-select {
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  min-width: 140px;
}

#margin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  background: var(--white);
}

#margin-table thead {
  background: var(--primary);
  color: var(--white);
}

#margin-table th,
#margin-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

#margin-table th.col-model,
#margin-table td.col-model {
  text-align: left;
  width: 22%;
  padding-left: 0.5rem;
  vertical-align: middle;
}

#margin-table th.col-code,
#margin-table td.col-code {
  width: 10%;
  text-align: center;
}

#margin-table tbody tr:nth-child(even) {
  background: var(--zebra);
}

#margin-table tbody tr:hover {
  background: var(--primary-light);
}

#margin-table tbody tr.hidden {
  display: none;
}

#margin-table td.margin-high {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 600;
}

#margin-table td.margin-mid {
  background: rgba(250, 204, 21, 0.18);
  color: #eab308;
  font-weight: 600;
}

#margin-table td.margin-low {
  background: var(--success-bg);
  color: var(--success);
  font-weight: 600;
}

.analysis-toolbar {
  align-items: flex-end;
}

.analysis-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.analysis-select {
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  min-width: 200px;
}

.analysis-chart-wrap {
  position: relative;
  height: min(320px, 40vh);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

/* Satış ve Alış Karşılaştırması listeleri birebir aynı görünüyor.
   Seçiciler kimlik bazlı: satış tablosunun özgüllüğü değişmesin diye
   sınıfa çevirmek yerine alış tablosu listeye eklendi. */
#analysis-table,
#buyback-analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  background: var(--white);
}

#analysis-table thead,
#buyback-analysis-table thead {
  background: var(--primary);
  color: var(--white);
}

#analysis-table th,
#analysis-table td,
#buyback-analysis-table th,
#buyback-analysis-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
}

#analysis-table th:first-child,
#analysis-table td:first-child,
#buyback-analysis-table th:first-child,
#buyback-analysis-table td:first-child {
  text-align: left;
}

#analysis-table tbody tr:nth-child(even),
#buyback-analysis-table tbody tr:nth-child(even) {
  background: var(--zebra);
}

#analysis-table tbody tr:hover,
#buyback-analysis-table tbody tr:hover {
  background: var(--primary-light);
}

/* Güncelle düğmeleri (~276px) ve hesap bloğu (~231px) sabit genişlikte.
   Tek satıra sığmayınca sıkışan taraf marka bloğu oluyordu: 600px'de başlık
   38px'e iniyor, 550px'in altında tamamen kayboluyordu. Bu genişlikten sonra
   marka kendi satırını alıyor, düğmeler alta geçiyor. */
@media (max-width: 720px) {
  .header-inner {
    flex-wrap: wrap;
  }

  .header-brand {
    flex: 1 0 100%;
  }
}

/* ============================================================
   DAR EKRAN TABLOLARI — 900px altı

   table-layout:fixed + width:100% dar ekranda kolonları eziyor:
   tablo sarmalayıcıya sığmaya çalışıp hücreleri daraltıyor, metin
   alt alta sarıyor, satır yükseliyor. 768px'de bile satırlar 75-97px
   oluyordu. auto yerleşim + min-width ile tablo sarmalayıcıdan taşıyor
   ve sarmalayıcının overflow-x:auto'su nihayet iş görüyor.

   Bu blok 900px'te, gezinme/dokunma kuralları 720px'te başlıyor:
   tablet boyutunda sol sekme çubuğu kalsın ama tablo okunur olsun.

   Yükseklik ölçütü de var: yan çevrilmiş telefonlarda vitrin 932px'e
   kadar çıkabiliyor (Pro Max yatay 932×430) ve 900px eşiğini aşıyor;
   o durumda da tablo sıkışmasın.
   ============================================================ */
/* --- Ürün Kodu ve Model solda DONSUN — HER EKRAN GENİŞLİĞİNDE ---
   Site kolonları yana kaydırılarak geziliyor (Getmobil, sonra Trendyol,
   MediaMarkt...). Hangi satıra baktığınızı kaybetmemek için ilk iki kolon
   yerinde kalıyor.

   Bu kurallar eskiden yalnızca dar ekran medya sorgusunun içindeydi. Masaüstünde
   tablo ekrana sığdığı sürece sorun görünmüyordu; kolon sayısı arttıkça tablo
   masaüstünde de yatay kaymaya başladı ve sağa kaydırınca model adı ekrandan
   çıkıyordu. */
#price-table th.col-code,
#price-table td.col-code,
#price-table th.col-model,
#price-table td.col-model,
#buyback-table th.col-code,
#buyback-table td.col-code,
#buyback-table th.col-model,
#buyback-table td.col-model,
#margin-table th.col-code,
#margin-table td.col-code,
#margin-table th.col-model,
#margin-table td.col-model,
#vodafone-table th.col-code,
#vodafone-table td.col-code,
#vodafone-table th.col-model,
#vodafone-table td.col-model {
  position: sticky;
  z-index: 2;
}

#price-table th.col-code,
#price-table td.col-code,
#buyback-table th.col-code,
#buyback-table td.col-code,
#margin-table th.col-code,
#margin-table td.col-code,
#vodafone-table th.col-code,
#vodafone-table td.col-code {
  left: 0;
}

#price-table th.col-model,
#price-table td.col-model,
#buyback-table th.col-model,
#buyback-table td.col-model,
#margin-table th.col-model,
#margin-table td.col-model,
#vodafone-table th.col-model,
#vodafone-table td.col-model {
  /* `left` çalışma anında ölçülüp yazılıyor (app.js -> donmusKolonlariHizala).
     Sabit piksel yazılamaz: dört tablonun kolon genişlikleri farklı ve
     bazıları yüzdeyle tanımlı, yani ekran genişliğine göre değişiyor.
     Yanlış bir uzaklık kolonları üst üste bindiriyor. */
  left: 0;
  border-right: 2px solid var(--border);
}

/* Donmuş kolonların BAŞLIK hücreleri, kayan site başlıklarının üstünde
   kalmalı — ikisi de yapışkan ve aynı yerde kesişiyorlar.

   Ürün Kodu ve Model başlıkları `rowspan=3` ile ilk satırda duruyor, o
   yüzden site adlarıyla AYNI z-index'i (5) alıyorlardı; eşitlikte DOM
   sırası karar veriyor ve site başlıkları sonra geldiği için yana
   kaydırınca "Getmobil / Yenilio" yazıları Ürün Kodu ile Model'in
   üzerine biniyordu. Alış, marj ve Vodafone tablolarında durum daha
   kötüydü: orada donmuş başlık 2, site başlığı 3 alıyordu.

   Değer üç başlık satırının da (5 / 4 / 3) üstünde. Seçiciler
   `.table-wrap` ile başlıyor ki `#price-table thead tr:nth-child(1) th`
   kuralını özgüllükte açık farkla geçsin; sıraya güvenmek kırılgan olurdu. */
.table-wrap #price-table thead th.col-code,
.table-wrap #price-table thead th.col-model,
.table-wrap #buyback-table thead th.col-code,
.table-wrap #buyback-table thead th.col-model,
.table-wrap #margin-table thead th.col-code,
.table-wrap #margin-table thead th.col-model,
.table-wrap #vodafone-table thead th.col-code,
.table-wrap #vodafone-table thead th.col-model {
  z-index: 8;
}

/* Donmuş hücreler saydam kalırsa altlarından kayan fiyatlar görünür.
   Satır arkaplanı `tr` üzerinde olduğu için her durumu tek tek
   hücreye taşımak gerekiyor. */
#price-table tbody td.col-code,
#price-table tbody td.col-model,
#buyback-table tbody td.col-code,
#buyback-table tbody td.col-model,
#margin-table tbody td.col-code,
#margin-table tbody td.col-model,
#vodafone-table tbody td.col-code,
#vodafone-table tbody td.col-model {
  background: var(--surface);
}

#price-table tbody tr:nth-child(even) td.col-code,
#price-table tbody tr:nth-child(even) td.col-model,
#buyback-table tbody tr:nth-child(even) td.col-code,
#buyback-table tbody tr:nth-child(even) td.col-model,
#margin-table tbody tr:nth-child(even) td.col-code,
#margin-table tbody tr:nth-child(even) td.col-model,
#vodafone-table tbody tr:nth-child(even) td.col-code,
#vodafone-table tbody tr:nth-child(even) td.col-model {
  background: var(--zebra);
}

#price-table tbody tr:hover td.col-code,
#price-table tbody tr:hover td.col-model,
#buyback-table tbody tr:hover td.col-code,
#buyback-table tbody tr:hover td.col-model,
#margin-table tbody tr:hover td.col-code,
#margin-table tbody tr:hover td.col-model,
#vodafone-table tbody tr:hover td.col-code,
#vodafone-table tbody tr:hover td.col-model {
  background: var(--primary-light);
}

/* Başlık hücreleri hem yukarıda hem solda yapışık; kayan başlıkların
   üstünde kalsınlar. */
#price-table thead th.col-code,
#price-table thead th.col-model,
#buyback-table thead th.col-code,
#buyback-table thead th.col-model,
#margin-table thead th.col-code,
#margin-table thead th.col-model,
#vodafone-table thead th.col-code,
#vodafone-table thead th.col-model {
  z-index: 6;
}

@media (max-width: 900px), (max-height: 500px) {
  #price-table,
  #buyback-table,
  #margin-table,
  #vodafone-table {
    table-layout: auto;
    width: auto;
  }

  #price-table { min-width: 1240px; }    /* kod + model + 5 site × 2 grade */
  #buyback-table { min-width: 620px; }
  #margin-table { min-width: 580px; }
  #vodafone-table { min-width: 1180px; } /* 18 kolon */

  /* Masaüstündeki `#price-table td.col-price` kuralı yüzde genişlik ve
     white-space:normal dayatıyor; dar ekranda fiyat hücresini "33.768 /
     TL / (stokta / yok" diye 6 satıra bölüyordu (satır 166px). Aynı
     seçici gücüyle, sonradan geldiği için burada ezilir. */
  #price-table td.col-price {
    width: auto;
    white-space: nowrap;
    word-break: normal;
  }

  #price-table th,
  #price-table td,
  #buyback-table th,
  #buyback-table td,
  #margin-table th,
  #margin-table td,
  #vodafone-table th,
  #vodafone-table td,
  #analysis-table th,
  #analysis-table td,
  #buyback-analysis-table th,
  #buyback-analysis-table td {
    padding: 0.5rem 0.55rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  /* Kaydırılabilir olduğu belli olsun: dokunmayla akıcı kaysın. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }


  /* Dar ekranda donmuş kolonlar daraltılıyor: 84 + 132 piksel, fiyat
     kolonlarına yer kalsın diye. `left` yine JS ile hizalanıyor. */
  #price-table th.col-code,
  #price-table td.col-code,
  #buyback-table th.col-code,
  #buyback-table td.col-code,
  #margin-table th.col-code,
  #margin-table td.col-code,
  #vodafone-table th.col-code,
  #vodafone-table td.col-code {
    width: 84px;
    min-width: 84px;
    max-width: 84px;
  }

  #price-table th.col-model,
  #price-table td.col-model,
  #buyback-table th.col-model,
  #buyback-table td.col-model,
  #margin-table th.col-model,
  #margin-table td.col-model,
  #vodafone-table th.col-model,
  #vodafone-table td.col-model {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
  }


  /* Parmakla kaydırınca site grubunun ortasında durup fiyatı yarım
     görmeyelim: her yeni site kolonu donmuş kolonların hemen sağına
     otursun (scroll-margin-left = 84 + 132). */
  .table-wrap {
    scroll-snap-type: x proximity;
  }

  #price-table .col-site-start,
  #buyback-table .col-site-start,
  #margin-table .col-site-start,
  #vodafone-table .col-site-start {
    scroll-snap-align: start;
    scroll-margin-left: 216px;
  }

  /* Üç başlık satırının yapışma uzaklıkları masaüstü yüksekliklerine göre
     yazılmış (1.7rem / 4.1rem). Dar ekranda satırlar daha uzun — özellikle
     ortadaki, içinde 44px'lik Güncelle düğmesi var — ve grade satırı meta
     satırının üstüne biniyordu. Meta satırının yüksekliğini sabitleyip
     uzaklıkları ona göre veriyoruz; böylece görüntüleyicide (düğme yok)
     da aynı yerde duruyor. */
  #price-table thead tr:nth-child(1) th { top: 0; }
  #price-table thead tr:nth-child(2) th { top: 23px; height: 81px; }
  #price-table thead tr:nth-child(3) th { top: 104px; }
}

/* ============================================================
   MOBİL — 720px altı

   Panel masaüstü için tasarlandı; burada amaç "telefondan bakınca
   okunabilsin". Ölçüm (375px, 5 Ağustos 2026) dört sorunu gösterdi:

     sol sekme çubuğu   148px / 375px = ekranın %40'ı
     tablolar           table-layout:fixed ile 209px'e SIKIŞIYOR,
                        kaydırmıyor; fiyat hücresi 15px, rakamlar
                        alt alta düşüyor, satır 468px
     eski 640px kuralı  hücre dolgusunu ve yazıyı BÜYÜTÜYORDU
     üst alan           header 99px + toolbar 206px = ekranın %37'si
   ============================================================ */
@media (max-width: 720px) {
  /* --- Sekme çubuğu üste --- */
  html[data-nav="left"] .app-body {
    flex-direction: column;
  }

  html[data-nav="left"] .tabs,
  .tabs {
    flex-direction: row;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  html[data-nav="left"] .tab,
  .tab {
    width: auto;
    flex: 0 0 auto;
    text-align: center;
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 0.7rem 0.9rem;
    min-height: 44px;
  }

  html[data-nav="left"] .tab.active {
    border-left-color: transparent;
    border-bottom-color: var(--primary);
  }

  /* --- Üst alanı sıkıştır --- */
  .header-inner {
    gap: 0.5rem;
  }

  .header h1 {
    font-size: 0.95rem;
  }

  .scan-actions,
  .account-actions {
    gap: 0.35rem;
  }

  .scan-btn {
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
    min-height: 44px;
  }

  /* --- Dokunma hedefleri: parmak için 44px --- */
  .grade-filter-btn,
  .date-nav-btn,
  .date-nav-label,
  .date-nav-today,
  .users-btn {
    min-height: 44px;
  }

  .toolbar {
    gap: 0.5rem;
  }

  .toolbar input[type="search"] {
    min-height: 44px;
  }
}

/* ============================================================
   DAR **VEYA** ALÇAK EKRAN — üst alan sıkıştırması

   Genişlik ölçütü tek başına yetmiyor: telefon yan çevrilince vitrin
   812×375 oluyor, 720px eşiği hiç devreye girmiyor ama asıl darlık
   dikeyde. Ölçüm (812×375, sıkıştırma öncesi): tablo penceresi 147px,
   yapışkan tablo başlığı tek başına 125px — ekranda SIFIR veri satırı.

   Bu yüzden sıkıştırma kuralları "dar VEYA alçak" ile tetikleniyor.
   Sekme çubuğunu yatay şeride çeviren kural yukarıda, yalnızca genişlik
   ölçütünde kaldı: yatayda yükseklik kıt, sol şerit 45px dikey yemiyor.
   ============================================================ */
@media (max-width: 720px), (max-height: 500px) {
  /* --- Üst alanı tek satırlara indir, tabloya yer aç ---
     Kabuk 100dvh'ye sabit ve yalnızca .table-wrap kayıyor; üst alan ne
     kadar yerse tablo o kadar küçülüyor. 375×812'de ölçüm: header 137
     + sekme 45 + araç çubuğu 220 + sayaç 21 = 423px, ekranın %52'si.
     Başlık üç satıra (marka / tarama düğmeleri / hesap), araç çubuğu
     dört satıra (arama / filtreler+Excel / tarih / sayaç) yayılıyordu. */

  /* Uzun düğme metinleri yerine kısa karşılıkları. */
  .etiket-uzun {
    display: none;
  }

  .etiket-kisa {
    display: inline;
  }

  /* Başlık: marka + tarama + hesap tek satırda, taşarsa yatay kaysın —
     alta sarıp üç satır olmasındansa kaydırmak daha az yer yiyor. */
  .header-inner {
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .header-inner::-webkit-scrollbar {
    display: none;
  }

  /* Marka bloğu daralabilir ama TAŞMASIN: overflow:hidden olmadan h1
     kutusundan çıkıp Güncelle düğmesinin altında kalıyor ve başlık
     okunmaz oluyordu. Ellipsis her ihtimale karşı emniyet kemeri. */
  .header-brand {
    flex: 0 1 auto;
    overflow: hidden;
  }

  .scan-actions,
  .account-actions {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }

  /* Kullanıcı adı 42px yiyor ve başlığa yer kalmıyordu. Ayarlar sayfasında
     zaten yazıyor; dar ekranda başlık daha değerli. */
  .account-username {
    display: none;
  }

  .header {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .header h1 {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Kullanıcı "küçültebilirsin" dedi: başlıktaki düğmeler 44px dokunma
     hedefinden muaf. Tablo alanı burada okunabilirlikten daha değerli;
     araç çubuğundaki filtreler ve tarih düğmeleri 44px'de kalıyor. */
  .header .scan-btn {
    min-height: 32px;
    padding: 0.3rem 0.42rem;
    font-size: 0.7rem;
  }

  /* Araç çubuğu: arama tek satır, filtreler + Excel + tarih ikinci
     satır, açıklama metinleri üçüncü (ince) satır. */
  .toolbar {
    gap: 0.3rem;
    margin-bottom: 0.3rem;
  }

  /* İki kontrol satırı, DOM sırası (arama, filtreler, Excel, tarih) yerine
     genişliğe göre eşleştirilmiş: arama+tarih üstte, filtreler+Excel altta.
     Dördü tek satıra 474px istiyor, yer 359px.

     Tarih arama ile eşleşiyor çünkü genişliği değişken: bugündeyken 115px,
     geçmiş bir gün seçilince etiket uzayıp "Bugüne dön" de çıkarak 260px
     oluyor. Arama kutusu esneyerek farkı yutuyor (flex-basis 90px), böylece
     iki durumda da iki satır kalıyor. Filtreler + Excel sabit 267px.

     Sıralama yalnızca dashboard'a uygulanıyor: diğer sekmelerin araç
     çubuklarında fazladan kontroller var (Alış Fiyatları'nda ikinci bir
     girdi ve etiket) ve `order` verilmeyen öğeler 0 sayılıp en öne
     fırlıyor. Onlar DOM sırasında kalsın. */
  .toolbar input[type="search"] {
    flex: 1 1 90px;
    min-width: 0;
  }

  #tab-dashboard .toolbar input[type="search"] {
    order: 1;
  }

  #tab-dashboard .toolbar .date-nav-row {
    order: 2;
  }

  #tab-dashboard .dashboard-grade-filters {
    order: 3;
  }

  #tab-dashboard .toolbar .export-excel-btn {
    order: 4;
  }

  #tab-dashboard .toolbar .date-nav-meta {
    order: 5;
  }

  /* Alış Fiyatları'nda altı kontrol var: arama, fark eşiği, site filtreleri,
     "sadece eşiği geçenler" kutusu, Excel, tarih. Aynı mantıkla eşleştirildi —
     arama+tarih, filtreler+Excel, eşik+kutu. */
  #tab-buyback .toolbar input[type="search"] {
    order: 1;
  }

  #tab-buyback .toolbar .date-nav-row {
    order: 2;
  }

  #tab-buyback .dashboard-grade-filters {
    order: 3;
  }

  #tab-buyback .toolbar .export-excel-btn {
    order: 4;
  }

  #tab-buyback #diff-filter {
    order: 5;
    width: auto;
    flex: 0 1 110px;
    min-width: 0;
  }

  #tab-buyback .toolbar label {
    order: 6;
    flex: 1 1 140px;
    font-size: 0.7rem;
    line-height: 1.2;
  }

  #tab-buyback .toolbar .date-nav-meta {
    order: 7;
  }

  /* "Bugüne dön" masaüstünde visibility:hidden ile yerini koruyor, böylece
     görünürlüğü değişince düzen zıplamıyor. Dar ekranda o rezervasyon
     bedavaya 88px yiyor; bugündeyken tamamen kaldırıyoruz. */
  .date-nav-today {
    display: none;
  }

  .date-nav-past .date-nav-today {
    display: inline-flex;
    visibility: visible;
  }

  /* .date-nav sarmalayıcısı kendi satırını açıyordu. display:contents ile
     kutu ortadan kalkıyor, çocukları (tarih grubu ve "son güncelleme"
     metni) doğrudan araç çubuğunun öğeleri oluyor — böylece tarih grubu
     filtrelerin yanına, metin de alt satıra geçiyor.
     Seçici .toolbar ile güçlendirildi: temel `.date-nav { display: flex }`
     kuralı dosyada bu medya sorgusundan SONRA geliyor ve eşit güçte
     olduğu için sıralamada kazanıyordu. */
  .toolbar .date-nav {
    display: contents;
  }

  .toolbar .date-nav-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  /* Yalnızca araç çubuğunun içindeki metin tam satır olsun.
     .row-count-info araç çubuğunun dışında, sekme panelinin (sütun yönlü
     flex) doğrudan çocuğu: ona `flex: 1 1 100%` verilirse dikeyde büyüyüp
     tabloyu eziyor. */
  .toolbar .date-nav-meta {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.66rem;
    text-align: left;
  }

  .row-count-info {
    margin: 0 0 0.2rem;
    font-size: 0.66rem;
  }

  .grade-filter-btn,
  .toolbar .scan-btn,
  .date-nav-btn,
  .date-nav-today {
    padding: 0.35rem 0.5rem;
    font-size: 0.7rem;
  }

  /* Tarih hapı masaüstünde 11.5rem, 900px altında 8.5rem sabit genişlikte.
     Dar ekranda bu tek başına 136px yiyor ve filtrelerle aynı satıra
     sığmıyor; içeriğe göre daralsın. Seçici .toolbar ile güçlendirildi,
     yoksa dosyada daha sonra gelen 900px kuralı bunu eziyor. */
  .toolbar .date-nav-label {
    min-width: 0;
    padding: 0.35rem 0.45rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }

  /* --- Cihaz Analizi ---
     Dört seçim alanı (Model / Periyot / Firma / Kondisyon) 375px'de dört
     ayrı satıra düşüyordu: select'in min-width'i 200px, alanların da
     flex-shrink: 0. Araç çubuğu 274px, tabloya 68px kalıyordu.
     flex-basis 150px ile dar ekranda ikişerli, yatayda dörtlü diziliyor. */
  .analysis-field {
    flex: 1 1 150px;
    min-width: 0;
  }

  .analysis-select {
    min-width: 0;
    width: 100%;
    padding: 0.45rem 0.55rem;
    font-size: 0.8rem;
  }

  /* Grafik 320px'e kadar çıkıyordu; 812px yükseklikte bu ekranın %40'ı,
     yatayda ise zaten olmayan yerin çoğu. vh sınırı iki durumu da
     kendiliğinden çözüyor: dikeyde 220px, 375px yüksekte 112px. */
  #tab-analysis .analysis-chart-wrap {
    height: min(220px, 30vh);
    margin-bottom: 0.4rem;
  }

  #analysis-status {
    margin: 0.2rem 0;
    font-size: 0.7rem;
  }
}

/* ============================================================
   ALÇAK EKRAN (yan çevrilmiş telefon) — yapışkan başlığı kırp

   375px yükseklikte tablo penceresine ~250px kalıyor. Tablo başlığının
   ortadaki satırı (tarama tarihi + site başına Güncelle düğmesi) tek
   başına 81px, yani pencerenin üçte biri. Yatayda onu kaldırıyoruz:
   genel "Güncelle" üstteki başlıkta, tarama tarihi de araç çubuğundaki
   "Son güncelleme" satırında zaten duruyor. Telefonu dik tutunca
   ikisi de geri geliyor.
   ============================================================ */
@media (max-height: 500px) {
  #price-table thead tr:nth-child(2) {
    display: none;
  }

  #price-table thead tr:nth-child(1) th { top: 0; }
  #price-table thead tr:nth-child(3) th { top: 24px; }

  .row-count-info {
    margin: 0 0 0.15rem;
    font-size: 0.66rem;
  }

  /* Cihaz Analizi'nde dört seçim alanı 150px tabanla 615px istiyor, sol
     şeritten sonra 600px kalıyor — kıl payı ikinci satıra taşıyor ve
     yatayda o satır tablonun yarısı demek. Taban 120px'de dördü tek
     satıra giriyor. */
  .analysis-field {
    flex: 1 1 120px;
  }

  .analysis-field > span {
    font-size: 0.66rem;
  }
}

/* --- Tarih gezinme ---
   Kayma önlemi: "Bugüne dön" düğmesi DOM akışından çıkmaz, sadece
   görünmez olur (visibility). Etiket de sabit genişlikte, böylece
   "Bugün" ile "21 Temmuz 2026" arasında geçerken grup oynamaz. */
.date-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Kontroller tek satırda; son güncelleme bilgisi altlarında. */
.date-nav-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Seçili günün son güncelleme zamanı, takvimin hemen altında.
   Panelin diğer yardımcı metinleriyle aynı dil: --text-muted, ham opacity değil.
   min-height: metin gelmeden de yer tutar, yoksa veri yüklenince toolbar zıplıyordu.
   tabular-nums: saat değişince rakam genişliği oynamasın. */
.date-nav-meta {
  margin: 0;
  padding-right: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.2;
  min-height: 1.2em;
  color: var(--text-muted);
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Geçmiş gündeyken bilgi öne çıksın: "bugüne bakmıyorsun" belli olmalı.
   Vurgu RENKTEN değil AĞIRLIKTAN geliyor — app.js kurumsal renkten türettiği
   --link'i satır içi yazıyor ve karanlık tema kuralını eziyor; koyu kırmızı
   koyu zeminde okunmuyordu. --text her iki temada da doğru kontrastı veriyor. */
.date-nav.date-nav-past .date-nav-meta {
  color: var(--text);
  font-weight: 600;
}

/* Üç parça tek bir hap gibi görünsün */
.date-nav-group {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.date-nav-btn,
.date-nav-label {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s, color 0.12s;
}

.date-nav-btn {
  padding: 0 0.6rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.date-nav-btn:not(:disabled):hover {
  background: var(--primary-light);
  color: var(--link);
}

.date-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.date-nav-label {
  min-width: 11.5rem;
  padding: 0.45rem 0.6rem;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.date-nav-label:hover {
  background: var(--primary-light);
  color: var(--link);
}

/* Geçmiş güne bakılıyor: hap belirginleşsin */
.date-nav.date-nav-past .date-nav-group {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.date-nav.date-nav-past .date-nav-label {
  background: var(--primary-light);
  color: var(--link);
}

/* Yer her zaman ayrılı — görünürlük değişse de düzen oynamaz */
.date-nav-today {
  visibility: hidden;
  border: 1px solid transparent;
  background: transparent;
  color: var(--link);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.date-nav.date-nav-past .date-nav-today {
  visibility: visible;
}

.date-nav-today:hover {
  border-color: var(--border);
  background: var(--surface);
}

/* Takvim girdisi etiketin altına açılsın */
.date-nav-label-wrap {
  position: relative;
  display: inline-flex;
}

.date-nav-input {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  border: none;
  padding: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .date-nav {
    margin-left: 0;
  }
  .date-nav-label {
    min-width: 8.5rem;
    font-size: 0.8rem;
  }
}

/* ============================================================
   FIRSAT ANALİZİ — Cihaz Analizi sekmesinin altındaki blok
   ============================================================ */

.opportunity-panel {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.opportunity-panel h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.opportunity-meta {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.opportunity-row {
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}

.opportunity-row:first-child {
  border-top: none;
  padding-top: 0;
}

.opportunity-row h3 {
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
}

.opportunity-count {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.76rem;
}

/* Dört sayı yan yana; dar ekranda alt alta iniyor. */
.opportunity-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem 1rem;
  margin-bottom: 0.55rem;
}

.opportunity-stats > div {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.opportunity-stats span {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.opportunity-stats b {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.opportunity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.opportunity-chip {
  padding: 0.16rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Stokta olmayan ilan soluk: fiyat gerçek ama bugün alınamıyor. */
.opportunity-chip-nostock {
  opacity: 0.6;
  font-style: italic;
}

.opportunity-note {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.opportunity-warn {
  color: var(--danger);
}

.opportunity-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.opportunity-advice {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.opportunity-advice b {
  font-variant-numeric: tabular-nums;
}

.opportunity-recommend {
  background: var(--primary-light);
  border-radius: 8px;
  padding: 0.75rem 0.8rem;
  margin-top: 0.75rem;
  border-top: none;
}

.opportunity-up {
  color: var(--danger);
}

.opportunity-down {
  color: var(--success);
}

/* "Alış Fiyatı Konumu" / "VDF Satış Fiyat Konumu" satırları. */
.opportunity-konumlar {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.opportunity-konum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
}

.opportunity-konum-baslik {
  font-size: 0.72rem;
  color: var(--text-muted);
  min-width: 175px;
}

/* Aralığın dışı: üstte de altta da bakılması gereken bir durum. */
.opportunity-konum-kontrol {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--danger);
}

.opportunity-konum-icinde {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--success);
}

.opportunity-konum-bos,
.opportunity-konum-detay {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Cihaz Analizi'ndeki iki blok başlığı: Satış Karşılaştırması / Alış
   Karşılaştırması. İkisi de aynı düzeni (grafik + liste) taşıyor, başlık
   hangisine baktığını söylüyor. */
.analysis-section-title {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.analysis-section-title:first-of-type {
  margin-top: 0.35rem;
}