/* safkan-premium.css — Siyah-Altın Premium Tema (AYRI OVERRIDE dosyası).
   terminal.css ve auth.css'e DOKUNULMADI — bu dosya onlardan SONRA yüklenir
   ve sadece renk/görünüm değişkenlerini/kurallarını ezer. DOM/JS/mantık aynı. */

/* ============================================================
   1) GİRİŞ / KAYIT / MİSAFİR (auth.css değişkenlerini ezer)
   Bej/kahverengi tamamen kalkıyor → siyah-altın. Büyük font/buton korunuyor.
   ============================================================ */
:root {
  --a-bg: #0a0a0a;
  --a-panel: #141414;
  --a-border: rgba(212, 175, 55, 0.35);
  --a-text: #ededed;
  --a-muted: #b0b0b0;
  --a-accent: #d4af37;
  --a-accent-dim: rgba(212, 175, 55, 0.12);
  --a-green: #22c55e;
  --a-red: #ef4444;
  --a-red-bg: rgba(239, 68, 68, 0.12);
}

body.auth-body::before {
  /* at silüeti artık altın tonunda (önceki kahverengi SVG yerine) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200"><path fill="%23D4AF37" opacity="0.05" d="M60 150c-10-30 5-55 30-65 5-20 25-35 45-30 8-15 30-20 42-8 18-4 34 8 34 24 12 2 20 14 16 26 10 8 8 24-4 30-2 14-16 22-28 18-8 10-22 12-32 4-16 6-32-4-34-20-16-2-28-16-26-32-14 0-24-10-24-22-8 4-14 12-19 25z"/></svg>');
}
/* Gerçek arka plan görseli (varsa) — dosya yoksa tarayıcı sessizce görmezden
   gelir, altın-siyah düz zemin (--a-bg) zaten altta durur, kırık ikon çıkmaz. */
body.auth-body {
  background-color: var(--a-bg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url('/static/img/arkaplan.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
@media (max-width: 480px) {
  body.auth-body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url('/static/img/arkaplan.png');
    background-repeat: no-repeat;
  }
}
.auth-card {
  box-shadow: 0 4px 28px rgba(212, 175, 55, 0.10);
}
.auth-field input[type="text"],
.auth-field input[type="tel"],
.auth-field input[type="password"],
.auth-field input[type="date"] {
  background: #0f0f0f;
  color: var(--a-text);
}
.auth-btn {
  color: #0a0a0a; /* altın buton üstünde KOYU yazı */
}
.auth-btn.secondary {
  background: transparent;
  color: var(--a-accent);
}
.auth-btn.ghost {
  background: transparent;
  color: var(--a-muted);
}

/* ============================================================
   2) ANA DASHBOARD — üst bar + koşu kartları + at tablosu
   (terminal.css değişkenlerini ezer)
   ============================================================ */
:root {
  --bg: #0a0a0a;
  --panel: #0a0a0a;
  --panel2: #141414;
  --border: rgba(212, 175, 55, 0.28);
  --text: #ededed;
  --muted: #b0b0b0;
  --amber: #d4af37;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background-color: var(--bg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)), url('/static/img/arkaplan.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.brand h1 { font-family: "Playfair Display", Georgia, serif; color: var(--amber); letter-spacing: 0.03em; }
.topbar { background: linear-gradient(180deg, rgba(20,20,20,0.85) 0%, rgba(10,10,10,0.85) 100%); }

/* Arka plan görseli panellerin İÇİNE sızıp okunabilirliği bozmasın diye
   ana içerik yüzeyleri opak tutuluyor. */
.panel { background: rgba(10, 10, 10, 0.88); }
.table-wrap, .data-table tbody { background: #101010; }
.ticker-wrap { background: #0a0a0a; }

.btn { background: var(--amber); border-color: #b8942e; color: #0a0a0a; font-weight: 700; }
.btn:hover { background: #b8942e; }
.mode-btn.active { background: var(--amber); color: #0a0a0a; }

/* Basit/PRO toggle — büyük ve altın vurgulu, belirgin. */
.mode-toggle-buyuk { transform: scale(1.1); margin: 0 0.4rem; }
.mode-toggle-buyuk .mode-btn { padding: 0.55rem 1rem; font-size: 0.9rem; }
.mode-btn-pro { border-left: 1px solid rgba(212, 175, 55, 0.5); color: var(--amber); font-weight: 800; }
.mode-btn-pro.active { box-shadow: 0 0 10px rgba(212, 175, 55, 0.45); }

/* PRO bilgi/gerekli modali */
.pro-modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75);
  display: flex; align-items: center; justify-content: center; z-index: 999;
}
.pro-modal {
  background: #141414; border: 1px solid rgba(212, 175, 55, 0.5); border-radius: 12px;
  padding: 1.5rem; max-width: 380px; width: 90%; text-align: center;
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.15);
}
.pro-modal h3 { font-family: "Playfair Display", Georgia, serif; color: var(--amber); font-size: 1.3rem; margin-bottom: 0.6rem; }
.pro-modal p { color: var(--text); font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.1rem; }
.pro-modal-actions { display: flex; gap: 0.6rem; justify-content: center; }
.pro-modal-actions .btn, .pro-modal-actions a.btn {
  min-height: 44px; padding: 0 1.1rem; display: inline-flex; align-items: center;
  text-decoration: none; border-radius: 8px;
}
.pro-modal-actions .btn.secondary { background: transparent; border: 1px solid var(--muted); color: var(--muted); }
.tab.active { background: rgba(212, 175, 55, 0.15); border-color: var(--amber); color: var(--amber); }
.race-cell:hover, .race-cell.active { border-color: var(--amber); }
.badge.live { background: rgba(212, 175, 55, 0.15); color: var(--amber); }
.ticker-wrap { background: #0a0a0a; }

/* Koşu özet kartları (banko dışındaki kutular nötr siyah-altın çerçeveli) */
.sum-item { background: #141414; border-color: var(--border); }
.sum-item.sum-banko {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), #141414);
  border-color: var(--amber);
}
.sum-item.sum-banko .sum-val { color: var(--amber); }

/* At tablosu */
.data-table th { background: #141414; color: var(--muted); }
.data-table tbody tr:hover { background: #1a1a1a; }
.data-table tbody tr.selected { background: rgba(212, 175, 55, 0.10); }
.data-table tbody tr.winner-row { box-shadow: inset 0 0 0 1px var(--amber); }

/* ============================================================
   3) KUPON PANELİ
   ============================================================ */
.kupon-blok { background: #141414; border-color: var(--border); }
.kupon-kategori.banko { background: var(--amber); color: #0a0a0a; }
.kupon-kategori.banko.kanitsiz { background: rgba(212, 175, 55, 0.55); color: #0a0a0a; }
.kupon-kategori.dar { background: rgba(212, 175, 55, 0.12); color: var(--amber); }
.kupon-kategori.genis { background: #1a1a1a; color: var(--muted); }
.kupon-at { background: #0f0f0f; }
.kupon-maliyet-uyari.orta { background: #1a1a1a; color: var(--amber); }
.kupon-maliyet-ok { color: var(--text); }
.kupon-butce-notu { margin-top: 0.35rem; padding: 0.3rem 0.5rem; border-radius: 4px; background: rgba(212,175,55,0.10); color: var(--text); font-size: 0.7rem; }
.kupon-butce-notu.disi { background: rgba(239,68,68,0.10); color: var(--negative); }

/* ============================================================
   4) Kalan paneller — Model Sağlığı, Günlük Performans, At Detayı,
   Chatbot, mobil kartlar (aynı siyah-altın palet ile tutarlı hale getirildi)
   ============================================================ */
.perf-stat { background: #141414; }
.saglik-uyari { background: #1a1a1a; color: var(--amber); }
.saglik-item { background: #141414; }
.rel-track { background: #141414; }
.detail-item { background: #141414; }
.tag.notr { background: #1a1a1a; color: var(--amber); }
.soru-q { background: rgba(212, 175, 55, 0.14); color: var(--amber); }
.hc-detail-grid > div { background: #141414; }
#soruInput { background: #141414; color: var(--text); }

/* ============================================================
   5) Yasal/yardım sayfaları + ortak alt bilgi (footer) linkleri
   ============================================================ */
.yasal-sayfa {
  max-width: 640px;
  margin: 3rem auto;
  padding: 2rem;
  background: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 12px;
  color: var(--text);
}
.yasal-sayfa h1 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--amber);
  margin-bottom: 1rem;
}
.yasal-sayfa .yasal-icerik { color: var(--muted); line-height: 1.6; margin-bottom: 1rem; }
.yasal-sayfa .hint { color: var(--muted); font-size: 0.85rem; margin-bottom: 1.5rem; }

.yasal-icerik-dolu { text-align: left; margin-bottom: 1rem; }
.yasal-icerik-dolu h2 {
  font-family: "Playfair Display", Georgia, serif;
  color: var(--amber);
  font-size: 1.2rem;
  margin: 1.2rem 0 0.6rem;
}
.yasal-icerik-dolu h3 { color: var(--amber); font-size: 1.02rem; margin: 1.1rem 0 0.4rem; }
.yasal-icerik-dolu p { color: var(--text); line-height: 1.6; margin-bottom: 0.7rem; }
.yasal-icerik-dolu ul { color: var(--text); line-height: 1.7; padding-left: 1.3rem; margin-bottom: 0.8rem; }
.yasal-icerik-dolu li { margin-bottom: 0.3rem; }
.yasal-icerik-dolu strong { color: var(--amber); }
.yasal-icerik-dolu .uyari-kutu {
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-top: 1.2rem;
}
.yasal-icerik-dolu .uyari-kutu p { color: var(--text); margin-bottom: 0.3rem; }
.yasal-icerik-dolu .uyari-kutu p:last-child { margin-bottom: 0; color: var(--muted); font-size: 0.85rem; }

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}
.legal-links a {
  color: var(--muted);
  font-size: 0.72rem;
  text-decoration: underline;
}
.legal-links a:hover { color: var(--amber); }