/* ============================================================
   Katıl Oyna Kazan — Ortak bileşen kütüphanesi (tüm yüzeyler)
   Renk/yazı tipi ASLA burada tanımlanmaz → tokens.css
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--tema-font-govde);
  background: var(--tema-zemin-derin);
  color: var(--tema-metin-birincil);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
a { color: inherit; }

.font-display {
  font-family: var(--tema-font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.rakam { font-variant-numeric: tabular-nums; }

/* ---- Sahne ışığı zemini: huzmeler + grain ---- */
.isik-zemin { position: relative; isolation: isolate; background: var(--tema-zemin); }
.isik-zemin::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -20%, var(--tema-vurgu-glow) 0%, transparent 55%),
    var(--tema-arkaplan-gorsel),
    linear-gradient(180deg, var(--tema-zemin) 0%, var(--tema-zemin-derin) 100%);
  background-size: cover;
  opacity: 1;
}
.isik-zemin::after { /* grain */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---- Kart ---- */
.kart {
  background: var(--tema-zemin-kart);
  border: 1px solid var(--tema-cizgi);
  border-radius: var(--olcu-radius-m);
  box-shadow: var(--golge-kart);
}

/* ---- Birincil CTA ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--olcu-dokunma-min);
  padding: 0 28px;
  border-radius: var(--olcu-radius-m);
  font-family: var(--tema-font-display);
  font-weight: 800; font-size: 18px; letter-spacing: 0.01em;
  transition: transform var(--gecis-hizli), box-shadow var(--gecis-hizli), opacity var(--gecis-hizli);
}
.btn:active { transform: scale(0.97); }
.btn-vurgu {
  background: var(--tema-vurgu); color: var(--tema-vurgu-metin);
  box-shadow: 0 6px 24px var(--tema-vurgu-glow);
}
.btn-vurgu:hover { box-shadow: 0 8px 32px var(--tema-vurgu-glow); }
.btn-golge { background: var(--tema-zemin-kart-2); border: 1px solid var(--tema-cizgi); }
.btn-tehlike { background: var(--tema-hata); color: #fff; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn-blok { width: 100%; }

/* ---- Rozet / pill ---- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--tema-zemin-kart-2); border: 1px solid var(--tema-cizgi);
  font-size: 13px; font-weight: 600; color: var(--tema-metin-ikincil);
  white-space: nowrap;
}
.pill strong { color: var(--tema-metin-birincil); }
.pill-basari { color: var(--tema-basari); border-color: color-mix(in srgb, var(--tema-basari) 35%, transparent); }
.pill-hata   { color: var(--tema-hata);   border-color: color-mix(in srgb, var(--tema-hata) 35%, transparent); }
.pill-uyari  { color: var(--tema-uyari);  border-color: color-mix(in srgb, var(--tema-uyari) 35%, transparent); }

/* ---- Bağlantı durumu noktası ---- */
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--tema-basari); flex: none; }
.nokta.canli { animation: nabiz 2s ease-in-out infinite; }
.nokta-hata { background: var(--tema-hata); }
.nokta-uyari { background: var(--tema-uyari); }
@keyframes nabiz {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tema-basari) 50%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* ---- Logo slotları (tema motoru img basar; boşken tipografik) ---- */
.logo-slot {
  display: inline-flex; align-items: center; justify-content: flex-start;
  font-family: var(--tema-font-display); font-weight: 900;
  letter-spacing: 0.14em;
}
.logo-sponsor-slot {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--tema-metin-soluk);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.logo-sponsor-slot b {
  color: var(--tema-metin-ikincil); font-weight: 800;
  border: 1px dashed var(--tema-cizgi); border-radius: 8px; padding: 4px 10px;
  letter-spacing: 0.04em;
}

/* ============================================================
   İMZA ELEMENT — Geri sayım halkası
   ============================================================ */
.halka { position: relative; width: 96px; height: 96px; flex: none; }
.halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.halka-iz { fill: none; stroke: var(--tema-cizgi); stroke-width: 7; }
.halka-dolgu {
  fill: none; stroke: var(--tema-vurgu); stroke-width: 7; stroke-linecap: round;
  transition: stroke 300ms;
}
.halka-sayi {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--tema-font-display); font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: 34px;
}
.halka.kritik .halka-dolgu { stroke: var(--tema-hata); }
.halka.kritik .halka-sayi { color: var(--tema-hata); animation: halka-nabiz 0.5s ease-in-out infinite; }
.halka.kritik { animation: halka-nabiz 0.5s ease-in-out infinite; }
.halka.bitti .halka-dolgu { stroke: var(--tema-metin-soluk); }
@keyframes halka-nabiz { 50% { transform: scale(1.06); } }
.halka-mini { width: 44px; height: 44px; }
.halka-mini .halka-sayi { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  .halka.kritik, .halka.kritik .halka-sayi { animation: none; }
}

/* ============================================================
   ŞIK BUTONLARI — harf + şekil + renk (erişilebilirlik üçlüsü)
   ============================================================ */
.sik {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  min-height: var(--olcu-dokunma-min);
  border-radius: var(--olcu-radius-l);
  font-family: var(--tema-font-display);
  transition: transform var(--gecis-hizli), opacity var(--gecis-orta), box-shadow var(--gecis-hizli);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.28), 0 12px 28px rgba(0, 0, 0, 0.35);
}
.sik:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,0.28); }
.sik-a { background: var(--tema-sik-a); color: var(--tema-sik-a-metin); }
.sik-b { background: var(--tema-sik-b); color: var(--tema-sik-b-metin); }
.sik-c { background: var(--tema-sik-c); color: var(--tema-sik-c-metin); }
.sik-d { background: var(--tema-sik-d); color: var(--tema-sik-d-metin); }
.sik-harf { font-size: 40px; font-weight: 900; line-height: 1; }
.sik-sekil { width: 22px; height: 22px; background: currentColor; opacity: 0.9; }
.sekil-ucgen { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sekil-elmas { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sekil-daire { border-radius: 50%; }
.sekil-kare  { border-radius: 3px; }
/* Kilitli / soluk / doğru / yanlış durumları */
.sik.secilen {
  outline: 4px solid var(--tema-metin-birincil);
  outline-offset: 3px;
}
.sik.secilen::after {
  content: "✓"; position: absolute; top: 10px; right: 14px;
  font-size: 22px; font-weight: 900;
}
.sik.soluk { opacity: 0.25; filter: saturate(0.4); pointer-events: none; }
.sik.dogru { outline: 4px solid var(--tema-basari); outline-offset: 3px; }

/* ============================================================
   Liderlik satırı
   ============================================================ */
.lider-satir {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: 14px; padding: 12px 16px;
  background: var(--tema-zemin-kart); border: 1px solid var(--tema-cizgi);
  border-radius: var(--olcu-radius-s);
}
.lider-sira {
  font-family: var(--tema-font-display); font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--tema-metin-ikincil); min-width: 2ch; text-align: right;
}
.lider-ad { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lider-puan { font-family: var(--tema-font-display); font-weight: 800; font-variant-numeric: tabular-nums; }
.lider-degisim { font-size: 12px; font-weight: 800; min-width: 3ch; text-align: right; }
.lider-degisim.artis { color: var(--tema-basari); }
.lider-degisim.dusus { color: var(--tema-hata); }
.lider-satir.ben {
  border-color: var(--tema-vurgu);
  background: color-mix(in srgb, var(--tema-vurgu) 10%, var(--tema-zemin-kart));
}
.lider-satir.altin  .lider-sira { color: #f5c542; }
.lider-satir.gumus  .lider-sira { color: #c9d3e0; }
.lider-satir.bronz  .lider-sira { color: #d08a4e; }

/* ---- Kayan şerit (marquee) ---- */
.serit { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.serit-ic { display: inline-block; padding-left: 100%; animation: kaydir 24s linear infinite; }
@keyframes kaydir { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .serit-ic { animation: none; padding-left: 0; } }

/* ---- Konfeti ---- */
.konfeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.konfeti i {
  position: absolute; top: -20px; border-radius: 2px; opacity: 0.9;
  animation: konfeti-dus linear infinite;
}
@keyframes konfeti-dus {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.7; }
}

/* ---- Üst bant bildirimi (bağlantı koptu vb.) ---- */
.ust-bant {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; font-size: 14px; font-weight: 600;
  transform: translateY(-110%); transition: transform var(--gecis-orta);
}
.ust-bant.gorunur { transform: translateY(0); }
.ust-bant-uyari { background: color-mix(in srgb, var(--tema-uyari) 92%, black); color: #241a02; }
.ust-bant-bilgi { background: var(--tema-zemin-kart-2); border-bottom: 1px solid var(--tema-cizgi); }
.spinner {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid rgba(0,0,0,0.25); border-top-color: currentColor;
  animation: don 0.8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* ============================================================
   PROTOTİP KABUĞU (üründe yer almaz)
   ============================================================ */
.durum-panel {
  position: fixed; right: 12px; bottom: 12px; z-index: 999;
  font-family: "Inter", system-ui, sans-serif; font-size: 12px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.durum-panel-baslik {
  background: #06090f; color: #7d8aa5; border: 1px solid #232c42;
  border-radius: 8px; padding: 6px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
}
.durum-panel-liste {
  display: none; flex-direction: column; gap: 4px;
  background: #06090fee; border: 1px solid #232c42; border-radius: 10px; padding: 6px;
  backdrop-filter: blur(6px);
}
.durum-panel.acik .durum-panel-liste { display: flex; }
.durum-panel-liste button {
  color: #aab6cf; text-align: left; padding: 6px 10px; border-radius: 6px; font-size: 12px;
}
.durum-panel-liste button:hover { background: #141c30; }
.durum-panel-liste button.secili { background: #1b2848; color: #fff; font-weight: 700; }

.geri-link {
  position: fixed; left: 12px; bottom: 12px; z-index: 999;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none;
  color: #7d8aa5; background: #06090f; border: 1px solid #232c42;
  border-radius: 8px; padding: 6px 12px;
}
.geri-link:hover { color: #fff; }

.gizli { display: none !important; }

@media print { .durum-panel, .geri-link { display: none; } }