/*
 * google.xtro.ovh — ortak tema temeli (#18)
 * Merkezi HSL renk paleti + CSS değişkenleri. Tek noktadan (bootstrap enjeksiyonu) tüm sayfalara yüklenir.
 *
 * ÖNEMLİ: Bu dosya mevcut GÖRÜNÜMÜ DEĞİŞTİRMEZ. Sadece :root değişkenleri ve `gx-` önekli
 * yardımcı sınıflar tanımlar; hiçbir genel seçiciyi (body, .card, table...) EZMEZ.
 * View'ler kademeli olarak hex renkleri var(--...) ile değiştirdikçe merkezî tema/temalandırma devreye girer.
 */
:root {
  /* HSL ton çıpaları — tek yerden ayarlanır */
  --h-accent: 226;   /* lacivert gövde */
  --h-brand:  153;   /* marka yeşili */

  /* Yüzeyler */
  --bg:        hsl(226 48% 8%);    /* ~#0b1020 */
  --panel:     hsl(226 44% 14%);   /* ~#141b33 */
  --panel-2:   hsl(225 40% 18%);
  --border:    hsl(226 39% 27%);   /* ~#2a3760 */

  /* Metin */
  --text:      hsl(228 100% 95%);  /* ~#e7ecff */
  --muted:     hsl(214 25% 66%);   /* ~#9aabbb */
  --muted-2:   hsl(226 30% 60%);   /* ~#7a88b8 */

  /* Anlamsal renkler */
  --primary:        hsl(153 73% 63%);  /* ~#5ee6a8 */
  --primary-ink:    hsl(158 74% 8%);   /* ~#06231a (yeşil buton yazısı) */
  --danger:         hsl(345 100% 80%); /* ~#ff9bb0 */
  --danger-strong:  hsl(0 100% 71%);   /* ~#ff6b6b */
  --warn:           hsl(40 74% 63%);   /* ~#e6b85e */
  --ok:             hsl(147 78% 65%);
  --info:           hsl(205 90% 66%);

  /* Ölçü / biçim */
  --radius:    12px;
  --radius-lg: 16px;
  --shadow:    0 10px 40px rgba(0, 0, 0, .40);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .28);
  --transition: .18s ease;

  /* Glassmorphism */
  --glass-bg:     hsl(226 44% 14% / .55);
  --glass-border: hsl(226 39% 40% / .35);
  --glass-blur:   12px;
}

/* ---- gx- önekli yardımcı sınıflar (opt-in; mevcut stilleri etkilemez) ---- */
.gx-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.gx-card:hover { box-shadow: var(--shadow); }

.gx-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow);
}

.gx-fade { animation: gx-fade-in var(--transition); }
@keyframes gx-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.gx-btn {
  background: var(--primary); color: var(--primary-ink);
  border: 0; border-radius: 8px; padding: 10px 16px;
  font-weight: 700; cursor: pointer; transition: filter var(--transition);
}
.gx-btn:hover { filter: brightness(1.08); }

.gx-muted { color: var(--muted); }
.gx-danger { color: var(--danger); }
.gx-warn { color: var(--warn); }
.gx-ok { color: var(--ok); }

/* Erişilebilirlik: hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce) {
  .gx-card, .gx-btn { transition: none; }
  .gx-fade { animation: none; }
}