/* ==========================================================================
 * HIZIRBEY DESIGN SYSTEM - TABS COMPONENT
 * Ownership: Public HDS Tabs presentation contract
 * Root: .hds-tabs
 * Children: list, tab, panels, panel
 * Behavior: data-hds-tabs-*
 * Variants: horizontal, vertical, compact, fill, pill, underline, links
 * Hooks: --hds-tabs-tab-min-height, --hds-tabs-tab-padding-inline (T3.4),
 *        --hds-tabs-gap, --hds-tabs-tab-font-size, --hds-tabs-tab-font-weight (26.10.2026),
 *        --hds-tabs-tab-color, --hds-tabs-tab-min-width, --hds-tabs-selected-surface,
 *        --hds-tabs-selected-color, --hds-tabs-selected-border, --hds-tabs-underline-color
 * Güncellendi: 19.10.2026 · T3.4 (fill varyantı + sekme ölçü hook'ları) · T5.3c (pill) · 26.10.2026 (links, underline, yazı kancaları)
 * Sürüm: 1.3.0
 * ========================================================================== */

/* =========================================================================
 * >>> Tabs Base
 * ========================================================================= */

.hds-tabs { min-width: 0; max-width: 100%; }
.hds-tabs__list {
  display: flex;
  gap: var(--hds-tabs-gap, 0.35rem);
  max-width: 100%;
  overflow-x: auto;
  padding: 0.25rem;
  background: var(--color-surface-soft, #f3f6f8);
  border: 1px solid var(--color-border, #dce4e9);
  border-radius: 0.65rem;
  scrollbar-width: thin;
}
.hds-tabs__tab {
  flex: 0 0 auto;
  min-height: var(--hds-tabs-tab-min-height, 2.5rem);
  padding: 0.55rem var(--hds-tabs-tab-padding-inline, 0.85rem);
  color: var(--color-text-muted, #5d6870);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  font: inherit;
  font-size: var(--hds-tabs-tab-font-size, 0.82rem);
  font-weight: var(--hds-tabs-tab-font-weight, 750);
  white-space: nowrap;
}
.hds-tabs__tab:hover:not(:disabled) { color: var(--color-text, #24384a); background: #fff; }
.hds-tabs__tab:focus-visible { outline: 0.18rem solid color-mix(in srgb, var(--color-primary, #176da6) 35%, transparent); outline-offset: 0.1rem; }
.hds-tabs__panels { min-width: 0; }
.hds-tabs__panel { min-width: 0; padding-block: 0.85rem; overflow-wrap: anywhere; }
.hds-tabs[data-hds-tabs-enhanced="true"] .hds-tabs__panel[hidden] { display: none; }
.hds-tabs--vertical { display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); gap: 1rem; }
.hds-tabs--vertical .hds-tabs__list { flex-direction: column; overflow: visible; }
.hds-tabs--vertical .hds-tabs__tab { justify-content: flex-start; text-align: left; white-space: normal; }
.hds-tabs--compact .hds-tabs__tab { min-height: var(--hds-tabs-tab-min-height, 2rem); padding: 0.38rem var(--hds-tabs-tab-padding-inline, 0.65rem); font-size: var(--hds-tabs-tab-font-size, 0.75rem); }
/* fill (Tabs::fill()): sekmeler listeyi eşit paylaşır, uzun etiket satır kırar (dar sütunlar). */
.hds-tabs--fill .hds-tabs__tab { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.35; }

/* Opt-in sekme ikonu (Tabs::tab(..., icon: semantic key)). İkon currentColor
   kullanır: pasif muted, hover metin, seçili primary rengini metinle izler. */
.hds-tabs__tab.has-icon { display: inline-flex; align-items: center; gap: 0.45rem; }
.hds-tabs__icon { display: inline-grid; flex: none; width: 1.05rem; height: 1.05rem; }
.hds-tabs__icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.hds-tabs--compact .hds-tabs__icon { width: 0.9rem; height: 0.9rem; }

/* <<< Tabs Base */

/* =========================================================================
 * >>> Pill (Tabs::pill() · T5.3c, 2026-10-19)
 * Hap görünümlü sekmeler: beyaz liste, açık zeminli düğmeler, seçili sekme
 * mavi hap + beyaz ikon. Dar ekranda tek satır, yatay kaydırma.
 * (Eski: Yarışma Studio definition-studio.css "Sekme tasarımı".)
 * ========================================================================= */

.hds-tabs.hds-tabs--pill .hds-tabs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem;
  background: #fff;
  border: 0;
  border-radius: 0.6rem;
}

.hds-tabs.hds-tabs--pill .hds-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem 1rem;
  background: #f0f4fa;
  color: #435a76;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  font-size: var(--hds-tabs-tab-font-size, 0.82rem);
  font-weight: var(--hds-tabs-tab-font-weight, 600);
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.hds-tabs.hds-tabs--pill .hds-tabs__tab:hover {
  background: #e4edf9;
  color: #174b83;
}

.hds-tabs.hds-tabs--pill .hds-tabs__tab[aria-selected="true"] {
  background: linear-gradient(135deg, #2587f5, #0862e7);
  color: #fff;
  border-color: #1675ed;
  border-radius: 0.45rem;
  box-shadow: 0 3px 8px rgb(20 104 226 / 18%);
}

.hds-tabs.hds-tabs--pill .hds-tabs__tab[aria-selected="true"] svg {
  color: #fff;
}

@media (max-width: 760px) {
  .hds-tabs.hds-tabs--pill .hds-tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .hds-tabs.hds-tabs--pill .hds-tabs__tab {
    flex: 0 0 auto;
  }
}

/* <<< Pill */

/* =========================================================================
 * >>> Links (Tabs::link() · 26.10.2026)
 * Sayfalar arası bağlantı sekmeleri: <a> düğme gibi durur, alt çizgisiz.
 * ========================================================================= */

.hds-tabs--links .hds-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

.hds-tabs--links .hds-tabs__tab:hover { text-decoration: none; }

/* <<< Links */

/* =========================================================================
 * >>> Underline (Tabs::underline() · 26.10.2026)
 * Çerçevesiz liste; sekmenin üst köşeleri yuvarlak, seçili sekmede alt çizgi.
 * Renkler kancayla: --hds-tabs-selected-surface / -color / -border, --hds-tabs-underline-color.
 * ========================================================================= */

.hds-tabs.hds-tabs--underline .hds-tabs__list {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.hds-tabs.hds-tabs--underline .hds-tabs__tab {
  min-width: var(--hds-tabs-tab-min-width, 4rem);
  color: var(--hds-tabs-tab-color, var(--color-text, #24384a));
  border-bottom: 3px solid transparent;
  border-radius: 0.35rem 0.35rem 0 0;
}

.hds-tabs.hds-tabs--underline .hds-tabs__tab.is-selected {
  color: var(--hds-tabs-selected-color, var(--color-primary, #176da6));
  background: var(--hds-tabs-selected-surface, transparent);
  border-color: var(--hds-tabs-selected-border, transparent);
  border-bottom-color: var(--hds-tabs-underline-color, var(--color-primary, #176da6));
  box-shadow: none;
}

/* <<< Underline */