/* aydinlik-tema.css — Yaşlı-dostu AYDINLIK tema (AYRI OVERRIDE dosyası).
   terminal.css, auth.css ve safkan-premium.css'e DOKUNULMADI. Bu dosya
   şablonlarda safkan-premium.css'ten SONRA yüklenir ve sadece renk/boyut
   değişkenlerini/kurallarını ezer. DOM/JS/mantık aynı.
   SIFIR RİSK: bir şey bozulursa <link>'i şablondan kaldırın, eski koyu-altın
   tema anında geri gelir. Giriş/kayıt/misafir ekranları (body.auth-body)
   BİLİNÇLİ OLARAK bu dosyada hiç ele alınmıyor — marka için koyu kalıyor.

   AYDINLIK_TEMA.md maddeleri: 1) zemin+metin  2) panel/kart  3) arka plan
   görseli  4) büyük font+boşluk  5) value renkleri  6) vurgu rengi. */

/* ============================================================
   0) TEMEL DEĞİŞKENLER — çoğu bileşen zaten var(--...) kullandığı için
   bu tek blok onlarca öğeyi otomatik aydınlığa taşır.
   ============================================================ */
:root {
  --bg: #f5f5f0;
  --panel: #ffffff;
  --panel2: #f4f3ee;
  --border: #d8d6ce;
  --text: #1a1a1a;
  --muted: #5a5850;
  --amber: #8a6d1f;        /* 6) vurgu: altın yerine koyu altın/kahve */
  --green: #1a7a3a;        /* 5) value+ */
  --green-dim: #d9f0e0;
  --red: #c0281a;          /* 5) value- */
  --red-dim: #fbdcd8;
}

/* ============================================================
   4) BÜYÜK FONT + BOŞLUK — kök font-size'ı büyütmek rem tabanlı tüm
   font/padding/gap değerlerini orantılı büyütür (tablo, panel, hint...).
   ============================================================ */
html { font-size: 18px; }

body:not(.auth-body) {
  font-size: 1rem;
  line-height: 1.55;
}

/* ============================================================
   1) AYDINLIK ZEMİN + KOYU METİN + 3) ARKA PLAN GÖRSELİ SOLUK/KALKIYOR
   Sadece analiz/panel ekranları (body.auth-body HARİÇ) — giriş ekranı
   marka için koyu kalsın diye buraya dokunulmadı.
   ============================================================ */
body:not(.auth-body) {
  background-color: var(--bg);
  background-image: none; /* koyu at görseli açık zeminde okumayı bozar */
  color: var(--text);
}

.topbar { background: linear-gradient(180deg, #ffffff 0%, #f4f3ee 100%); }
.ticker-wrap { background: #eeece3; }
.ticker-label { color: #fff; } /* koyu altın zemin üstünde beyaz yazı */

/* ============================================================
   2) PANELLER/KARTLAR — beyaz zemin, ince gri kenarlık, hafif gölge
   (terminal.css/safkan-premium.css'te hardcoded koyu renkler vardı,
   var(--panel2) kullanmadıkları için burada tek tek açığa alınıyor).
   ============================================================ */
.panel,
.table-wrap,
.data-table tbody,
.perf-panel, .hata-panel,
.model-saglik-panel,
.chart-block,
.kupon-blok,
.kupon-item,
#soruInput,
.soru-a,
.pro-modal {
  background: var(--panel) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.perf-stat,
.saglik-item,
.rel-track,
.detail-item,
.hc-detail-grid > div,
.kupon-at,
.horse-card,
.sum-item {
  background: var(--panel2) !important;
}

/* Yasal sayfa / abonelik kartları — .yasal-sayfa CSS sınıfıyla, abonelik.html
   ve admin_panel.html ise satır-içi style ile koyu renkler kullanıyor;
   hepsini eşleştirip açık zemine çeviriyoruz. */
.yasal-sayfa,
body:not(.auth-body) [style*="background:rgba(10,10,10,0.9)"],
body:not(.auth-body) [style*="background:#141414"] {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}
body:not(.auth-body) [style*="background:linear-gradient(135deg,rgba(212,175,55,0.18),#141414)"] {
  background: linear-gradient(135deg, rgba(138, 109, 31, 0.15), var(--panel)) !important;
}

.data-table th { background: #ececE4 !important; color: var(--muted) !important; }
.data-table tbody tr:hover { background: #efeee7 !important; }
.data-table tbody tr.selected { background: rgba(138, 109, 31, 0.12) !important; }
.data-table tbody tr.top3-pick {
  background: linear-gradient(90deg, #e8f6ec 0%, #ffffff 100%) !important;
}
.data-table tbody tr.top3-pick:hover { background: #dcefe2 !important; }
.data-table tbody tr.winner-row { box-shadow: inset 0 0 0 2px var(--amber); }
.data-table .top3-badge { color: #fff; }

.mode-btn.active { background: var(--amber) !important; color: #fff !important; }
.tab.active { background: rgba(138, 109, 31, 0.12) !important; border-color: var(--amber) !important; color: var(--amber) !important; }

.saglik-uyari, .tag.notr { background: #f1e9d2 !important; color: var(--amber) !important; }
.kupon-kategori.banko, .banko-tag { color: #fff !important; }
.kupon-kategori.dar { background: rgba(138, 109, 31, 0.12) !important; color: var(--amber) !important; }
.kupon-kategori.genis { background: #ececE4 !important; color: var(--muted) !important; }
.kupon-maliyet-uyari.orta { background: #f1e9d2 !important; color: var(--amber) !important; }
.soru-q { background: #f1e9d2 !important; color: #4a3c10 !important; }
.breakdown .bar-track { background: #e5e3d8 !important; }

/* ============================================================
   4) BÜYÜK BUTON (min 52px) + BÜYÜK TABLO YAZISI (min 16px, burada ~18px)
   ============================================================ */
body:not(.auth-body) .btn {
  min-height: 52px;
  padding: 0.7rem 1.3rem;
  font-size: 1rem;
  border-radius: 8px;
}
body:not(.auth-body) select {
  min-height: 48px;
  font-size: 0.95rem;
  padding: 0.5rem 0.7rem;
}
.data-table, .data-table th, .data-table td { font-size: 1rem !important; }
.data-table td { padding: 0.65rem 0.55rem; }

/* ============================================================
   5) VALUE RENKLERİ — .val-pos/.val-neg/.val-neu zaten var(--green)/
   var(--red)/var(--muted) kullanıyor, üstteki :root bloğu yeterli;
   burada sadece kalınlık/okunurluk için ufak destek.
   ============================================================ */
.val-pos, .val-neg { font-weight: 700; }