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

/* Gökyüzü Koleji: the lockup is a square mark with two rows of lettering
   beside it (208x85), the default wordmark one line (340x48). At the shared
   height the lettering would be tiny, so this brand's slots are taller. On
   the phone the session name lines up under the lettering (the text starts
   at 102/208 of the width), not under the square. */
.marka-logo svg { height: 6cqw; }
.marka-logo.mobil svg { height: 50px; }
.m-marka-kume .m-oturum-adi { margin-left: 60px; }

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

/* ============================================================
   GÖKYÜZÜ KOLEJİ TEMALARI (etkinlik dalı; main'e girmez)
   Logo mavisi #0d8dba iki kullanım için açılıyor: salon ve
   açık hava. Yalnızca --tema-* tokenları değişiyor.
   ============================================================ */

/* ---- 1 · Gece Gökyüzü (koyu lacivert zemin + gök mavisi) ---- */
[data-tema="gokyuzu-gece"] {
  --tema-zemin: #071a2b;
  --tema-zemin-derin: #040f1a;
  --tema-zemin-kart: #0d2840;
  --tema-zemin-kart-2: #133352;
  --tema-cizgi: rgba(150, 205, 235, 0.16);
  --tema-cizgi-soluk: rgba(150, 205, 235, 0.07);
  --tema-vurgu: #2bb3e3;
  --tema-vurgu-koyu: #0d8dba;
  --tema-vurgu-metin: #04121e;
  --tema-vurgu-glow: rgba(43, 179, 227, 0.32);
  --tema-sik-a: #e5484d;
  --tema-sik-b: #0d8dba;
  --tema-sik-c: #f5b82e;
  --tema-sik-d: #2fae6b;
  --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: #f5b82e;
  --tema-bilgi: #2bb3e3;
  --tema-metin-birincil: #f2f8fc;
  --tema-metin-ikincil: #93adc2;
  --tema-metin-soluk: #5a7790;
}

/* ---- 2 · Açık Gökyüzü (beyaz zemin, gündüz/açık hava LED) ---- */
[data-tema="gokyuzu-acik"] {
  --tema-zemin: #f3f8fb;
  --tema-zemin-derin: #e2eef5;
  --tema-zemin-kart: #ffffff;
  --tema-zemin-kart-2: #ffffff;
  --tema-cizgi: rgba(10, 50, 80, 0.14);
  --tema-cizgi-soluk: rgba(10, 50, 80, 0.06);
  --tema-vurgu: #0a7aa3;
  --tema-vurgu-koyu: #075f80;
  --tema-vurgu-metin: #ffffff;
  --tema-vurgu-glow: rgba(13, 141, 186, 0.20);
  --tema-sik-a: #d63a3f;
  --tema-sik-b: #0a7aa3;
  --tema-sik-c: #eea400;
  --tema-sik-d: #1e8f55;
  --tema-sik-a-metin: #ffffff;
  --tema-sik-b-metin: #ffffff;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #ffffff;
  --tema-basari: #1e8f55;
  --tema-hata: #d63a3f;
  --tema-uyari: #b97f10;
  --tema-bilgi: #0a7aa3;
  --tema-metin-birincil: #0f2a40;
  --tema-metin-ikincil: #52697d;
  --tema-metin-soluk: #8799a8;
}