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

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

.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;
}

.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;
}

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

.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;
}

.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. 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; }
}

@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; }
}