/* ==========================================================================
   BASE / RESET / TİPOGRAFİ
   Genel sayfa davranışı, tipografi ve tekrar kullanılan yardımcı sınıflar.
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--w2g-font);
  background: var(--w2g-bg);
  color: var(--w2g-text-dark);
  font-size: var(--w2g-fs-base);
  transition: var(--w2g-transition);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--w2g-font);
  font-weight: 600;
  color: var(--w2g-text-dark);
}

a {
  text-decoration: none;
  color: var(--w2g-secondary);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #c7d3e2;
  border-radius: var(--w2g-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--w2g-secondary);
}

/* ---- Odak Durumu (Erişilebilirlik) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--w2g-secondary);
  outline-offset: 2px;
}

/* ---- Genel Yardımcı Sınıflar ---- */
.text-primary-w2g { color: var(--w2g-primary) !important; }
/* ---- --w2g-primary koyu bir mor; sadece açık zeminlerde okunur olacak
   şekilde tasarlanmış. Koyu temada kart/arkaplan üzerinde neredeyse
   görünmez kaldığı için burada okunur bir karşılık tanımlanır. ---- */
[data-theme="dark"] .text-primary-w2g { color: var(--w2g-text-dark) !important; }
.text-secondary-w2g { color: var(--w2g-secondary) !important; }
.text-accent-w2g { color: var(--w2g-accent) !important; }
.text-muted-w2g { color: var(--w2g-text-muted) !important; }

.bg-primary-w2g { background: var(--w2g-primary) !important; }
.bg-secondary-w2g { background: var(--w2g-secondary) !important; }
.bg-accent-w2g { background: var(--w2g-accent) !important; }
.bg-soft-blue { background: var(--w2g-secondary-light) !important; }
.bg-soft-green { background: var(--w2g-accent-light) !important; }

.fw-600 { font-weight: 600; }
.fw-500 { font-weight: 500; }
.fs-xs { font-size: var(--w2g-fs-xs); }
.fs-sm { font-size: var(--w2g-fs-sm); }
.fs-lg { font-size: var(--w2g-fs-lg); }

.rounded-w2g { border-radius: var(--w2g-radius) !important; }
.rounded-w2g-sm { border-radius: var(--w2g-radius-sm) !important; }
.shadow-w2g-sm { box-shadow: var(--w2g-shadow-sm) !important; }
.shadow-w2g-md { box-shadow: var(--w2g-shadow-md) !important; }
.shadow-w2g-lg { box-shadow: var(--w2g-shadow-lg) !important; }

/* ---- Glassmorphism Yardımcı Sınıfı ---- */
.glass-panel {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .glass-panel {
  background: rgba(24, 36, 50, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---- Bootstrap Buton Override ---- */
.btn {
  border-radius: var(--w2g-radius-sm);
  font-weight: 500;
  padding: 0.55rem 1.25rem;
  transition: var(--w2g-transition);
}
.btn:active { transform: scale(0.97); }

.btn-primary-w2g {
  background: var(--w2g-primary);
  border-color: var(--w2g-primary);
  color: #fff;
}
.btn-primary-w2g:hover {
  background: var(--w2g-primary-dark);
  border-color: var(--w2g-primary-dark);
  color: #fff;
  box-shadow: var(--w2g-shadow-hover);
}

.btn-accent-w2g {
  background: var(--w2g-accent);
  border-color: var(--w2g-accent);
  color: #fff;
}
.btn-accent-w2g:hover {
  filter: brightness(0.92);
  color: #fff;
}

.btn-outline-w2g {
  background: transparent;
  border: 1.5px solid var(--w2g-border);
  color: var(--w2g-text-muted);
}
.btn-outline-w2g:hover {
  border-color: var(--w2g-secondary);
  color: var(--w2g-secondary);
  background: var(--w2g-secondary-light);
}

/* ---- Form Kontrolleri ---- */
.form-control, .form-select {
  border-radius: var(--w2g-radius-sm);
  border: 1.5px solid var(--w2g-border);
  padding: 0.6rem 0.9rem;
  font-size: var(--w2g-fs-base);
  background-color: var(--w2g-card);
  color: var(--w2g-text-dark);
  transition: var(--w2g-transition);
}
/* ---- select'in sağındaki ok ikonu için yer aç — yoksa uzun seçenek
   metinleri (ör. "Tarih (Yeni → Eski)") ikonun üzerine biner. ---- */
.form-select {
  padding-right: 2.25rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--w2g-secondary);
  box-shadow: 0 0 0 4px var(--w2g-secondary-light);
}
.form-label {
  font-weight: 500;
  font-size: var(--w2g-fs-sm);
  color: var(--w2g-text-dark);
  margin-bottom: 0.4rem;
}

/* ---- Input İkon Wrapper ---- */
.input-icon-group {
  position: relative;
}
.input-icon-group i,
.input-icon-group .input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--w2g-text-light);
  font-size: 0.9rem;
  pointer-events: none;
}
.input-icon-group .form-control,
.input-icon-group .form-select {
  padding-left: 40px;
}

/* ---- Validation ---- */
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: var(--w2g-danger);
}
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: var(--w2g-success);
}
.invalid-feedback { font-size: var(--w2g-fs-xs); }

@media (max-width: 767.98px) {
  body { font-size: var(--w2g-fs-sm); }
}