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

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

/* ============================================================
   ÇİFT LOGO PLAKASI — fuar ortak markalaması
   KAİTED ve JOJO EXPO logoları tam renkli ve beyaz zemin üzerine
   çizilmiş kurumsal çalışmalar: koyu yazı + yeşil/turkuaz/lacivert
   işaretler. Renklerini değiştirmek markayı bozar, koyu sahne zeminine
   doğrudan koymak ise yazıyı kaybettirir. Çözüm fuarların kendi
   standartı: her logo beyaz bir plakanın üstünde durur — üç temada da
   okunur, marka başına tek görsel dosya yeter.
   Yerleşim: KAİTED sol üstte (sayfanın [data-marka-logo] yuvası),
   JOJO sağ üstte (marka.js başlığın sonuna ekler).
   ============================================================ */
.marka-plaka {
   background: #ffffff;
   border-radius: var(--olcu-radius-m);
   padding: 0.7cqw 1cqw;
   box-shadow: 0 2px 14px rgba(8, 20, 12, 0.16);
}
.marka-plaka.mobil { padding: 5px 8px; border-radius: 10px; }

/* Açık temalarda sayfa zaten beyaz: plaka gereksiz bir etiket gibi durur,
   logolar doğrudan zemine otursun. Plaka sadece koyu temalarda gerekli. */
[data-tema="karavan-fuar"] .marka-plaka,
[data-tema="karavan-gece"] .marka-plaka,
[data-tema="karavan-beyaz"] .marka-plaka {
   background: transparent;
   box-shadow: none;
   padding: 0;
}

/* Optik denge: KAİTED logosundaki küçük açıklama satırının sahnede
   okunabilmesi için JOJO logosundan biraz daha yüksek gösterilir. */
.marka-logo img[src$="marka-kaited.svg"] { height: 9cqw; }
.marka-logo img[src$="marka-jojo.svg"] { height: 4cqw; }
.marka-logo.mobil img[src$="marka-kaited.svg"] { height: 64px; }
.marka-logo.mobil img[src$="marka-jojo.svg"] { height: 28px; }
.s-marka-kume { transform: translateY(-1.2cqw); }

/* Sağdaki logo başlığın son çocuğu; sol öbek margin-right:auto taşıdığı
   için otomatik sağa yaslanıyor, araya girmesin diye de küçülmüyor. */
.marka-sag { flex: none; align-self: flex-start; }

/* "Katılım açık" rozeti marka.js tarafından başlıktan QR'ın üstüne taşınıyor —
   başlıkta yalnızca iki logo kalsın, sol ve sağ uçta karşılıklı dursunlar.
   Rozet .s-ust'tan çıkınca oranın ölçülerini kaybediyor, burada geri veriyoruz. */
.s-qr-sutun { position: relative; }
.s-katilim-rozet {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%); margin-bottom: 1cqw;
  display: flex; justify-content: center; white-space: nowrap;
}
.s-katilim-rozet .pill { font-size: 1.4cqw; padding: 0.7cqw 1.6cqw; gap: 0.6cqw; border-radius: 99cqw; }

/* Başlık artık DÖRT parçalı (soru sayacı · KAİTED+oturum adı · halka · JOJO).
   Oturum adının main'den gelen payı (telefonda 55vw, sahnede 40cqw) tek
   logolu başlığa göre ayarlanmıştı; ikinci logo o payı yiyor ve uzun adlar
   halkanın/JOJO'nun altına taşıyor. Adı öbeğin kendi genişliğine kilitleyip
   öbeği kırpıyoruz: ad artık üç nokta ile kesiliyor, taşma bitiyor. */
.m-marka-kume, .s-marka-kume { overflow: hidden; }
.m-marka-kume .m-oturum-adi { max-width: 100%; }
.s-marka-kume .s-logo { max-width: 100%; }

/* Telefon başlığı iki satır: üstte iki logo tam genişlikte (büyük görünsün),
   altta soru sayacı + geri sayım halkası. Markup'a dokunmadan flex sırasıyla:
   ::after 100% genişlikte satır kırar, pill'ler ve halka onun arkasına düşer. */
.telefon .m-ust { flex-wrap: wrap; row-gap: 10px; }
.telefon .m-ust .m-marka-kume { order: 1; }
.telefon .m-ust .marka-sag { order: 2; align-self: center; }
.telefon .m-ust::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
.telefon .m-ust > .pill { order: 4; }
.telefon .m-ust > .halka { order: 5; margin-left: auto; }
/* Logolar pill'in iç boşluğu (14px + 1px çerçeve) kadar içeride: KAİTED'in
   sol kenarı alttaki "Soru" yazısının S'siyle aynı hizada, JOJO da simetrik. */
.telefon .m-ust .m-marka-kume { margin-left: 15px; }
.telefon .m-ust .marka-sag { margin-right: 15px; }
/* Geri sayım halkası JOJO'nun tam altında, yatayda ortalı: JOJO genişliği
   (28px yükseklik × 714.96/270 en-boy oranı) ile 44px halka arasındaki farkın
   yarısı kadar ek sağ boşluk. */
.telefon .m-ust > .halka { margin-right: calc(15px + (28px * 714.96 / 270 - 44px) / 2); }

/* Sahne başlığı: soru sayacı + halka (veya "SÜRE DOLDU!") iki logonun tam
   ortasında. Eşit genişlikte iki yan sütun grubu ortalar; öğeler sütunlara
   açıkça yerleştirildiği için gizli olanlar düzeni kaydırmıyor. */
.sahne .s-ust { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; }
.sahne .s-ust > * { grid-row: 1; }
.sahne .s-ust .s-marka-kume { grid-column: 1; margin-right: 0 !important; }
.sahne .s-ust > .pill { grid-column: 2; }
.sahne .s-ust > .halka, .sahne .s-ust > .sure-doldu-flas { grid-column: 3; }
.sahne .s-ust .marka-sag { grid-column: 4; justify-self: end; }

/* ============================================================
   KAITED KARAVAN EXPO ISTANBUL TEMALARI
   Renkler fuarın iki logosundan alındı: KAİTED yeşili #3fa02f,
   JOJO EXPO turkuazı #0f8f8b ve laciverti #163a64. Üç kullanım:
   fuar salonu gecesi, gündüz/açık hava ve akşam şenliği.
   Başka hiçbir dosyada renk tanımı değişmiyor.
   ============================================================ */

/* ---- 1 · Orman Yeşili (koyu orman zemini, marka yeşili vurgu) ----
   Marka yeşili koyu zeminde sönük kaldığı için vurgu aynı aileden
   açılmış ton; basılı/hover hâli gerçek logo yeşiline iniyor. */
[data-tema="karavan-orman"] {
  --tema-zemin: #0a1a0f;
  --tema-zemin-derin: #06110a;
  --tema-zemin-kart: #102817;
  --tema-zemin-kart-2: #17361f;
  --tema-cizgi: rgba(168, 214, 170, 0.16);
  --tema-cizgi-soluk: rgba(168, 214, 170, 0.07);
  --tema-vurgu: #52c23d;
  --tema-vurgu-koyu: #3fa02f;
  --tema-vurgu-metin: #07200c;
  --tema-vurgu-glow: rgba(82, 194, 61, 0.34);
  --tema-sik-a: #e5484d;
  --tema-sik-b: #2f6fd0;
  --tema-sik-c: #f0b429;
  --tema-sik-d: #0fa9a4;
  --tema-sik-a-metin: #ffffff;
  --tema-sik-b-metin: #ffffff;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #04231f;
  --tema-basari: #52c23d;
  --tema-hata: #ff5a5f;
  --tema-uyari: #f0b429;
  --tema-bilgi: #3aa0e0;
  --tema-metin-birincil: #f1f9ee;
  --tema-metin-ikincil: #9ab59d;
  --tema-metin-soluk: #62806a;
}

/* ---- 2 · Fuar Beyazı (açık zemin, gündüz/fuar salonu LED) ----
   Açık zeminde marka yeşili koyulaştırılıyor: #27761b üstünde beyaz
   metin 5.1:1. Şık B doğrudan JOJO laciverti. */
[data-tema="karavan-fuar"] {
  --tema-zemin: #f4f8f3;
  --tema-zemin-derin: #e6eee4;
  --tema-zemin-kart: #ffffff;
  --tema-zemin-kart-2: #ffffff;
  --tema-cizgi: rgba(26, 58, 30, 0.14);
  --tema-cizgi-soluk: rgba(26, 58, 30, 0.06);
  --tema-vurgu: #27761b;
  --tema-vurgu-koyu: #1d5b13;
  --tema-vurgu-metin: #ffffff;
  --tema-vurgu-glow: rgba(39, 118, 27, 0.18);
  --tema-sik-a: #d33a2f;
  --tema-sik-b: #163a64;
  --tema-sik-c: #e5a400;
  --tema-sik-d: #0f7f7c;
  --tema-sik-a-metin: #ffffff;
  --tema-sik-b-metin: #ffffff;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #ffffff;
  --tema-basari: #27761b;
  --tema-hata: #d33a2f;
  --tema-uyari: #b97f10;
  --tema-bilgi: #163a64;
  --tema-metin-birincil: #16241a;
  --tema-metin-ikincil: #5a6a5c;
  --tema-metin-soluk: #8b968c;
}

/* ---- 3 · Kamp Gecesi (buz mavisi açık zemin, turkuaz vurgu) ---- */
[data-tema="karavan-gece"] {
   --tema-zemin: #f3f8fc;
   --tema-zemin-derin: #e3edf6;
   --tema-zemin-kart: #ffffff;
   --tema-zemin-kart-2: #f8fbfe;
   --tema-cizgi: rgba(22, 58, 100, 0.16);
   --tema-cizgi-soluk: rgba(22, 58, 100, 0.07);
   --tema-vurgu: #0f7f7c;
   --tema-vurgu-koyu: #0a6664;
   --tema-vurgu-metin: #ffffff;
   --tema-vurgu-glow: rgba(15, 143, 139, 0.18);
  --tema-sik-a: #ff6b5c;
  --tema-sik-b: #6fb0ff;
  --tema-sik-c: #ffc94a;
  --tema-sik-d: #5fce53;
  --tema-sik-a-metin: #3d0f08;
  --tema-sik-b-metin: #062842;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #06240a;
  --tema-basari: #5fce53;
  --tema-hata: #ff6b5c;
  --tema-uyari: #ffc94a;
  --tema-bilgi: #6fb0ff;
   --tema-metin-birincil: #102a43;
   --tema-metin-ikincil: #526d82;
   --tema-metin-soluk: #8193a3;
}

/* ---- 4 · Saf Beyaz (tamamen beyaz zemin) ----
   Logoların kendi beyaz zeminleri sayfayla birleşsin diye: plaka yok,
   çerçeve yok. Aydınlık salon ve beyaz sahne arkalığı için. */
[data-tema="karavan-beyaz"] {
  --tema-zemin: #ffffff;
  --tema-zemin-derin: #eef1ec;
  --tema-zemin-kart: #f5f8f3;
  --tema-zemin-kart-2: #ffffff;
  --tema-cizgi: rgba(26, 58, 30, 0.16);
  --tema-cizgi-soluk: rgba(26, 58, 30, 0.07);
  --tema-vurgu: #27761b;
  --tema-vurgu-koyu: #1d5b13;
  --tema-vurgu-metin: #ffffff;
  --tema-vurgu-glow: rgba(39, 118, 27, 0.16);
  --tema-sik-a: #d33a2f;
  --tema-sik-b: #163a64;
  --tema-sik-c: #e5a400;
  --tema-sik-d: #0f7f7c;
  --tema-sik-a-metin: #ffffff;
  --tema-sik-b-metin: #ffffff;
  --tema-sik-c-metin: #241a02;
  --tema-sik-d-metin: #ffffff;
  --tema-basari: #27761b;
  --tema-hata: #d33a2f;
  --tema-uyari: #b97f10;
  --tema-bilgi: #163a64;
  --tema-metin-birincil: #131a12;
  --tema-metin-ikincil: #55635a;
  --tema-metin-soluk: #8a948c;
}