/**
 * AssurePort — Shared Components (badge, button)
 * v1.0 (2026-08-07) — Marketing UI/UX Kampanyası #18 FOUNDATION.
 *
 * Bu dosya design-tokens.css'teki --badge-*/--btn-* token'larını tüketen
 * PAYLAŞILAN, tekrar-kullanılabilir sınıflardır. `design-tokens.css` ÖNCE
 * link edilmiş olmalı (bu dosya onun tanımladığı custom property'lere
 * bağımlı, kendi renk sabiti taşımaz).
 *
 * DURUM (2026-08-07): Bu dosya HENÜZ hiçbir HTML sayfasına link edilmedi.
 * Marketing sayfaları token-setini bir sonraki fazda (MP1, review #9 shared
 * header/footer ile birlikte) per-page adopt edecek. Console (app.html)
 * kendi yerel .btn tanımını (satır ~421-463) KORUYOR — bu dosya ona
 * dokunmaz/link edilmez. .btn buradaki kural seti ile app.html'deki yerel
 * kural seti AYNI token değerlerini üretir (bkz. design-tokens.css
 * "BUTTON VARIANT TOKENS" yorumu) — ileride console bu dosyaya geçmek
 * isterse görsel fark olmaz.
 *
 * Kullanım (ileride, bir marketing sayfasında):
 *   <link rel="stylesheet" href="/assets/design-tokens.css">
 *   <link rel="stylesheet" href="/assets/components.css">
 *   <span class="badge live">LIVE</span>
 *   <button class="btn primary">Get started</button>
 */

/* ============================================================
   BADGE — status/rozet bileşeni (LIVE / IN-DEVELOPMENT / PLANNED / SOON)
   Renk körü a11y: metin her zaman ikon/harf ile birlikte kullanılmalı
   (bu sınıf yalnız renk-kontrast garantisi verir, ikon eklemek sayfanın işi).
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.4;
  white-space: nowrap;
}

.badge.live {
  color: var(--badge-live-fg);
  background: var(--badge-live-bg);
  border: 1px solid var(--badge-live-border);
}
.badge.dev,
.badge.in-development {
  color: var(--badge-dev-fg);
  background: var(--badge-dev-bg);
  border: 1px solid var(--badge-dev-border);
}
.badge.planned {
  color: var(--badge-planned-fg);
  background: var(--badge-planned-bg);
  border: 1px solid var(--badge-planned-border);
}
.badge.soon {
  color: var(--badge-soon-fg);
  background: var(--badge-soon-bg);
  border: 1px solid var(--badge-soon-border);
}

/* ============================================================
   BUTTON — console'daki .btn/.btn.primary/.btn.secondary/.btn.ghost/
   .btn.destructive ile birebir görsel eşleniği (bkz. dosya başlığı notu).
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
}
.btn:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-fg);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
}

/* primary — dolu beacon fill (#C63D22 üstü beyaz metin = 5.13:1, AA) */
.btn.primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-fg);
  box-shadow: var(--shadow-cta);
}
.btn.primary:hover {
  background: var(--btn-primary-hover-bg);
  color: var(--btn-primary-fg);
  transform: translateY(-1px);
}
.btn.primary:active { transform: none; }

/* secondary — harbor outline (#12616B üstü beyaz metin = 5.3:1, AA) */
.btn.secondary {
  background: transparent;
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-fg);
}
.btn.secondary:hover {
  background: var(--btn-secondary-hover-bg);
  border-color: var(--btn-secondary-fg);
  color: var(--btn-secondary-fg);
}

/* ghost — çerçevesiz düşük-vurgu */
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--btn-ghost-fg);
}
.btn.ghost:hover {
  background: var(--btn-ghost-hover-bg);
  color: var(--btn-ghost-hover-fg);
}

/* destructive — critical outline (#7C203A üstü beyaz metin = 9.3:1, AA).
   `.danger` console'daki gibi alias olarak korunur. */
.btn.danger,
.btn.destructive {
  background: transparent;
  border-color: var(--btn-destructive-border);
  color: var(--btn-destructive-fg);
}
.btn.danger:hover,
.btn.destructive:hover {
  background: var(--btn-destructive-hover-bg);
  border-color: var(--btn-destructive-fg);
  color: var(--btn-destructive-fg);
}