/**
 * SOSYALVADI — Dünyanın En Gelişmiş UI Polish 2026
 * Eksik gedik kapatma, modern teknoloji, her detay
 * @version 2026.3.16
 */

/* ========== 1. SCROLLBAR — Modern, ince, tema uyumlu ========== */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--primary) 50%, transparent);
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(96,165,250,0.4);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 20%, transparent) transparent;
}
[data-theme="dark"] * {
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

/* ========== 2. TEXT SELECTION — Marka rengi ========== */
::selection {
  background: color-mix(in srgb, var(--primary) 35%, transparent);
  color: var(--text);
}
[data-theme="dark"] ::selection {
  background: rgba(96,165,250,0.4);
  color: #fff;
}

/* ========== 3. TOUCH TARGET — WCAG 2.5.5 min 44x44px (mobil) ========== */
@media (max-width: 768px) {
  .sv-header-nav-link, .sv-icon-btn, button.sv-btn-primary,
  a.sv-action-chip, input[type="submit"], input[type="button"] {
    min-height: var(--touch-min, 44px);
    min-width: var(--touch-min, 44px);
  }
}

/* ========== 4. BUTTON ACTIVE STATE — Basılı feedback (ince) ========== */
button:active:not(:disabled), .sv-action-chip:active {
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  button:active, .sv-action-chip:active { opacity: 1; }
}

/* ========== 5. EMPTY STATE — Tüm listeler için ortak ========== */
.sv-empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--muted);
}
.sv-empty-state-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}
.sv-empty-state-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: 0 0 var(--space-2);
}
.sv-empty-state-desc {
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-5);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.sv-empty-state-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 80%, #000));
  color: #fff;
  border-radius: var(--radius-2);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sv-empty-state-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ========== 6. FORM FEEDBACK — Hata/başarı durumları ========== */
.sv-form-error {
  font-size: var(--fs-sm);
  color: var(--color-error, #dc2626);
  margin-top: var(--space-1);
}
.sv-form-success {
  font-size: var(--fs-sm);
  color: var(--color-success, #059669);
  margin-top: var(--space-1);
}
input.sv-input-error, select.sv-input-error, textarea.sv-input-error {
  border-color: var(--color-error) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-error) 25%, transparent);
}
input.sv-input-success, select.sv-input-success, textarea.sv-input-success {
  border-color: var(--color-success) !important;
}

/* ========== 7. TOAST CONTAINER — Bildirim alanı ========== */
#sv-toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: min(400px, calc(100vw - 32px));
}
.sv-toast {
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border-radius: var(--radius-2);
  box-shadow: var(--elevation-3);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  pointer-events: auto;
  animation: svToastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sv-toast--success { border-left: 4px solid var(--color-success); }
.sv-toast--error { border-left: 4px solid var(--color-error); }
.sv-toast--info { border-left: 4px solid var(--primary); }
.sv-toast-out {
  opacity: 0;
  transform: translateY(8px);
}
@keyframes svToastIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-toast { animation: none; }
}

/* ========== 8. LOADING OVERLAY — AJAX/form submit ========== */
.sv-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.sv-loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.sv-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: svSpinner 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sv-loading-spinner { animation: none; opacity: 0.8; }
}
@keyframes svSpinner {
  to { transform: rotate(360deg); }
}

/* ========== 9. VIEW TRANSITIONS API — Sayfa geçişleri (2024+) ========== */
@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: svFadeOut 0.2s ease-out;
  }
  ::view-transition-new(root) {
    animation: svFadeIn 0.3s ease-out;
  }
}
@keyframes svFadeOut {
  to { opacity: 0; }
}
@keyframes svFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ========== 10. FOCUS TRAP — Modal/dialog için ========== */
.sv-focus-trap:focus {
  outline: none;
}

/* ========== 11. IMAGE LOADING — CLS önleme ========== */
img[loading="lazy"] {
  content-visibility: auto;
}

/* ========== 12. REDUCED MOTION — Eksik animasyonları kapat ========== */
@media (prefers-reduced-motion: reduce) {
  .sv-empty-state-cta:hover {
    transform: none;
  }
  .sv-back-to-top:hover {
    transform: none;
  }
}