/* ==========================================================================
   BİLET ETKİNLİKLERİ — "Altın Sahne"
   --------------------------------------------------------------------------
   Kapsam: yalnızca .bl-* sınıfları. Site genelindeki hiçbir seçiciye
   dokunulmaz.

   Kartın rengi AŞAMADAN gelir (--k, PHP'de bl_asama sözlüğünde). Yeni bir
   aşama eklemek = sözlüğe bir satır; buraya kural yazmak gerekmez.
   ========================================================================== */
.bl-page{
  --bl-mor:#a78bfa; --bl-altin:#f5c451; --bl-altin2:#ffdf8a; --bl-yesil:#34d399;
  --bl-line:rgba(148,169,214,.13); --bl-line2:rgba(148,169,214,.24);
  --bl-tx:#f1f5f9; --bl-tx2:#b6c3da; --bl-tx3:#7d8ca6; --bl-tx4:#5b6980;
  --bl-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  max-width:1200px; margin:0 auto; padding-bottom:48px;
  font-family:Manrope,system-ui,sans-serif;
}
.bl-page *{box-sizing:border-box}
.bl-page svg{display:block}

/* ---------- başlık ---------- */
.bl-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.bl-head-l{display:flex; align-items:center; gap:13px; min-width:0}
.bl-head-ic{
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(150deg,rgba(167,139,250,.18),rgba(167,139,250,.04));
  border:1px solid rgba(167,139,250,.3);
  box-shadow:0 10px 26px -16px rgba(167,139,250,.9);
}
.bl-head-ic svg{width:27px; height:27px}
.bl-head h1{margin:0; font-size:22px; font-weight:900; letter-spacing:-.02em; color:#fff; line-height:1.1}
.bl-sub{
  margin-top:5px; font-family:var(--bl-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--bl-tx4);
}
.bl-head-r{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap}
.bl-chip{
  display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px;
  font-size:11.5px; font-weight:800; color:var(--bl-tx2); white-space:nowrap;
  border:1px solid var(--bl-line2); background:linear-gradient(155deg,rgba(17,26,46,.9),rgba(11,17,32,.95));
  transition:color .16s, border-color .16s, transform .16s;
}
.bl-chip:hover{color:#fff; border-color:rgba(167,139,250,.55); transform:translateY(-1px)}

/* ---------- giriş uyarısı ---------- */
.bl-uyari{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;
  padding:13px 16px; border-radius:15px;
  border:1px solid rgba(56,189,248,.24); background:rgba(56,189,248,.07);
}
.bl-uyari span{flex:1; min-width:200px; font-size:12.5px; font-weight:600; color:var(--bl-tx2)}
.bl-uyari-btn{
  height:34px; padding:0 16px; border:0; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:11.5px; font-weight:800; color:#04202e;
  background:linear-gradient(135deg,#bae6fd,#38bdf8);
}
.bl-uyari-btn:hover{filter:brightness(1.06)}

/* ---------- nasıl işliyor ----------
   Üye çekiliş öncesi ne olacağını bilmiyordu; dört adım bunu anlatır. */
.bl-adimlar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px;
  margin:0 0 20px; padding:0; list-style:none; counter-reset:bl;
}
.bl-adimlar li{
  position:relative; counter-increment:bl;
  padding:13px 14px 13px 44px; border-radius:15px;
  border:1px solid var(--bl-line); background:linear-gradient(160deg,rgba(16,23,41,.8),rgba(6,10,20,.9));
}
.bl-adimlar li::before{
  content:counter(bl); position:absolute; left:13px; top:13px;
  width:22px; height:22px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--bl-mono); font-size:10px; font-weight:700; color:#1a1035;
  background:linear-gradient(140deg,#ddd6fe,var(--bl-mor));
}
.bl-adimlar b{display:block; font-size:12.5px; font-weight:800; color:#fff}
.bl-adimlar span{display:block; margin-top:3px; font-size:11px; font-weight:500; color:var(--bl-tx3); line-height:1.5}

/* ---------- ızgara ---------- */
/* auto-FILL, tek etkinlik varken kartı dar bir sol sütuna hapsedip sağda
   koca boşluk bırakıyordu. auto-FIT boş rayları toplar; üst sınır 420px
   ile kart devasa olmaz, justify-content da az kartı ortalar. */
.bl-izgara{display:grid; gap:16px; justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(330px,min(420px,100%)))}

/* ---------- kart ---------- */
.bl-kart{
  position:relative; display:flex; flex-direction:column; gap:11px;
  padding:16px; border-radius:20px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--k) 26%,var(--bl-line));
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb,var(--k) 13%,transparent), transparent 62%),
    linear-gradient(180deg,rgba(16,23,41,.9),rgba(6,10,20,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 42px -28px rgba(0,0,0,.95);
  transition:border-color .18s, transform .18s cubic-bezier(.4,0,.2,1);
}
.bl-kart:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--k) 48%,transparent)}
.bl-sonuclandi{opacity:.9}

.bl-gorsel{margin:-16px -16px 3px; border-radius:20px 20px 0 0; overflow:hidden; background:#0b1120}
.bl-gorsel img{display:block; width:100%; height:140px; object-fit:cover}

/* ---------- durum rozeti ---------- */
.bl-ust{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.bl-durum{
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px;
  font-size:10.5px; font-weight:800; color:var(--k);
  background:color-mix(in srgb,var(--k) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 32%,transparent);
}
.bl-durum i{width:7px; height:7px; border-radius:50%; background:var(--k); flex:none}
/* Canlı çekilişte nokta atar — dikkat çekmesi gereken tek durum bu. */
.bl-canli .bl-durum i{animation:blNabiz 1.5s ease-out infinite}
@keyframes blNabiz{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--k) 70%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.bl-durum-not{font-size:10.5px; font-weight:600; color:var(--bl-tx4)}

.bl-baslik{margin:1px 0 0; font-size:16.5px; font-weight:900; color:#fff; line-height:1.25}
.bl-aciklama{margin:0; font-size:12.5px; font-weight:500; color:var(--bl-tx3); line-height:1.6}

/* ---------- ödül kademeleri ---------- */
.bl-oduller{display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:8px}
.bl-odul{
  position:relative; padding:10px 12px; border-radius:13px; text-align:center;
  border:1px solid rgba(245,196,81,.24);
  background:linear-gradient(160deg,rgba(245,196,81,.12),rgba(9,14,27,.6));
}
.bl-odul-s{
  position:absolute; top:6px; left:9px;
  font-family:var(--bl-mono); font-size:8px; font-weight:700; color:rgba(245,196,81,.65);
}
.bl-odul b{
  display:block; margin-top:6px; font-size:19px; font-weight:900; color:#fde68a; line-height:1;
  font-variant-numeric:tabular-nums;
}
.bl-odul b small{font-size:10px; font-weight:800; color:rgba(253,230,138,.7)}
.bl-odul-k{
  display:block; margin-top:5px; font-family:var(--bl-mono); font-size:8px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--bl-tx4);
}

/* ---------- kural şeridi ---------- */
.bl-kurallar{display:flex; flex-wrap:wrap; gap:7px}
.bl-kural{
  display:inline-flex; flex-direction:column; gap:3px; padding:7px 11px; border-radius:11px;
  border:1px solid var(--bl-line); background:rgba(148,169,214,.05); line-height:1;
}
.bl-kural small{
  font-family:var(--bl-mono); font-size:7.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--bl-tx4);
}
.bl-kural b{font-size:12px; font-weight:800; color:var(--bl-tx); font-variant-numeric:tabular-nums}

/* ---------- geri sayım ---------- */
.bl-sayac{text-align:center}
.bl-sayac-et{
  display:block; margin-bottom:6px;
  font-family:var(--bl-mono); font-size:8.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bl-tx4);
}

/* ---------- üyenin durumu ---------- */
.bl-benim{
  display:flex; flex-direction:column; gap:6px; padding:12px 13px; border-radius:14px;
  border:1px solid color-mix(in srgb,var(--k) 24%,transparent);
  background:color-mix(in srgb,var(--k) 8%,rgba(5,9,18,.5));
}
.bl-benim-sat{display:flex; align-items:center; justify-content:space-between; gap:10px}
.bl-benim-sat span{font-size:11.5px; font-weight:600; color:var(--bl-tx3)}
.bl-benim-sat b{font-size:13px; font-weight:900; color:var(--bl-tx); font-variant-numeric:tabular-nums}
.bl-benim-sat.vurgu b{font-size:18px; color:#fff}
.bl-benim-sat.bekleyen span{color:#fbbf24}
.bl-benim-ipucu{
  margin-top:2px; padding-top:8px; border-top:1px solid var(--bl-line);
  font-size:11px; font-weight:600; color:var(--bl-tx3); line-height:1.55;
}
.bl-benim-ipucu b{color:#fff}

/* Bilet kuralı: artan tutar devretmez. Katılım açıkken herkese gösterilir. */
.bl-not{
  margin:-2px 0 0; padding:9px 12px; border-radius:12px;
  border:1px dashed color-mix(in srgb, var(--k) 30%, transparent);
  background:color-mix(in srgb, var(--k) 7%, transparent);
  font-size:11px; font-weight:600; line-height:1.55; color:var(--bl-tx2);
}
.bl-not b{color:#fff}

/* ---------- bilet numaraları ---------- */
.bl-numaralar{
  padding:11px 12px; border-radius:14px;
  border:1px solid rgba(167,139,250,.26); background:rgba(167,139,250,.07);
}
.bl-numaralar-b{
  margin-bottom:7px; font-family:var(--bl-mono); font-size:8.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#c4b5fd;
}
.bl-numaralar-l{display:flex; flex-wrap:wrap; gap:5px; max-height:96px; overflow:auto}
.bl-numaralar-l span{
  padding:3px 8px; border-radius:7px;
  font-family:var(--bl-mono); font-size:11px; font-weight:700; color:#ddd6fe;
  background:rgba(5,9,18,.6); border:1px solid rgba(167,139,250,.3);
}

/* ---------- kazandın ---------- */
.bl-kazandim{
  display:flex; flex-direction:column; gap:5px; padding:12px 13px; border-radius:14px;
  border:1px solid rgba(52,211,153,.4);
  background:linear-gradient(150deg,rgba(52,211,153,.16),rgba(5,9,18,.6));
}
.bl-kazandim > b{font-size:14px; font-weight:900; color:#a7f3d0}
.bl-kazandim span{font-size:11.5px; font-weight:600; color:var(--bl-tx2)}
.bl-kazandim span b{color:#fff}

/* ---------- eylem ---------- */
.bl-eylem{margin-top:auto}
.bl-btn{
  display:flex; align-items:center; justify-content:center; width:100%;
  height:44px; padding:0 16px; border-radius:13px; cursor:pointer; border:0;
  font-family:inherit; font-size:12.5px; font-weight:800; text-align:center;
  color:#1a1035; background:linear-gradient(135deg,#ddd6fe,var(--bl-mor));
  box-shadow:0 12px 28px -14px rgba(167,139,250,.95);
  transition:filter .16s, transform .16s;
}
.bl-btn:hover{filter:brightness(1.06); transform:translateY(-1px)}
.bl-btn.is-ikincil{
  color:var(--bl-tx2); background:linear-gradient(155deg,rgba(17,26,46,.9),rgba(11,17,32,.95));
  border:1px solid var(--bl-line2); box-shadow:none;
}
.bl-btn.is-ikincil:hover{color:#fff; border-color:color-mix(in srgb,var(--k) 55%,transparent)}
.bl-btn.is-canli{
  color:#2a0a2a; background:linear-gradient(135deg,#f5d0fe,#e879f9);
  box-shadow:0 12px 28px -14px rgba(232,121,249,.95);
}
.bl-btn.is-pasif{
  color:var(--bl-tx4); background:rgba(148,169,214,.06); border:1px solid var(--bl-line);
  box-shadow:none; cursor:default;
}
.bl-btn.is-pasif:hover{transform:none; filter:none}

/* ---------- geçmiş başlığı ---------- */
.bl-gecmis-bas{display:flex; align-items:center; gap:14px; margin:30px 0 16px}
.bl-gecmis-bas span{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--bl-line2))}
.bl-gecmis-bas span:last-child{background:linear-gradient(90deg,var(--bl-line2),transparent)}
.bl-gecmis-bas b{
  font-family:var(--bl-mono); font-size:9.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bl-tx3); white-space:nowrap;
}

/* ---------- boş durum ---------- */
.bl-bos{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:46px 24px; border-radius:20px; border:1px dashed var(--bl-line2);
  background:linear-gradient(180deg,rgba(14,20,36,.6),rgba(6,10,20,.8));
}
.bl-bos b{font-size:15px; font-weight:900; color:#fff}
.bl-bos span{font-size:12.5px; font-weight:500; color:var(--bl-tx3); max-width:420px; line-height:1.6}
.bl-bos-cta{
  margin-top:6px; display:inline-flex; align-items:center; height:38px; padding:0 20px;
  border-radius:999px; font-size:11.5px; font-weight:800; color:#1a1035;
  background:linear-gradient(135deg,#ddd6fe,var(--bl-mor));
}

@media (max-width:560px){
  .bl-head h1{font-size:18px}
  .bl-head-r{width:100%; margin-left:0}
  .bl-izgara{grid-template-columns:1fr; gap:13px}
  .bl-kart{padding:14px; border-radius:17px}
  .bl-gorsel{margin:-14px -14px 3px}
  .bl-gorsel img{height:116px}
  .bl-adimlar{grid-template-columns:1fr 1fr; gap:8px}
  .bl-adimlar li{padding:11px 11px 11px 38px}
  .bl-odul b{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .bl-kart,.bl-btn,.bl-chip{transition:none}
  .bl-canli .bl-durum i{animation:none}
}