/**
 * SV COMPONENTS 2026 — Global UI Component Sistemi
 * CURSOR-TALIMATI: Filtre, chip, segmented, input, select, toolbar standardizasyonu
 * Tüm modüllerde aynı tasarım dili; spacing/radius/height token tabanlı
 * @version 2026.3.1
 */

/* ========== SV-FILTER-PANEL ==========
   Ana filtre kapsayıcısı. İç: toolbar, chip group, arama, CTA
*/
.sv-filter-panel {
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  min-height: var(--control-large);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-medium);
  box-shadow: var(--elevation-1);
  transition: box-shadow 0.2s ease;
}
.sv-filter-panel:hover {
  box-shadow: var(--elevation-2);
}
.sv-filter-panel .sv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  row-gap: var(--space-3);
}

/* ========== SV-TOOLBAR ========== */
.sv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.sv-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* ========== SV-SEGMENTED (Dün/Bugün/Yarın vb.) ========== */
.sv-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  background: var(--bg-subtle);
  padding: var(--space-1);
  border-radius: var(--radius-small);
}
.sv-segmented .sv-segmented-item,
.sv-segmented a,
.sv-segmented [role="tab"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-default);
  padding: 0 var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-small);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.sv-segmented .sv-segmented-item:hover,
.sv-segmented a:hover,
.sv-segmented [role="tab"]:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .sv-segmented .sv-segmented-item:hover,
[data-theme="dark"] .sv-segmented a:hover,
[data-theme="dark"] .sv-segmented [role="tab"]:hover {
  background: rgba(255, 255, 255, 0.08);
}
.sv-segmented .sv-segmented-item.is-active,
.sv-segmented a.is-active,
.sv-segmented [role="tab"][aria-selected="true"] {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--elevation-1);
}

/* ========== SV-CHIP & SV-CHIP-GROUP ========== */
.sv-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sv-chip,
.sv-chip-group .sv-chip,
.sv-chip-group a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-default);
  padding: 0 var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.sv-chip:hover,
.sv-chip-group a:hover {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.08);
}
.sv-chip.is-active,
.sv-chip.is-selected,
.sv-chip-group a.is-active {
  background: rgba(37, 99, 235, 0.15);
  border-color: var(--primary);
  color: var(--primary);
}
[data-theme="dark"] .sv-chip.is-active,
[data-theme="dark"] .sv-chip-group a.is-active {
  background: rgba(96, 165, 250, 0.2);
}

/* ========== SV-INPUT (Arama, metin) ========== */
.sv-input {
  display: block;
  width: 100%;
  min-height: var(--control-default);
  padding: 0 var(--space-4);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-small);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sv-input::placeholder {
  color: var(--muted);
}
.sv-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus);
}

/* ========== SV-SELECT ========== */
.sv-select {
  display: block;
  width: 100%;
  min-height: var(--control-default);
  padding: 0 var(--space-4);
  padding-right: 2.5em;
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sv-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus);
}

/* ========== SV-META-BADGE (Sonuç sayacı, rozet) ========== */
.sv-meta-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-compact);
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-small);
}

/* ========== SV-BTN (CTA butonlar) ========== */
.sv-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-default);
  padding: 0 var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.sv-btn-primary:hover {
  background: color-mix(in srgb, var(--primary) 85%, black);
}
.sv-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-default);
  padding: 0 var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.sv-btn-ghost:hover {
  background: var(--bg-subtle);
  border-color: var(--muted);
}
.sv-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.sv-btn-icon:hover {
  background: var(--bg-subtle);
}

/* ========== SV-VIEW-TOGGLE (Grid/Liste) ========== */
.sv-view-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-default);
}
.sv-view-toggle [aria-pressed="true"],
.sv-view-toggle .is-active {
  background: var(--bg-subtle);
  font-weight: var(--fw-semibold);
}

/* ========== SV-EXPLORE-LINKS / SV-NEARBY-LINKS ========== */
.sv-explore-links,
.sv-nearby-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.sv-explore-links a,
.sv-nearby-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg-subtle);
  border-radius: var(--radius-small);
  text-decoration: none;
  transition: background 0.2s;
}
.sv-explore-links a:hover,
.sv-nearby-links a:hover {
  background: var(--border-subtle);
}