/* ============================================================
   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);
  /* Instagram's own colours for its follow button: fixed, never themed */
  --instagram-zemin: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --instagram-metin: #ffffff;
}

/* ============================================================
   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; }

/* Sultanbeyli Belediyesi: the lockup is the tulip with two lines of lettering
   beside it (178x52), the default wordmark one line (340x48). At the shared
   height the lettering would be half the size, so this brand's slots are
   taller. On the phone the session name lines up under the lettering (the
   text starts at 72/178 of the width), not under the tulip. */
.marka-logo svg { height: 4.4cqw; }
.marka-logo.mobil svg { height: 36px; }
.m-marka-kume .m-oturum-adi { margin-left: 50px; }

/* 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;
}

/* ============================================================
   SULTANBEYLİ BELEDİYESİ TEMALARI (etkinlik dalı; main'e girmez)
   Kurumsal kimlik renkleri: lale sarısı #f9b221 (Pantone 137 C) ve
   lacivert #00437a (Pantone 295 C). Yalnızca --tema-* tokenları değişiyor.
   ============================================================ */

/* ---- 1 · Kurumsal Lacivert (lacivert zemin + lale sarısı) ---- */
[data-tema="sultanbeyli-lacivert"] {
  --tema-zemin: #04213d;
  --tema-zemin-derin: #021426;
  --tema-zemin-kart: #0a2e52;
  --tema-zemin-kart-2: #103a64;
  --tema-cizgi: rgba(170, 200, 235, 0.16);
  --tema-cizgi-soluk: rgba(170, 200, 235, 0.07);
  --tema-vurgu: #f9b221;
  --tema-vurgu-koyu: #d99510;
  --tema-vurgu-metin: #04213d;
  --tema-vurgu-glow: rgba(249, 178, 33, 0.32);
  --tema-sik-a: #e5484d;
  --tema-sik-b: #2f7fd6;
  --tema-sik-c: #f9b221;
  --tema-sik-d: #1fa868;
  --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: #f9b221;
  --tema-bilgi: #5aa2f0;
  --tema-metin-birincil: #f3f7fc;
  --tema-metin-ikincil: #97abc4;
  --tema-metin-soluk: #5d7591;
}

/* ---- 2 · Meydan Beyaz (açık zemin, gündüz/açık hava LED) ---- */
[data-tema="sultanbeyli-beyaz"] {
  --tema-zemin: #f5f7fa;
  --tema-zemin-derin: #e6ecf3;
  --tema-zemin-kart: #ffffff;
  --tema-zemin-kart-2: #ffffff;
  --tema-cizgi: rgba(0, 40, 80, 0.14);
  --tema-cizgi-soluk: rgba(0, 40, 80, 0.06);
  --tema-vurgu: #00437a;
  --tema-vurgu-koyu: #002f57;
  --tema-vurgu-metin: #ffffff;
  --tema-vurgu-glow: rgba(0, 67, 122, 0.18);
  --tema-sik-a: #d63a3f;
  --tema-sik-b: #00437a;
  --tema-sik-c: #f0a500;
  --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: #d63a3f;
  --tema-uyari: #b97f10;
  --tema-bilgi: #00437a;
  --tema-metin-birincil: #0a1f36;
  --tema-metin-ikincil: #55677e;
  --tema-metin-soluk: #8a97a8;
}