/* =============================================================
   base.css — Temel öğeler + Bootstrap override (Faz 1)
   Yükleme sırası: tokens.css → base.css → components.css
   Bootstrap'ten SONRA yüklenir ki override edebilsin.
   ============================================================= */

/* ---------- Gövde ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Başlıklar (Oswald) ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}

h1, .h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2, .h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
h3, .h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

.display-title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* ---------- Bağlantılar ---------- */
a {
  color: var(--brand-sky-dark);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--brand-deep); }

/* ---------- Odak halkası (erişilebilirlik) ---------- */
:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--brand-sky) 70%, white);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Kartlar ---------- */
.card {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ---------- Form alanları (mobil dostu) ---------- */
.form-control,
.form-select {
  min-height: 48px;
  border-radius: var(--radius-sm);
  border-color: var(--border);
  font-family: var(--font-body);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-sky);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--brand-sky) 30%, transparent);
}
.form-label {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

/* =============================================================
   Bootstrap buton / renk override'ları
   BS 5.3 değişkenleri (--bs-btn-*) hedeflenir; specificity yeterli.
   ============================================================= */

/* Birincil buton → açık mavi zemin + lacivert metin */
.btn-primary {
  --bs-btn-bg:            var(--brand-sky);
  --bs-btn-border-color:  var(--brand-sky);
  --bs-btn-color:         var(--brand-deep);
  --bs-btn-hover-bg:      var(--brand-sky-dark);
  --bs-btn-hover-border-color: var(--brand-sky-dark);
  --bs-btn-hover-color:   var(--text-inverse);
  --bs-btn-active-bg:     var(--brand-sky-dark);
  --bs-btn-active-border-color: var(--brand-sky-dark);
  --bs-btn-active-color:  var(--text-inverse);
  --bs-btn-disabled-bg:   var(--brand-sky);
  --bs-btn-disabled-border-color: var(--brand-sky);
  --bs-btn-disabled-color: var(--brand-deep);
  font-weight: 600;
}

/* Çerçeveli birincil */
.btn-outline-primary {
  --bs-btn-color:         var(--brand-sky-dark);
  --bs-btn-border-color:  var(--brand-sky);
  --bs-btn-hover-bg:      var(--brand-sky);
  --bs-btn-hover-border-color: var(--brand-sky);
  --bs-btn-hover-color:   var(--brand-deep);
  --bs-btn-active-bg:     var(--brand-sky);
  --bs-btn-active-border-color: var(--brand-sky);
  --bs-btn-active-color:  var(--brand-deep);
  font-weight: 600;
}

/* Altın aksiyon butonu (kupa vurgusu) */
.btn-gold {
  --bs-btn-bg:            var(--accent-gold);
  --bs-btn-border-color:  var(--accent-gold);
  --bs-btn-color:         var(--brand-deep);
  --bs-btn-hover-bg:      var(--accent-gold-dark);
  --bs-btn-hover-border-color: var(--accent-gold-dark);
  --bs-btn-hover-color:   var(--text-inverse);
  --bs-btn-active-bg:     var(--accent-gold-dark);
  --bs-btn-active-color:  var(--text-inverse);
  font-weight: 700;
}

/* Tüm butonlar minimum dokunma alanını korur */
.btn {
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-sm { min-height: 36px; }

/* Bağlantı tonu yardımcıları */
.text-brand     { color: var(--brand-sky-dark) !important; }
.text-deep      { color: var(--brand-deep) !important; }
.text-gold      { color: var(--accent-gold-dark) !important; }
.text-muted     { color: var(--text-muted) !important; }
.bg-surface     { background-color: var(--surface) !important; }
.bg-surface-alt { background-color: var(--surface-alt) !important; }

/* Bootstrap "primary" rozet/arka plan tonu */
.bg-primary  { background-color: var(--brand-sky) !important; }
.badge.bg-primary { color: var(--brand-deep); }

/* ---------- Konteyner alt boşluğu (mobil tab bar için) ---------- */
.app-main {
  min-height: calc(100vh - var(--navbar-h));
  padding-top: var(--space-5);
  padding-bottom: var(--space-6);
}

/* Mobilde alt tab bar açıkken içerik gizlenmesin */
@media (max-width: 767.98px) {
  body.has-tabbar .app-main {
    padding-bottom: calc(var(--tabbar-h) + var(--space-4));
  }
}