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

/* Ümraniye Belediyesi: the lockup is two lines of text beside the mark
   (127x52), 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
   43.5/127 of the width), not under the mark, so the two read as one column. */
.marka-logo svg { height: 4.2cqw; }
.marka-logo.mobil svg { height: 40px; }
.m-marka-kume .m-oturum-adi { margin-left: 33px; }

/* 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 (etkinlik dalı; main'e girmez)
   Belediye kırmızısı #e4002b üç kullanım için açılıyor: salon,
   açık hava ve şenlik. Yalnızca --tema-* tokenları değişiyor.
   ============================================================ */

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

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