/* ============================================================
   Katıl Oyna Kazan — DESIGN TOKEN SİSTEMİ
   Tema motorunun değiştirdiği TEK dosya budur.
   Layout ve etkileşim mantığı bu dosyadan bağımsızdır.
   Yeni sponsor teması = yeni [data-tema="..."] bloğu.
   ============================================================ */

:root {
  /* ---- Zemin ---- */
  --tema-zemin: #0b101f;
  --tema-zemin-derin: #070b16;
  --tema-zemin-kart: #141b30;
  --tema-zemin-kart-2: #1b2442;
  --tema-cizgi: rgba(163, 180, 216, 0.14);
  --tema-cizgi-soluk: rgba(163, 180, 216, 0.07);

  /* ---- Vurgu (birincil CTA) ---- */
  --tema-vurgu: #38e1be;
  --tema-vurgu-koyu: #1fbf9e;
  --tema-vurgu-metin: #05221b; /* vurgu zemini üstündeki metin */
  --tema-vurgu-glow: rgba(56, 225, 190, 0.35);

  /* ---- Şık renkleri (A/B/C/D) ---- */
  --tema-sik-a: #e5484d;
  --tema-sik-b: #4e7cff;
  --tema-sik-c: #f0b429;
  --tema-sik-d: #2fb865;
  --tema-sik-a-metin: #ffffff;
  --tema-sik-b-metin: #ffffff;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #ffffff;

  /* ---- Durum renkleri ---- */
  --tema-basari: #3dd68c;
  --tema-hata: #f2555a;
  --tema-uyari: #f0b429;
  --tema-bilgi: #4e7cff;

  /* ---- Metin ---- */
  --tema-metin-birincil: #f4f7fc;
  --tema-metin-ikincil: #93a0bb;
  --tema-metin-soluk: #5c6a88;

  /* ---- Yazı tipleri ---- */
  --tema-font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --tema-font-govde: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Logo / görsel slotları (tema motoru doldurur) ---- */
  --tema-arkaplan-gorsel: none;           /* url(...) veya none */
  --tema-arkaplan-opaklik: 0.35;

  /* ---- Sabit sistem ölçüleri (temadan bağımsız, değiştirme) ---- */
  --olcu-radius-s: 10px;
  --olcu-radius-m: 16px;
  --olcu-radius-l: 24px;
  --olcu-dokunma-min: 64px;
  --golge-kart: 0 8px 32px rgba(2, 5, 14, 0.5);
  --gecis-hizli: 160ms cubic-bezier(0.3, 0.9, 0.4, 1);
  --gecis-orta: 240ms cubic-bezier(0.3, 0.9, 0.4, 1);
}

/* ============================================================
   SPONSOR TEMASI 1 — "Boostix Enerji" (enerji içeceği, lime/karbon)
   Token sisteminin kanıtı: sadece değişken override.
   ============================================================ */
[data-tema="boostix"] {
  --tema-zemin: #101208;
  --tema-zemin-derin: #0a0c05;
  --tema-zemin-kart: #1a1d0f;
  --tema-zemin-kart-2: #242814;
  --tema-cizgi: rgba(214, 235, 140, 0.16);
  --tema-cizgi-soluk: rgba(214, 235, 140, 0.07);
  --tema-vurgu: #c6f531;
  --tema-vurgu-koyu: #a8d51c;
  --tema-vurgu-metin: #1a2003;
  --tema-vurgu-glow: rgba(198, 245, 49, 0.35);
  --tema-sik-a: #ff5c39;
  --tema-sik-b: #3fa9f5;
  --tema-sik-c: #ffd23f;
  --tema-sik-d: #7ac74f;
  --tema-metin-birincil: #f7fae8;
  --tema-metin-ikincil: #a9b18a;
  --tema-metin-soluk: #6d7455;
}

/* ============================================================
   SPONSOR TEMASI 2 — "Aurora Fest" (festival, gece moru/pembe)
   ============================================================ */
[data-tema="aurora"] {
  --tema-zemin: #150b26;
  --tema-zemin-derin: #0e0719;
  --tema-zemin-kart: #211238;
  --tema-zemin-kart-2: #2c1a4a;
  --tema-cizgi: rgba(212, 178, 255, 0.16);
  --tema-cizgi-soluk: rgba(212, 178, 255, 0.07);
  --tema-vurgu: #ff4d9d;
  --tema-vurgu-koyu: #e0327f;
  --tema-vurgu-metin: #2b0517;
  --tema-vurgu-glow: rgba(255, 77, 157, 0.35);
  --tema-sik-a: #ff5470;
  --tema-sik-b: #5b8cff;
  --tema-sik-c: #ffc145;
  --tema-sik-d: #35c98e;
  --tema-metin-birincil: #f9f4ff;
  --tema-metin-ikincil: #b3a3cc;
  --tema-metin-soluk: #6f6191;
}

/* ============================================================
   MARKA LOGOSU — sahne + telefon başlığı
   İçerik web/assets/marka.js'ten [data-marka-logo] içine basılır (varsayılan:
   ikon şıkları var(--tema-sik-*) ile, yazı currentColor ile — her temada
   otomatik okunur kalır). Beyaz etiket bir img de kullanabilir; boyut kuralı
   ikisini de kapsıyor.
   ============================================================ */
.marka-logo { display: inline-flex; align-items: center; color: var(--tema-metin-birincil); }
.marka-logo svg, .marka-logo img { height: 2.8cqw; width: auto; display: block; }
.marka-logo.mobil svg, .marka-logo.mobil img { height: 22px; }

/* Telefon başlığında logo + oturum adı dikey öbek — isim logonun altına
   sığar, satır aynı hizadaki soru sayacı/geri sayım halkasıyla yarışmaz. */
.m-marka-kume { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }

/* Oturum adı — sahnede büyük, telefonda logonun altında küçük.
   Admin'deki "Oturum adını sahne ekranında göster" kutucuğu ikisini de gizler. */
.m-oturum-adi {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tema-metin-ikincil);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55vw;
}

/* ============================================================
   ÜMRANİYE BELEDİYESİ TEMALARI
   design/assets/tokens.css dosyasının SONUNA eklenecek.
   Başka hiçbir dosyada renk tanımı değişmiyor.
   ============================================================ */

/* ---- 1 · Kurumsal Gece (lacivert zemin + belediye kırmızısı) ---- */
[data-tema="umraniye-gece"] {
  --tema-zemin: #0b1226;
  --tema-zemin-derin: #060a16;
  --tema-zemin-kart: #131c36;
  --tema-zemin-kart-2: #1b2648;
  --tema-cizgi: rgba(160, 180, 220, 0.16);
  --tema-cizgi-soluk: rgba(160, 180, 220, 0.07);
  --tema-vurgu: #e4002b;
  --tema-vurgu-koyu: #b80023;
  --tema-vurgu-metin: #ffffff;
  --tema-vurgu-glow: rgba(228, 0, 43, 0.34);
  --tema-sik-a: #e4002b;
  --tema-sik-b: #1d5bc4;
  --tema-sik-c: #f0b429;
  --tema-sik-d: #12a05c;
  --tema-sik-a-metin: #ffffff;
  --tema-sik-b-metin: #ffffff;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #ffffff;
  --tema-basari: #3dd68c;
  --tema-hata: #ff5a5f;
  --tema-uyari: #f0b429;
  --tema-bilgi: #1d5bc4;
  --tema-metin-birincil: #f4f7fc;
  --tema-metin-ikincil: #93a0bb;
  --tema-metin-soluk: #5c6a88;
}

/* ---- 2 · Meydan Beyaz (açık zemin, gündüz/açık hava LED) ---- */
[data-tema="umraniye-beyaz"] {
  --tema-zemin: #f4f6fa;
  --tema-zemin-derin: #e6ebf2;
  --tema-zemin-kart: #ffffff;
  --tema-zemin-kart-2: #ffffff;
  --tema-cizgi: rgba(11, 18, 38, 0.14);
  --tema-cizgi-soluk: rgba(11, 18, 38, 0.06);
  --tema-vurgu: #e4002b;
  --tema-vurgu-koyu: #b80023;
  --tema-vurgu-metin: #ffffff;
  --tema-vurgu-glow: rgba(228, 0, 43, 0.18);
  --tema-sik-a: #d9002a;
  --tema-sik-b: #14479e;
  --tema-sik-c: #e5a400;
  --tema-sik-d: #0e8c50;
  --tema-sik-a-metin: #ffffff;
  --tema-sik-b-metin: #ffffff;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #ffffff;
  --tema-basari: #0e8c50;
  --tema-hata: #d9002a;
  --tema-uyari: #b97f10;
  --tema-bilgi: #14479e;
  --tema-metin-birincil: #0b1226;
  --tema-metin-ikincil: #5a6784;
  --tema-metin-soluk: #8a94a8;
  --golge-kart: 0 8px 32px rgba(23, 34, 61, 0.12);
}

/* ---- 3 · Lale Bordo (logo kırmızısı zeminde, altın vurgu) ---- */
[data-tema="umraniye-bordo"] {
  --tema-zemin: #2a0a12;
  --tema-zemin-derin: #180509;
  --tema-zemin-kart: #3a1019;
  --tema-zemin-kart-2: #4a1622;
  --tema-cizgi: rgba(255, 205, 210, 0.18);
  --tema-cizgi-soluk: rgba(255, 205, 210, 0.08);
  --tema-vurgu: #f5c542;
  --tema-vurgu-koyu: #d9a91f;
  --tema-vurgu-metin: #2a0a12;
  --tema-vurgu-glow: rgba(245, 197, 66, 0.30);
  --tema-sik-a: #ff6b3d;
  --tema-sik-b: #4a9de0;
  --tema-sik-c: #f5c542;
  --tema-sik-d: #46c07a;
  --tema-sik-a-metin: #2a0a12;
  --tema-sik-b-metin: #08202f;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #052613;
  --tema-basari: #46c07a;
  --tema-hata: #ff6b3d;
  --tema-uyari: #f5c542;
  --tema-bilgi: #4a9de0;
  --tema-metin-birincil: #fff4f2;
  --tema-metin-ikincil: #d3a3a8;
  --tema-metin-soluk: #9c6e75;
}