/*
 * TikTak component katmanı.
 *
 * Anatomi kaynağı: qr-menu-yonetim.css (onaylanmış QR menü yönetim tasarımı).
 * Bu dosya o componentlerin yapısını ve davranışını korur; renk, tipografi,
 * spacing, radius, gölge ve state değerlerini tt-theme.css semantic
 * tokenlarına bağlar. Sabit hex değer içermez — her değer var(--tt-*) ile
 * gelir, böylece Light/Dark tema ve Figma token sözleşmesi korunur.
 *
 * Kabuk (topbar, sidebar, sayfa başlığı) tt-theme.css'in sorumluluğundadır.
 * Burada .tt-page-header yeniden tanımlanmaz; yalnızca tamamlayıcı
 * alt parçaları eklenir.
 */

/* Kutu modeli: tt-theme.css'in global *,*::before,*::after resetinden
   gelir (Bootstrap kaldırıldıktan sonra eklendi). Bu dosyayı yükleyen
   her sayfa tt-theme.css'i de yükler, o yüzden burada ayrıca
   tanımlanmaz. */

/* ============================================================
   1. Sayfa başlığı tamamlayıcıları
   ============================================================ */

.tt-page-header__sub {
  flex: 1 0 100%;
  margin: var(--tt-space-4) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tt-text-secondary);
}

.tt-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-8);
  margin-left: auto;
}

/* ============================================================
   2. Yerleşim yardımcıları
   ============================================================ */

.tt-grid {
  display: grid;
  gap: var(--tt-space-20);
}

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

/* Sütun sayısını içerik genişliğine göre kendisi belirler. */
.tt-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Dar seçim paneli + geniş çalışma paneli (ör. seçim + form). */
.tt-grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

.tt-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-16);
}

.tt-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-10);
}

.tt-actions--end { justify-content: flex-end; }

.tt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tt-space-12);
  margin-bottom: var(--tt-space-16);
}

.tt-toolbar__spacer { margin-left: auto; }

.tt-muted {
  color: var(--tt-text-secondary);
  font-size: 14px;
}

/* Genel gizleme yardımcısı (JS göster/gizle için). */
.tt-hidden { display: none !important; }

/*
 * `hidden` özniteliği yalnızca TARAYICI varsayılanında `display: none` üretir.
 * Bir bileşen kendi kuralında `display: flex/grid/block` verdiği anda yazar stili
 * bu varsayılanı EZER ve `el.hidden = true` görsel olarak hiçbir şey yapmaz.
 * (Bildirim popup'ı tam olarak bu yüzden sayfa açılışında görünüyor ve zile ikinci
 * tıklamada kapanmıyordu.) Kural burada MERKEZÎ olarak bir kez kurulur; bileşen
 * başına `.x[hidden]` yazmak gerekmez. Bilinçli istisnalar (ör. yazdırma
 * medyasında açılan panel) daha yüksek özgüllükle kendi kuralını yazar.
 */
[hidden] { display: none !important; }

/* Ekran okuyucuya açık, görsel olarak gizli. */
.tt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. Card
   ============================================================ */

.tt-card {
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
  padding: var(--tt-space-20) var(--tt-space-24);
  color: var(--tt-text);
}

.tt-card--flush {
  padding: 0;
  overflow: hidden;
}

.tt-card--raised { box-shadow: var(--tt-shadow-sm); }

.tt-card__title {
  margin: 0 0 var(--tt-space-16);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tt-text);
}

.tt-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-12);
  padding: var(--tt-space-16) var(--tt-space-24);
  border-bottom: 1px solid var(--tt-border);
}

.tt-card__head .tt-card__title { margin: 0; }

.tt-card__body { padding: var(--tt-space-20) var(--tt-space-24); }

.tt-card__body--scroll {
  max-height: 18rem;
  overflow-y: auto;
}

/* Sepet/özet panelleri: gövde dikey akar, alt blok dibe yaslanır. */
.tt-card__body--fill {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--tt-space-12);
}

.tt-push-bottom { margin-top: auto; }

/* Ara toplam / toplam satırı. */
.tt-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tt-space-12);
  padding-top: var(--tt-space-12);
  font-size: 14px;
  color: var(--tt-text-secondary);
  border-top: 1px solid var(--tt-border);
}

.tt-total__value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tt-text);
}

/* tt-card--flush içinde gövde dolgusuna hizalanmış tekil içerik. */
.tt-card__inset { margin: var(--tt-space-16) var(--tt-space-24) 0; }
.tt-card__inset--bottom { margin-bottom: var(--tt-space-16); }

.tt-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tt-space-10);
  padding: var(--tt-space-16) var(--tt-space-24);
  border-top: 1px solid var(--tt-border);
}

/* ============================================================
   4. Form
   ============================================================ */

.tt-form {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-14);
}

.tt-field {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-6);
}

.tt-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--tt-space-10);
}

/* Toolbar içindeki alanlar için genişlik sınıfları. */
.tt-field--w-sm { flex: 1 1 9rem;  min-width: 8rem; }
.tt-field--w-md { flex: 1 1 14rem; min-width: 11rem; }
.tt-field--w-lg { flex: 1 1 20rem; min-width: 15rem; }

.tt-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tt-text-secondary);
}

.tt-label__required {
  margin-left: var(--tt-space-2);
  color: var(--tt-danger);
}

.tt-input,
.tt-select,
.tt-textarea {
  width: 100%;
  min-height: var(--tt-control-height);
  padding: var(--tt-space-8) var(--tt-space-12);
  font-family: var(--tt-font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--tt-text);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  box-shadow: none;
  transition: border-color var(--tt-transition), box-shadow var(--tt-transition);
}

.tt-textarea {
  min-height: calc(var(--tt-control-height) * 2.5);
  resize: vertical;
}

.tt-select {
  padding-right: var(--tt-space-32);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--tt-space-16)) 50%,
                       calc(100% - var(--tt-space-12)) 50%;
  background-size: var(--tt-space-4) var(--tt-space-4), var(--tt-space-4) var(--tt-space-4);
  background-repeat: no-repeat;
}

/* Toolbar/başlık içinde tek başına duran, kendi genişliğini alan select. */
.tt-select--inline {
  width: auto;
  min-width: 12rem;
  max-width: 100%;
}

.tt-input:focus,
.tt-select:focus,
.tt-textarea:focus {
  outline: none;
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px var(--tt-focus-ring);
}

.tt-input:disabled,
.tt-select:disabled,
.tt-textarea:disabled {
  color: var(--tt-text-secondary);
  background-color: var(--tt-surface-secondary);
  cursor: not-allowed;
}

.tt-input::placeholder,
.tt-textarea::placeholder { color: var(--tt-text-muted); }

.tt-input.is-invalid,
.tt-select.is-invalid,
.tt-textarea.is-invalid { border-color: var(--tt-danger); }

.tt-input.is-invalid:focus,
.tt-select.is-invalid:focus,
.tt-textarea.is-invalid:focus {
  border-color: var(--tt-danger);
  box-shadow: 0 0 0 3px var(--tt-danger-subtle);
}

.tt-help {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tt-text-secondary);
}

.tt-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tt-danger);
}

.tt-check {
  display: flex;
  align-items: center;
  gap: var(--tt-space-8);
  font-size: 14px;
  color: var(--tt-text);
  cursor: pointer;
}

.tt-check input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--tt-primary);
  cursor: pointer;
}

.tt-check input:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

/* Çok satırlı etiket içeren onay kutuları için. */
.tt-check--top { align-items: flex-start; }

.tt-check--boxed {
  padding: var(--tt-space-10) var(--tt-space-12);
  background: var(--tt-surface-secondary);
  border-radius: var(--tt-radius-md);
}

/* Modifier grubu gibi başlıklı seçenek kümeleri. */
.tt-fieldset {
  padding: var(--tt-space-10) var(--tt-space-12);
  margin: 0;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
}

.tt-fieldset__legend {
  padding: 0 var(--tt-space-4);
  font-size: 12px;
  font-weight: 600;
  color: var(--tt-text-secondary);
}

.tt-fieldset .tt-check { margin-top: var(--tt-space-6); }
.tt-fieldset .tt-check:first-of-type { margin-top: 0; }

/* Kaydırılabilir onay kutusu listesi (ör. istasyon/kategori seçimi). */
.tt-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-6);
  max-height: 11rem;
  padding: var(--tt-space-8);
  overflow-y: auto;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
}

/* Renk seçici — tt-input ile aynı yükseklik. */
.tt-color-input {
  width: 100%;
  height: var(--tt-control-height);
  padding: var(--tt-space-2);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  cursor: pointer;
}

.tt-color-input:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 1px;
}

/* ============================================================
   5. Button
   ============================================================ */

.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-8);
  min-height: var(--tt-control-height);
  padding: var(--tt-space-8) var(--tt-space-16);
  font-family: var(--tt-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-md);
  cursor: pointer;
  transition: background-color var(--tt-transition), border-color var(--tt-transition), color var(--tt-transition);
}

.tt-btn:disabled,
.tt-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tt-btn:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-btn--primary {
  color: var(--tt-text-on-primary);
  background-color: var(--tt-primary);
  border-color: var(--tt-primary);
}

.tt-btn--primary:hover:not(:disabled):not(.is-disabled) {
  color: var(--tt-text-on-primary);
  background-color: var(--tt-primary-hover);
  border-color: var(--tt-primary-hover);
}

.tt-btn--primary:active:not(:disabled) {
  background-color: var(--tt-primary-pressed);
  border-color: var(--tt-primary-pressed);
}

.tt-btn--secondary {
  color: var(--tt-text-secondary);
  background-color: transparent;
  border-color: var(--tt-border);
}

.tt-btn--secondary:hover:not(:disabled):not(.is-disabled) {
  color: var(--tt-text);
  background-color: var(--tt-surface-secondary);
  border-color: var(--tt-border-strong);
}

.tt-btn--danger {
  color: var(--tt-danger-on);
  background-color: var(--tt-danger);
  border-color: var(--tt-danger);
}

.tt-btn--danger:hover:not(:disabled):not(.is-disabled) {
  color: var(--tt-danger-on);
  background-color: var(--tt-danger-hover);
  border-color: var(--tt-danger-hover);
}

/*
 * Dolgulu yeşil: "bu yol açık" anlamı taşıyan, yıkıcı olmayan bir eylem için
 * (ör. Adisyon işlemleri ekranındaki "Diğer" düğmesi). Birincil eylemin yerini
 * ALMAZ; aynı ekranda tek başına kullanılır.
 */
.tt-btn--success {
  color: var(--tt-success-on);
  background-color: var(--tt-success);
  border-color: var(--tt-success);
}

.tt-btn--success:hover:not(:disabled):not(.is-disabled) {
  color: var(--tt-success-on);
  background-color: var(--tt-success-hover);
  border-color: var(--tt-success-hover);
}

.tt-btn--ghost {
  color: var(--tt-text-secondary);
  background-color: transparent;
  border-color: transparent;
}

.tt-btn--ghost:hover:not(:disabled):not(.is-disabled) {
  color: var(--tt-text);
  background-color: var(--tt-surface-secondary);
}

.tt-btn--sm {
  min-height: var(--tt-control-height-sm);
  padding: var(--tt-space-4) var(--tt-space-12);
  font-size: 12px;
}

.tt-btn--block { width: 100%; }

/* ============================================================
   6. Table
   ============================================================ */

.tt-table-wrap {
  width: 100%;
  overflow-x: auto;
}

/*
 * Uzun listeler (ör. ürün ↔ modifier grubu eşleştirme matrisi) için dikey
 * kaydırmalı gövde. Sayfa değil ALAN kaydırır; başlık satırı yapışkandır,
 * böylece yüzlerce satırda sütun anlamı kaybolmaz.
 */
.tt-table-wrap--scroll {
  max-height: 26rem;
  overflow-y: auto;
}

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

.tt-table {
  width: 100%;
  margin: 0;
  font-size: 14px;
  color: var(--tt-text);
  border-collapse: collapse;
}

.tt-table th {
  padding: var(--tt-space-12) var(--tt-space-16);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tt-text-secondary);
  background-color: var(--tt-surface-secondary);
  border-bottom: 1px solid var(--tt-border);
}

.tt-table td {
  padding: var(--tt-space-12) var(--tt-space-16);
  vertical-align: middle;
  border-bottom: 1px solid var(--tt-border);
}

.tt-table tbody tr:last-child td { border-bottom: 0; }

.tt-table--hover tbody tr:hover td { background-color: var(--tt-surface-secondary); }

.tt-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- Sıralanabilir başlık (TT.Tablo) ---------------------------------- */

/*
 * Başlık metni bir <button>'a sarılır: tıklama alanı hücrenin tamamı kadardır,
 * klavyeyle gezilebilir ve odak halkası kabuğun ortak halkasıdır. Başlık
 * hücresinin görünümü DEĞİŞMEZ; yalnız sağına sıra oku eklenir.
 */
.tt-th--sirali { padding: 0; }

.tt-th__btn {
  display: flex;
  align-items: center;
  gap: var(--tt-space-4);
  width: 100%;
  padding: var(--tt-space-12) var(--tt-space-16);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.tt-th__btn:hover { color: var(--tt-text); }
.tt-th__btn:focus-visible { outline: 2px solid var(--tt-primary); outline-offset: -2px; }

/* Sayısal sütunlarda başlık da sağa yaslanır ki rakamlarla hizalansın. */
.tt-table__num .tt-th__btn { justify-content: flex-end; }

.tt-th__ok {
  flex: none;
  font-size: 10px;
  line-height: 1;
  opacity: 0.45;
}

.tt-th--sirali.is-sirali { color: var(--tt-text); }
.tt-th--sirali.is-sirali .tt-th__ok { opacity: 1; color: var(--tt-primary); }

/* ---- Başlık altı filtre satırı (TT.Tablo) ------------------------------ */

.tt-tablo-filtre th {
  padding: var(--tt-space-8) var(--tt-space-12);
  text-transform: none;
  letter-spacing: normal;
  background-color: var(--tt-surface);
  border-bottom: 1px solid var(--tt-border);
}

.tt-th-filtre__aralik {
  display: flex;
  gap: var(--tt-space-4);
}

.tt-th-filtre__aralik .tt-input { min-width: 0; }

/* Filtre kutuları satıra sığsın diye kompakt varyant. */
.tt-input--xs,
.tt-select--xs {
  width: 100%;
  min-height: 0;
  padding: var(--tt-space-4) var(--tt-space-8);
  font-size: 12px;
  font-weight: 400;
}

/*
 * Kaydırmalı gövdede (tt-table-wrap--scroll) başlık satırı yapışkandır; filtre
 * satırı onun ALTINA yapışmalı, yoksa kaydırırken başlığın üstüne biner.
 */
.tt-table-wrap--scroll .tt-tablo-filtre th {
  position: sticky;
  top: var(--tt-tablo-baslik-y, 2.6rem);
  z-index: 1;
}

/* Filtre tüm satırları elediğinde tablo gizlenmez; bu satır basılır. */
.tt-tablo-bos td {
  padding: var(--tt-space-16);
  text-align: center;
  color: var(--tt-text-secondary);
}

/* ---- Sürükle-bırak sıralama (TT.SurukleBirak) -------------------------- */

.tt-surukle { cursor: grab; }
.tt-surukle:active { cursor: grabbing; }

.tt-surukle__tutamak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  min-height: 1.5rem;
  font-size: 15px;
  line-height: 1;
  color: var(--tt-text-secondary);
  cursor: grab;
  user-select: none;
}

.tt-surukle__tutamak:hover { color: var(--tt-text); }

.tt-surukle__tutamak:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
  border-radius: var(--tt-radius-sm, 4px);
}

/* Liste satırında tutamak en solda ve sabit genişlikte durur. */
.tt-list__row > .tt-surukle__tutamak {
  flex: none;
  margin-left: var(--tt-space-8);
}

/* Sıra sütununda tutamak ile sıra numarası yan yana ve sağa yaslı durur. */
.tt-table__num > .tt-surukle__tutamak {
  margin-right: var(--tt-space-4);
  vertical-align: middle;
}

/* Satır içi durum açılır listesi hücreyi kaplamasın. */
.tt-table td > .tt-select--xs,
.tt-table-actions > .tt-select--xs {
  width: auto;
  min-width: 5.5rem;
}

/* Sürüklenen satır soluklaşır; nereye bırakılacağı ince bir çizgiyle gösterilir. */
.is-suruklenen { opacity: 0.45; }

.is-birakma-ustu { box-shadow: inset 0 2px 0 0 var(--tt-primary); }
.is-birakma-alti { box-shadow: inset 0 -2px 0 0 var(--tt-primary); }

/* Tablo satırında box-shadow `tr`ye uygulanmaz; hücrelere verilir. */
tr.is-birakma-ustu td { box-shadow: inset 0 2px 0 0 var(--tt-primary); }
tr.is-birakma-alti td { box-shadow: inset 0 -2px 0 0 var(--tt-primary); }
tr.is-birakma-ustu, tr.is-birakma-alti { box-shadow: none; }

.tt-table-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-4);
  white-space: nowrap;
}

.tt-cell {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-8);
}

.tt-cell__main {
  font-weight: 500;
  color: var(--tt-text);
}

.tt-cell__sub {
  font-size: 12px;
  color: var(--tt-text-secondary);
}

/* ============================================================
   6b. Liste (combo / seçici açılır listeleri)
   ============================================================ */

.tt-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  overflow: hidden;
}

.tt-list--plain {
  border: 0;
  border-radius: 0;
}

/* Seçilebilir bir öğe + satır içi eylemlerin yan yana durduğu liste satırı
   (ör. menü ekranındaki kategori ağacı). */
.tt-list__row {
  display: flex;
  align-items: center;
  gap: var(--tt-space-8);
  border-bottom: 1px solid var(--tt-border);
}

.tt-list__row:last-child { border-bottom: 0; }

.tt-list__row > .tt-list__item {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-list__row > .tt-table-actions {
  flex-shrink: 0;
  padding-right: var(--tt-space-12);
}

.tt-list__item {
  display: block;
  width: 100%;
  padding: var(--tt-space-8) var(--tt-space-12);
  font-family: var(--tt-font-sans);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  color: var(--tt-text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--tt-border);
  cursor: pointer;
}

.tt-list__item:last-child { border-bottom: 0; }

.tt-list__item:hover,
.tt-list__item:focus {
  background-color: var(--tt-primary-subtle);
}

.tt-list__item:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: -2px;
}

/* Seçili liste öğesi (ör. menü/kategori seçimi). */
.tt-list__item.is-active {
  font-weight: 600;
  color: var(--tt-nav-active-text);
  background-color: var(--tt-nav-active);
  box-shadow: inset 3px 0 0 var(--tt-primary);
}

.tt-list__item.is-active:hover,
.tt-list__item.is-active:focus {
  background-color: var(--tt-nav-active);
}

.tt-list__item--empty {
  color: var(--tt-text-secondary);
  cursor: default;
}

.tt-list__item--empty:hover { background: none; }

/* Seçilemeyen, içinde kendi aksiyonu olan liste satırı
   (ör. personel şube atamaları). */
.tt-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-10);
  padding: var(--tt-space-10) var(--tt-space-12);
  font-size: 14px;
  color: var(--tt-text);
  border-bottom: 1px solid var(--tt-border);
}

.tt-list__row:last-child { border-bottom: 0; }

.tt-list__row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-8);
  min-width: 0;
}

/* ============================================================
   7. Durum göstergeleri
   ============================================================ */

.tt-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--tt-space-8);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  border-radius: var(--tt-radius-full);
}

.tt-status-badge--ok      { color: var(--tt-success); background-color: var(--tt-success-subtle); }
.tt-status-badge--off     { color: var(--tt-danger);  background-color: var(--tt-danger-subtle); }
.tt-status-badge--warn    { color: var(--tt-warning); background-color: var(--tt-warning-subtle); }
.tt-status-badge--info    { color: var(--tt-info);    background-color: var(--tt-info-subtle); }
.tt-status-badge--neutral { color: var(--tt-text-secondary); background-color: var(--tt-surface-secondary); }

.tt-pill {
  display: inline-block;
  padding: 3px var(--tt-space-8);
  font-size: 12px;
  line-height: 1.45;
  color: var(--tt-text-secondary);
  background-color: var(--tt-surface-secondary);
  border-radius: var(--tt-radius-full);
}

.tt-tag {
  display: inline-block;
  margin-right: var(--tt-space-4);
  padding: 2px var(--tt-space-6);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tt-primary);
  background-color: var(--tt-primary-subtle);
  border-radius: var(--tt-radius-full);
}

/* ============================================================
   8. Alert
   ============================================================ */

.tt-alert {
  padding: var(--tt-space-12) var(--tt-space-16);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-md);
}

.tt-alert--danger  { color: var(--tt-danger);  background-color: var(--tt-danger-subtle);  border-color: var(--tt-danger); }
.tt-alert--success { color: var(--tt-success); background-color: var(--tt-success-subtle); border-color: var(--tt-success); }
.tt-alert--warning { color: var(--tt-warning); background-color: var(--tt-warning-subtle); border-color: var(--tt-warning); }
.tt-alert--info    { color: var(--tt-info);    background-color: var(--tt-info-subtle);    border-color: var(--tt-info); }

/* ============================================================
   9. Loading / Empty state
   ============================================================ */

.tt-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-10);
  padding: var(--tt-space-24);
  font-size: 14px;
  color: var(--tt-text-secondary);
}

.tt-loading__spinner {
  width: var(--tt-space-16);
  height: var(--tt-space-16);
  flex-shrink: 0;
  border: 2px solid var(--tt-border-strong);
  border-top-color: var(--tt-primary);
  border-radius: var(--tt-radius-full);
  animation: tt-spin 0.7s linear infinite;
}

@keyframes tt-spin { to { transform: rotate(360deg); } }

.tt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tt-space-6);
  padding: var(--tt-space-48) var(--tt-space-24);
  text-align: center;
}

.tt-empty-state__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--tt-text);
}

.tt-empty-state__desc {
  margin: 0;
  max-width: 42ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tt-text-secondary);
}

.tt-empty-state__actions { margin-top: var(--tt-space-8); }

/* ============================================================
   10. Modal
   ============================================================ */

.tt-modal {
  position: fixed;
  inset: 0;
  z-index: var(--tt-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tt-space-16);
}

.tt-modal[hidden] { display: none; }

.tt-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--tt-overlay);
}

.tt-modal__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: 90vh;
  padding: var(--tt-space-28);
  overflow: auto;
  color: var(--tt-text);
  background-color: var(--tt-surface);
  border-radius: var(--tt-radius-xl);
  box-shadow: var(--tt-shadow-lg);
}

.tt-modal__panel--lg { width: min(760px, 100%); }

.tt-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-12);
  margin-bottom: var(--tt-space-8);
}

.tt-modal__title {
  margin: 0;
  font-family: var(--tt-font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tt-text);
}

.tt-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tt-space-32);
  height: var(--tt-space-32);
  flex-shrink: 0;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--tt-text-secondary);
  background: none;
  border: 0;
  border-radius: var(--tt-radius-md);
  cursor: pointer;
}

.tt-modal__close:hover {
  color: var(--tt-text);
  background-color: var(--tt-surface-secondary);
}

.tt-modal__close:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-modal__sub {
  margin: 0 0 var(--tt-space-16);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tt-text-secondary);
}

.tt-modal__body { margin-bottom: var(--tt-space-20); }

.tt-modal__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tt-space-10);
}

/* ============================================================
   11. Toggle
   ============================================================ */

.tt-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: var(--tt-space-24);
  flex-shrink: 0;
  vertical-align: middle;
}

.tt-toggle input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tt-toggle__track {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--tt-border-strong);
  border-radius: var(--tt-radius-full);
  transition: background-color var(--tt-transition);
}

.tt-toggle input:checked + .tt-toggle__track { background-color: var(--tt-success); }

.tt-toggle input:disabled ~ .tt-toggle__track { opacity: 0.55; }

.tt-toggle__thumb {
  position: absolute;
  top: var(--tt-space-2);
  left: var(--tt-space-2);
  width: var(--tt-space-20);
  height: var(--tt-space-20);
  pointer-events: none;
  background-color: var(--tt-toggle-thumb);
  border-radius: var(--tt-radius-full);
  box-shadow: var(--tt-shadow-sm);
  transition: transform var(--tt-transition);
}

.tt-toggle input:checked ~ .tt-toggle__thumb { transform: translateX(var(--tt-space-20)); }

.tt-toggle input:focus-visible + .tt-toggle__track {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

/* ============================================================
   12. Tanım listesi ve kod
   ============================================================ */

.tt-dl { margin: 0 0 var(--tt-space-16); }

.tt-dl__row { margin-bottom: var(--tt-space-12); }

.tt-dl__row:last-child { margin-bottom: 0; }

.tt-dl__row dt {
  margin-bottom: var(--tt-space-4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tt-text-secondary);
}

.tt-dl__row dd {
  margin: 0;
  color: var(--tt-text);
}

.tt-kbd {
  display: inline-block;
  padding: 1px var(--tt-space-6);
  font-family: var(--tt-font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tt-text);
  background-color: var(--tt-surface-secondary);
  border: 1px solid var(--tt-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--tt-radius-sm);
}

.tt-code {
  display: inline-block;
  padding: var(--tt-space-4) var(--tt-space-8);
  font-family: var(--tt-font-mono);
  font-size: 12px;
  color: var(--tt-text);
  word-break: break-all;
  background-color: var(--tt-surface-secondary);
  border-radius: var(--tt-radius-sm);
}

/* ============================================================
   13. Sekmeler (tabs)
   ============================================================ */

.tt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-4);
  border-bottom: 1px solid var(--tt-border);
}

.tt-tabs__tab {
  padding: var(--tt-space-8) var(--tt-space-12);
  margin-bottom: -1px;
  font-family: var(--tt-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--tt-text-secondary);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tt-tabs__tab:hover { color: var(--tt-text); }

.tt-tabs__tab:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: -2px;
}

.tt-tabs__tab.is-active {
  color: var(--tt-primary);
  border-bottom-color: var(--tt-primary);
}

.tt-tabpanel { padding-top: var(--tt-space-16); }
.tt-tabpanel[hidden] { display: none; }

/* ============================================================
   14. Toast bildirim (TT.Toast)
   ============================================================ */

/* Viewport'a sabit; kaydırmadan bağımsız ve modalin üstünde durur.
   Kapsayıcı tıklamayı geçirir, yalnızca toast'ın kendisi yakalar. */
.tt-toast-kapsayici {
  position: fixed;
  top: calc(var(--tt-topbar-height) + var(--tt-space-12));
  right: var(--tt-space-16);
  z-index: var(--tt-z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--tt-space-10);
  width: min(380px, calc(100vw - var(--tt-space-32)));
  pointer-events: none;
}

.tt-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--tt-space-10);
  width: 100%;
  padding: var(--tt-space-12) var(--tt-space-14);
  font-family: var(--tt-font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tt-text);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-left: 3px solid var(--tt-border-strong);
  border-radius: var(--tt-radius-md);
  box-shadow: var(--tt-shadow-md);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--tt-transition), transform var(--tt-transition);
}

.tt-toast.is-acik {
  opacity: 1;
  transform: translateY(0);
}

.tt-toast.is-kapaniyor {
  opacity: 0;
  transform: translateY(-6px);
}

.tt-toast__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tt-space-20);
  height: var(--tt-space-20);
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--tt-radius-full);
}

.tt-toast__mesaj {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tt-toast__kapat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tt-space-24);
  height: var(--tt-space-24);
  flex-shrink: 0;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--tt-text-muted);
  background: none;
  border: 0;
  border-radius: var(--tt-radius-sm);
  cursor: pointer;
}

.tt-toast__kapat:hover {
  color: var(--tt-text);
  background-color: var(--tt-surface-secondary);
}

.tt-toast__kapat:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 1px;
}

/* Tür renkleri: gövde her zaman --tt-surface üzerinde --tt-text ile yazılır,
   böylece açık ve koyu temada kontrast korunur; tür yalnızca kenar ve
   ikon rozetiyle ayrışır. */
.tt-toast--basari { border-left-color: var(--tt-success); }
.tt-toast--basari .tt-toast__ikon { color: var(--tt-success); background-color: var(--tt-success-subtle); }

.tt-toast--hata { border-left-color: var(--tt-danger); }
.tt-toast--hata .tt-toast__ikon { color: var(--tt-danger); background-color: var(--tt-danger-subtle); }

.tt-toast--uyari { border-left-color: var(--tt-warning); }
.tt-toast--uyari .tt-toast__ikon { color: var(--tt-warning); background-color: var(--tt-warning-subtle); }

.tt-toast--bilgi { border-left-color: var(--tt-info); }
.tt-toast--bilgi .tt-toast__ikon { color: var(--tt-info); background-color: var(--tt-info-subtle); }

/* ============================================================
   15. Form sunum katmanı (TT.FormHost)
   ============================================================ */

/* Modal kipinde gövde kendi kaydırmasını yapar; panel yüksekliği
   .tt-modal__panel tarafından zaten sınırlanmıştır. */
.tt-formhost--modal .tt-modal__body { margin-bottom: 0; }

/* Sayfa görünümü: mevcut sayfa bölgesini devralır, modal kullanılmaz. */
.tt-formhost--sayfa {
  display: block;
  width: 100%;
}

.tt-formhost__head {
  display: flex;
  align-items: center;
  gap: var(--tt-space-12);
  margin-bottom: var(--tt-space-16);
}

.tt-formhost__baslik {
  margin: 0;
  font-family: var(--tt-font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tt-text);
}

.tt-formhost__geri { flex-shrink: 0; }

.tt-formhost__govde {
  padding: var(--tt-space-20);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
}

/* Sayfa görünümü açıkken sayfa bölgesindeki diğer içerik gizlenir;
   kabuk (topbar/sidebar) yerinde kalır. */
body.tt-formhost-sayfa-acik .app-content > :not(.tt-formhost--sayfa) {
  display: none !important;
}

.tt-formhost__icerik.is-mesgul { opacity: 0.7; }

/* ============================================================
   16. Bölge hata durumu (TT.Bolge)
   ============================================================ */

/* Bir liste/panel yüklenemediğinde sayfanın tamamını değil, yalnızca o bölgeyi
   işaretler. Toast geçicidir; bu kutu kalıcıdır ve tekrar deneme sunar. */
.tt-bolge-hata {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--tt-space-12);
  margin: var(--tt-space-16);
  padding: var(--tt-space-16);
  font-family: var(--tt-font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tt-text);
  background-color: var(--tt-danger-subtle);
  border: 1px solid var(--tt-danger);
  border-radius: var(--tt-radius-md);
}

.tt-bolge-hata__ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--tt-space-24);
  height: var(--tt-space-24);
  font-weight: 700;
  color: var(--tt-danger);
  background-color: var(--tt-surface);
  border-radius: 50%;
}

.tt-bolge-hata__govde {
  flex: 1 1 220px;
  min-width: 0;
}

.tt-bolge-hata__baslik {
  margin: 0 0 var(--tt-space-4);
  font-weight: 600;
}

.tt-bolge-hata__mesaj {
  margin: 0;
  color: var(--tt-text-muted);
  overflow-wrap: anywhere;
}

.tt-bolge-hata__eylem { flex-shrink: 0; }

/* ============================================================
   17. Kullanıcı menüsü (topbar popover)
   Ad soyad / firma / şube + şifre değiştir + çıkış.
   Davranışı tt-shell.js bağlar (aria-expanded, ESC, dış tıklama).
   ============================================================ */

.tt-usermenu {
  position: relative;
}

.tt-usermenu__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-8);
  max-width: 14rem;
  padding: var(--tt-space-4) var(--tt-space-8);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--tt-text-secondary);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-md);
  cursor: pointer;
}

.tt-usermenu__btn:hover {
  color: var(--tt-text);
  background-color: var(--tt-nav-hover);
}

.tt-usermenu__btn:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
  color: var(--tt-text);
}

.tt-usermenu__avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--tt-radius-full);
  background-color: var(--tt-primary-subtle);
  border: 1px solid var(--tt-border);
}

.tt-usermenu__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-usermenu__caret {
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.tt-usermenu__btn[aria-expanded="true"] .tt-usermenu__caret {
  transform: rotate(180deg);
}

.tt-usermenu__pop {
  position: absolute;
  top: calc(100% + var(--tt-space-8));
  right: 0;
  z-index: var(--tt-z-header);
  min-width: 15rem;
  padding: var(--tt-space-8);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-md);
}

.tt-usermenu__head {
  padding: var(--tt-space-8) var(--tt-space-8) var(--tt-space-12);
  border-bottom: 1px solid var(--tt-border);
  margin-bottom: var(--tt-space-8);
}

.tt-usermenu__title {
  margin: 0 0 var(--tt-space-4);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--tt-text);
  word-break: break-word;
}

.tt-usermenu__meta {
  display: flex;
  gap: var(--tt-space-8);
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: var(--tt-text-secondary);
  word-break: break-word;
}

.tt-usermenu__etiket {
  flex-shrink: 0;
  min-width: 3rem;
  color: var(--tt-text-muted);
}

.tt-usermenu__item {
  display: block;
  width: 100%;
  padding: var(--tt-space-8);
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  color: var(--tt-text);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--tt-radius-md);
  cursor: pointer;
}

.tt-usermenu__item:hover {
  background-color: var(--tt-nav-hover);
}

.tt-usermenu__item:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: -2px;
}

/* ============================================================
   18. Seçim butonları + masa ızgarası (sipariş alma ekranları)
   ============================================================ */

/* Yan yana, tek seçimli buton grubu (ör. garson sipariş salon seçimi). */
.tt-secim-grup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-8);
}

.tt-secim {
  display: inline-flex;
  align-items: center;
  min-height: var(--tt-control-height);
  padding: var(--tt-space-6) var(--tt-space-14);
  font-family: var(--tt-font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tt-text-secondary);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-full);
  cursor: pointer;
  transition: background-color var(--tt-transition), border-color var(--tt-transition), color var(--tt-transition);
}

.tt-secim:hover {
  color: var(--tt-text);
  background-color: var(--tt-surface-secondary);
  border-color: var(--tt-border-strong);
}

.tt-secim:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-secim.is-active {
  font-weight: 600;
  color: var(--tt-nav-active-text);
  background-color: var(--tt-nav-active);
  border-color: var(--tt-primary);
}

/* Seçili salonun masaları — tek seçimli kart ızgarası. */
.tt-masa-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: var(--tt-space-8);
}

.tt-masa {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-2);
  padding: var(--tt-space-10) var(--tt-space-12);
  font-family: var(--tt-font-sans);
  text-align: left;
  color: var(--tt-text);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  cursor: pointer;
  transition: background-color var(--tt-transition), border-color var(--tt-transition);
}

.tt-masa:hover {
  background-color: var(--tt-surface-secondary);
  border-color: var(--tt-border-strong);
}

.tt-masa:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-masa.is-active {
  color: var(--tt-nav-active-text);
  background-color: var(--tt-primary-subtle);
  border-color: var(--tt-primary);
  box-shadow: inset 3px 0 0 var(--tt-primary);
}

/*
 * Dolu masa: TT.MasaDurum.doluMu() ile işaretlenir (tek doğruluk kaynağı).
 * Renk TEK BAŞINA anlam taşımaz — durum metni ("Dolu · ₺…") her zaman yazılır.
 */
.tt-masa.is-dolu {
  background-color: var(--tt-warning-subtle);
  border-color: var(--tt-warning);
}

.tt-masa.is-dolu .tt-masa__durum { color: var(--tt-warning); font-weight: 600; }

/*
 * "Diğer" kartı: masa ızgarasının sonunda, masa kartıyla aynı ölçüde ama YEŞİL.
 * Bir masa değildir; garsonu şubedeki diğer masalara götürür. Renk tek başına
 * anlam taşımaz — kartın üzerinde "Diğer" ve açıklaması yazılıdır.
 */
.tt-masa--diger {
  background-color: var(--tt-success-subtle);
  border-color: var(--tt-success);
}

.tt-masa--diger:hover {
  background-color: var(--tt-success-subtle);
  border-color: var(--tt-success-hover);
}

.tt-masa--diger .tt-masa__no,
.tt-masa--diger .tt-masa__durum { color: var(--tt-success); font-weight: 600; }

.tt-masa__no { font-size: 14px; font-weight: 600; }
.tt-masa__ad { font-size: 12px; color: var(--tt-text-secondary); }
.tt-masa__durum { font-size: 11px; color: var(--tt-text-muted); }
.tt-masa.is-active .tt-masa__ad,
.tt-masa.is-active .tt-masa__durum { color: var(--tt-nav-active-text); }

/* Kaydırılabilir, checkbox'lı ürün seçim listesi (sipariş kalemleri). */
.tt-checklist--lg { max-height: 24rem; }

.tt-checklist .tt-check {
  padding: var(--tt-space-6) var(--tt-space-8);
  border-radius: var(--tt-radius-sm);
}

.tt-checklist .tt-check:hover { background-color: var(--tt-surface-secondary); }

.tt-checklist .tt-check > span { flex: 1 1 auto; min-width: 0; }

.tt-checklist__fiyat {
  flex: 0 0 auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--tt-text-secondary);
}

.tt-checklist__bos {
  padding: var(--tt-space-12);
  font-size: 13px;
  color: var(--tt-text-secondary);
}

/* ============================================================
   19. Sipariş özeti (TT.SiparisOzeti)
   ============================================================ */

.tt-ozet {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-10);
}

.tt-ozet__bos { margin: 0; }

.tt-ozet__liste {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-ozet__satir {
  display: flex;
  align-items: center;
  gap: var(--tt-space-8);
  padding: var(--tt-space-8);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
}

.tt-ozet__satir.is-active {
  background-color: var(--tt-primary-subtle);
  border-color: var(--tt-primary);
  box-shadow: inset 3px 0 0 var(--tt-primary);
}

.tt-ozet__sec {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-2);
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--tt-text);
  background: none;
  border: 0;
  cursor: pointer;
}

.tt-ozet__sec:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-ozet__ad {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-ozet__meta {
  font-size: 12px;
  color: var(--tt-text-secondary);
  font-variant-numeric: tabular-nums;
}

.tt-ozet__adet {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-4);
  flex-shrink: 0;
}

.tt-ozet__adet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tt-control-height-sm);
  height: var(--tt-control-height-sm);
  padding: 0;
  font-size: 16px;
  line-height: 1;
  color: var(--tt-text);
  background-color: var(--tt-surface-secondary);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  cursor: pointer;
}

.tt-ozet__adet-btn:hover:not(:disabled) {
  background-color: var(--tt-surface);
  border-color: var(--tt-border-strong);
}

.tt-ozet__adet-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.tt-ozet__adet-btn:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 1px;
}

.tt-ozet__miktar {
  min-width: 3ch;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tt-ozet__sil { flex-shrink: 0; }

.tt-ozet__alt { display: flex; }

.tt-ozet__yarim { width: 100%; }

/* ============================================================
   20. Responsive
   ============================================================ */

@media (max-width: 960px) {
  .tt-grid--2,
  .tt-grid--3,
  .tt-grid--1-2 { grid-template-columns: 1fr; }
}

@media (max-width: 576px) {
  /* --flush kartların padding'i sıfır kalmalı; aksi halde gövde
     dolgusuyla üst üste binip çift boşluk oluşur. */
  .tt-card:not(.tt-card--flush) { padding: var(--tt-space-16); }
  .tt-card__head,
  .tt-card__body,
  .tt-card__foot { padding-left: var(--tt-space-16); padding-right: var(--tt-space-16); }
  .tt-modal__panel { padding: var(--tt-space-20); }
  .tt-toolbar > * { flex: 1 1 100%; }
  .tt-page-header__actions { width: 100%; margin-left: 0; }

  /* Dar ekranda toast iki kenara da yaslanır; konum yine sağ üsttür. */
  .tt-toast-kapsayici {
    left: var(--tt-space-12);
    right: var(--tt-space-12);
    width: auto;
  }

  .tt-formhost__govde { padding: var(--tt-space-16); }
}

@media (prefers-reduced-motion: reduce) {
  .tt-btn,
  .tt-input,
  .tt-select,
  .tt-textarea,
  .tt-toggle__track,
  .tt-toggle__thumb { transition: none; }

  .tt-loading__spinner { animation: none; }

  /* Toast animasyonsuz da olsa görünür kalmalı. */
  .tt-toast { transition: none; opacity: 1; transform: none; }
  .tt-toast.is-kapaniyor { opacity: 0; }
}

/* ==========================================================================
   Hesap fişi (FAZ 8 — adisyon işlemleri)
   ========================================================================== */

.tt-fis__bolum {
  padding: var(--tt-space-8) 0;
  border-bottom: 1px dashed var(--tt-border);
}

.tt-fis__bolum:last-child { border-bottom: 0; }

.tt-fis__baslik {
  display: flex;
  justify-content: space-between;
  gap: var(--tt-space-12);
  padding: var(--tt-space-4) 0;
}

.tt-fis__toplam { border-top: 2px solid var(--tt-border); }

/* Ödenmiş / ayrı hesaba atanmış satır: seçilemez olduğu görsel olarak da belli olsun. */
.tt-table tbody tr.is-kilitli { opacity: 0.62; }

/* SDD §107.5 — gel-al listesinde HAZIR (müşteriye verilecek) sipariş vurgulanır.
   Yalnız renkle anlam taşınmaz: satırda "Hazır" rozeti de bulunur. */
.tt-table tbody tr.is-vurgu { background: var(--tt-success-subtle); }
.tt-table tbody tr.is-vurgu td:first-child { box-shadow: inset 3px 0 0 var(--tt-success); }

/*
 * Dikkat gerektiren satır: pasif ürün, fiyatı girilmemiş ürün, KDS istasyonuna
 * eşleştirilmemiş ürün… Arka plan `td`'ye verilir, çünkü .tt-table--hover
 * hover'da `td` arka planını boyar ve `tr` üzerindeki rengi örterdi.
 *
 * Renk TEK BAŞINA anlam taşımaz: bu satırlarda ayrıca metinsel bir rozet
 * ("Pasif", "Eşleşme yok", "Fiyat yok") bulunur.
 */
.tt-table tbody tr.is-uyari td { background-color: var(--tt-danger-subtle); }
.tt-table tbody tr.is-uyari td:first-child { box-shadow: inset 3px 0 0 var(--tt-danger); }

@media print {
  /* Yazdırırken yalnızca fiş kâğıda gitsin. */
  body * { visibility: hidden; }
  .tt-fis, .tt-fis * { visibility: visible; }
  .tt-fis {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    border: 0;
    padding: 0;
  }
  .tt-fis__eylem { display: none !important; }
}

/* ============================================================
   20. Sayaç satırı (liste ekranı üstündeki adet göstergeleri)
   ============================================================ */

.tt-sayac-satiri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-8);
  margin-bottom: var(--tt-space-12);
}

.tt-sayac {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-4);
  min-width: 120px;
  padding: var(--tt-space-8) var(--tt-space-12);
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
}

.tt-sayac__etiket {
  font-size: 12px;
  color: var(--tt-text-secondary);
}

.tt-sayac__deger {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tt-text);
}

/* ---------------------------------------------------------------------------
   Ayarlar — dosya tipli ayar alanı (logo, favicon, varsayılan görseller).
   Değer bir Dosyalar.Id'dir; önizleme kısa ömürlü imzalı URL ile yüklenir.
   --------------------------------------------------------------------------- */
.tt-dosya-alan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tt-space-8);
}

.tt-dosya-alan__onizleme {
  max-width: 160px;
  max-height: 96px;
  object-fit: contain;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background-color: var(--tt-surface-secondary);
  padding: var(--tt-space-4);
}

/* Alan bazında kaydetme hatası (toplu kaydetin kısmi başarısı). */
.tt-field.is-invalid .tt-input,
.tt-field.is-invalid .tt-select,
.tt-field.is-invalid .tt-textarea { border-color: var(--tt-danger); }

.tt-help--hata { color: var(--tt-danger); }
/* Eksik yapılandırma uyarısı (hata değil): ör. şubede Ana KDS tanımlı değil. */
.tt-help--uyari { color: var(--tt-warning); }

/* ============================================================
   21. Pano grafikleri (SDD §116.2)
   Kütüphane YOK: sütun serisi ve oran çubuğu yalnızca CSS'tir.
   ============================================================ */

.tt-seri {
  display: flex;
  align-items: flex-end;
  gap: var(--tt-space-8);
  min-height: 160px;
}

.tt-seri__sutun {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tt-space-4);
  min-width: 0;
}

.tt-seri__bar {
  width: 100%;
  max-width: 48px;
  min-height: 2px;
  border-radius: var(--tt-radius-sm) var(--tt-radius-sm) 0 0;
  background-color: var(--tt-primary);
}

.tt-seri__tutar,
.tt-seri__etiket {
  font-size: 11px;
  color: var(--tt-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tt-seri__tutar {
  font-variant-numeric: tabular-nums;
}

.tt-oranlar {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-8);
}

.tt-oran {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 2fr auto;
  align-items: center;
  gap: var(--tt-space-8);
}

.tt-oran__cizgi {
  display: block;
  height: 8px;
  border-radius: 999px;
  background-color: var(--tt-surface-secondary);
  overflow: hidden;
}

.tt-oran__dolu {
  display: block;
  height: 100%;
  background-color: var(--tt-primary);
}

.tt-oran__deger {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--tt-text-secondary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .tt-oran {
    grid-template-columns: 1fr;
    gap: var(--tt-space-4);
  }
  .tt-seri__tutar { display: none; }
}

/* ============================================================
   22. Bildirim merkezi (SDD §117.1)
   Topbar'da zil + okunmamış sayacı; açılır panelde filtre çipleri
   ve bağlama göre eylem taşıyan bildirim kartları.
   ============================================================ */

.tt-chip {
  padding: 4px 10px;
  border: 1px solid var(--tt-border);
  border-radius: 999px;
  background-color: var(--tt-surface);
  color: var(--tt-text-secondary);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

.tt-chip:hover { border-color: var(--tt-border-strong); }

.tt-chip:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-chip.is-active {
  border-color: var(--tt-primary);
  background-color: var(--tt-primary-subtle);
  color: var(--tt-primary);
  font-weight: 600;
}

.tt-bildirim {
  position: relative;
  display: flex;
  align-items: center;
}

.tt-bildirim__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-md);
  background: none;
  color: inherit;
  cursor: pointer;
}

.tt-bildirim__btn:hover { border-color: var(--tt-border); }

.tt-bildirim__btn:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

/*
 * Zil rengi = bildirimlerin TOPLU durumu. Öncelik (tt-bildirim.js `zilDurumu`):
 *   okunmamış > 0                      → kırmızı
 *   okunmamış = 0 ve çözülmemiş > 0    → yeşil
 *   ikisi de yok                       → nötr
 *
 * Zil gövdesi `currentColor` ile çizildiği için butonun `color`'ını değiştirmek
 * yeterlidir; ayrı bir ikon varyantı gerekmez.
 *
 * NÖTR durum bilerek `--tt-text`tir, sabit beyaz DEĞİL: topbar zemini açık temada
 * `--tt-surface` = #FFFFFF'tir ve sabit beyaz zil görünmez olurdu. `--tt-text`
 * koyu temada zaten beyaza yakındır (#F3F7F6), açık temada okunur kalır.
 */
.tt-bildirim__btn { color: var(--tt-text); }

.tt-bildirim__btn.is-okunmamis { color: var(--tt-danger); }

.tt-bildirim__btn.is-cozulmemis { color: var(--tt-success); }

/* Zil ikonu saf CSS: gövde + tokmak (ikon fontu/SVG bağımlılığı yok). */
.tt-bildirim__zil {
  position: relative;
  display: block;
  width: 13px;
  height: 12px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}

.tt-bildirim__zil::before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -2px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
}

.tt-bildirim__zil::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background-color: currentColor;
}

.tt-bildirim__sayac {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: var(--tt-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.tt-bildirim__pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1200;
  width: min(420px, calc(100vw - 24px));
  max-height: min(70vh, 620px);
  display: flex;
  flex-direction: column;
  background-color: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  box-shadow: 0 12px 32px rgb(0 0 0 / 18%);
}

.tt-bildirim__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-8);
  padding: var(--tt-space-12);
  border-bottom: 1px solid var(--tt-border);
}

.tt-bildirim__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--tt-text);
}

.tt-bildirim__filtreler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-4);
  padding: var(--tt-space-8) var(--tt-space-12);
  border-bottom: 1px solid var(--tt-border);
}

.tt-bildirim__araclar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-8);
  padding: var(--tt-space-8) var(--tt-space-12);
  border-bottom: 1px solid var(--tt-border);
}

.tt-bildirim__liste {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--tt-space-8);
}

.tt-bildirim__bos {
  margin: 0;
  padding: var(--tt-space-16);
  color: var(--tt-text-secondary);
  font-size: 13px;
  text-align: center;
}

.tt-bildirim__oge {
  padding: var(--tt-space-8) var(--tt-space-12);
  border: 1px solid var(--tt-border);
  border-left-width: 3px;
  border-radius: var(--tt-radius-sm);
  margin-bottom: var(--tt-space-8);
  background-color: var(--tt-surface);
}

.tt-bildirim__oge:last-child { margin-bottom: 0; }

.tt-bildirim__oge.is-okunmamis { background-color: var(--tt-surface-secondary); }

.tt-bildirim__oge--bilgi { border-left-color: var(--tt-border-strong); }
.tt-bildirim__oge--uyari { border-left-color: var(--tt-warning); }
.tt-bildirim__oge--kritik { border-left-color: var(--tt-danger); }

.tt-bildirim__oge-ust {
  display: flex;
  align-items: center;
  gap: var(--tt-space-4);
  margin-bottom: var(--tt-space-4);
}

.tt-bildirim__tur {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--tt-text-secondary);
}

.tt-bildirim__tarih {
  margin-left: auto;
  font-size: 11px;
  color: var(--tt-text-secondary);
}

.tt-bildirim__oge-baslik {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tt-text);
}

.tt-bildirim__oge-mesaj {
  margin: 0 0 var(--tt-space-8);
  font-size: 12px;
  color: var(--tt-text-secondary);
  overflow-wrap: anywhere;
}

.tt-bildirim__oge-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-4);
}

@media (max-width: 480px) {
  .tt-bildirim__pop {
    position: fixed;
    top: 56px;
    right: 8px;
    left: 8px;
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   Plan kilidi — SDD §119.1
   Firmanın paketine dahil OLMAYAN modül menüde soluk görünür ve kilit rozeti alır.
   Bağlantı gizlenmez ve tıklanabilir kalır; yetki/paket kararı sunucudadır (§6.3).
   --------------------------------------------------------------------------- */

.tt-plan-kilit {
  margin-left: var(--tt-space-6);
  font-size: 0.75em;
  line-height: 1;
  opacity: 0.85;
}

.is-plan-kilitli > .tt-sidebar-menu__link,
.is-plan-kilitli.tt-sidebar-menu__link {
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   Üyelik rozeti — SDD §74 / §51
   Topbar kullanıcı menüsünde kalan gün. Eşiğe yaklaşınca uyarı rengine döner.
   --------------------------------------------------------------------------- */

.tt-uyelik-rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-4);
  padding: var(--tt-space-2) var(--tt-space-8);
  border-radius: var(--tt-radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--tt-text-secondary);
  background-color: var(--tt-surface-secondary);
}

.tt-uyelik-rozet--uyari {
  color: var(--tt-warning);
  background-color: var(--tt-warning-subtle);
}

.tt-uyelik-rozet--kritik {
  color: var(--tt-danger);
  background-color: var(--tt-danger-subtle);
}

/* ── Kod bloğu ve anahtar/değer listesi (SDD §120.6 audit karşılaştırması) ──────
   Audit gövdeleri JSON'dur ve ÖNCESİ/SONRASI yan yana okunur; sarma yapılmadan
   yatay kaydırılır, çünkü satır kırmak JSON yapısını okunmaz hâle getirir. */
.tt-kod-blok {
  margin: 0;
  padding: var(--tt-space-12);
  max-height: 22rem;
  overflow: auto;
  font-family: var(--tt-font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tt-text);
  background: var(--tt-surface-secondary);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  white-space: pre;
}

.tt-kv {
  display: grid;
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
  gap: var(--tt-space-4) var(--tt-space-12);
  margin: var(--tt-space-16) 0 0;
}

.tt-kv dt {
  color: var(--tt-text-muted);
  font-size: 0.8125rem;
}

.tt-kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   tt-stepper — SDD §119.4 / FAZ 17 §23: kurulum sihirbazı adım göstergesi.

   Yatay, sarmalayan bir liste; her adım tıklanabilir. Tamamlanan adım (is-done)
   başarı rengiyle işaretlenir. Kendi bileşen katmanımızdadır (tt-*), dışarıdan
   bir UI kütüphanesi GETİRİLMEZ.
   --------------------------------------------------------------------------- */
.tt-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-8);
  margin: var(--tt-space-12) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tt-stepper;
}

.tt-stepper__item {
  counter-increment: tt-stepper;
  display: inline-flex;
  align-items: center;
  gap: var(--tt-space-6);
  padding: var(--tt-space-6) var(--tt-space-12);
  font-size: 0.8125rem;
  color: var(--tt-text-secondary);
  background: var(--tt-surface-secondary);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-pill, 999px);
  cursor: pointer;
}

.tt-stepper__item::before {
  content: counter(tt-stepper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tt-text-muted);
  background: var(--tt-surface);
  border-radius: 50%;
}

.tt-stepper__item:hover,
.tt-stepper__item:focus-visible {
  border-color: var(--tt-primary);
  color: var(--tt-text);
}

.tt-stepper__item.is-done {
  color: var(--tt-text);
  border-color: var(--tt-success, var(--tt-primary));
}

.tt-stepper__item.is-done::before {
  color: var(--tt-text-on-primary);
  background: var(--tt-success, var(--tt-primary));
}

/* ── KDS Emulator (test ortamı) ───────────────────────────────────────── */

.tt-kds-emu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.tt-kds-emu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
  background: var(--tt-surface);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tt-kds-emu-card:hover:not(:disabled),
.tt-kds-emu-card:focus-visible:not(:disabled) {
  border-color: var(--tt-primary);
  box-shadow: var(--tt-shadow-sm);
}

.tt-kds-emu-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tt-kds-emu-card__ad {
  font-weight: 600;
  color: var(--tt-text);
}

.tt-kds-emu-card__meta {
  font-size: 0.8125rem;
  color: var(--tt-text-muted);
}

.tt-kds-emu-frame-wrap {
  position: relative;
  width: 100%;
  height: min(80vh, 900px);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  overflow: hidden;
  background: #0b1220;
}

.tt-kds-emu-frame-wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   Operasyon panosu (Dashboard) — salon / masa / işlem
   ------------------------------------------------------------
   Masaüstü POS kullanımında hedef TEK EKRANDIR: salon şeridi ve işlem
   çubuğu sabit kalır, yalnızca masa ızgarası gerekirse kaydırılır.
   Yükseklik dvh ile hesaplanır (mobil tarayıcı adres çubuğu payı).
   ============================================================ */

.tt-pos {
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-12);
  /* Kabuk başlığı + içerik dolgusu payı; taşarsa yalnızca ızgara kayar. */
  height: calc(100dvh - 190px);
  min-height: 320px;
}

.tt-pos__salonlar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-8);
  flex: 0 0 auto;
}

.tt-pos__salon {
  padding: var(--tt-space-8) var(--tt-space-16);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
  color: var(--tt-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.tt-pos__salon:hover { border-color: var(--tt-primary); }

.tt-pos__salon:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-pos__salon.is-active {
  background: var(--tt-primary);
  border-color: var(--tt-primary);
  color: var(--tt-primary-on);
}

.tt-pos__masalar {
  flex: 1 1 auto;
  min-height: 0;          /* flex çocuğunun kaymasına izin verir */
  overflow: auto;
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface-secondary);
  padding: var(--tt-space-12);
}

/* Masa sayısı arttıkça sütun sayısı kendiliğinden artar; sabit kolon yok. */
.tt-pos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--tt-space-8);
}

.tt-pos__masa {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 84px;
  padding: var(--tt-space-8);
  border: 2px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
  color: var(--tt-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tt-pos__masa:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-pos__masa.is-bos { border-color: var(--tt-success); }
.tt-pos__masa.is-dolu { border-color: var(--tt-danger); }
.tt-pos__masa--rezerve { border-color: var(--tt-warning); }
.tt-pos__masa--kapali,
.tt-pos__masa--temizlik_bekliyor { opacity: 0.7; }

/* Seçili masa yalnız renkle değil KALINLIK + gölge ile de ayrılır:
   renk körlüğünde tek başına renk yeterli ayrım sağlamaz. */
.tt-pos__masa.is-secili {
  border-color: var(--tt-primary);
  box-shadow: 0 0 0 3px var(--tt-focus-ring);
}

.tt-pos__masa-no { font-size: 1.05rem; font-weight: 700; }
.tt-pos__masa-durum { font-size: 0.75rem; color: var(--tt-text-muted); }
.tt-pos__masa-tutar { font-size: 0.8125rem; font-weight: 600; }
.tt-pos__masa-rozet { font-size: 0.75rem; color: var(--tt-text-muted); }

.tt-pos__islemler {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-8);
  padding: var(--tt-space-12);
  border: 1px solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
}

.tt-pos__secim {
  margin: 0;
  font-weight: 600;
  color: var(--tt-text);
}

.tt-pos__eylemler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-8);
}

/* Dar ekranda tek ekran hedefi bırakılır; içerik bozulmadan akar. */
@media (max-width: 767.98px) {
  .tt-pos { height: auto; }
  .tt-pos__masalar { max-height: 55dvh; }
  .tt-pos__grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .tt-pos__eylemler .tt-btn { flex: 1 1 auto; }
}