/* ============================================================================
   tabs.css — masaüstündeki sekme çubuğu (Koleksiyon / Kayıt / Hakkında)
   Mobilde gizlenir (bkz. layout.css) — orada her bölme ayrı panel oluyor.
   ============================================================================ */

.tabs {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
}

.tab {
  padding: 0.15rem 0;
  font-size: calc(0.9rem * var(--text-scale));
  font-weight: 500;
  color: var(--fg-faint);
  letter-spacing: 0.01em;
  white-space: nowrap;

  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

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

.tab[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--line);
}

/* Mobilde sekme yok — iki bölme ayrı birer tam ekran panel oluyor.
   Bu kural burada durmak zorunda: layout.css'e yazılsaydı yukarıdaki
   `.tabs { display: flex }` (bu dosya sonra yükleniyor) onu ezerdi. */
@media (max-width: 860px) {
  .tabs { display: none; }
}