/* ==========================================================================
   SÜRELİ ETKİNLİKLER — premium sayfa tasarımı
   --------------------------------------------------------------------------
   Kapsam: yalnızca events.php. Tüm kurallar .te-page altında toplanmıştır;
   hiçbir global sınıf (.card, .btn, .container, .badge, .row) değiştirilmez.

   Neden Tailwind değil: bu projede Tailwind artık statik bir dosyadan
   geliyor (assets/nexus-tailwind.css) ve o dosya kaynak taranarak
   üretildi. Kaynakta geçmeyen yeni bir utility sınıfı yazılırsa CSS
   üretilmez ve sessizce çalışmaz. Bu yüzden yeni düzen elle yazıldı.

   Sayaç motoruna dokunulmaz: .nx-cd / data-end sözleşmesi korunur,
   yalnızca kapsayıcısı biçimlendirilir.
   ========================================================================== */

.te-page{
  /* Renk paleti — sayfa dışına sızmasın diye kök sınıfa bağlı */
  --te-gold:#f5c451;      --te-gold-2:#ffdf8a;
  --te-violet:#8b5cf6;    --te-violet-2:#a78bfa;
  --te-cyan:#38bdf8;      --te-emerald:#34d399;
  --te-rose:#fb7185;

  --te-bg:#080d18;
  --te-pane:rgba(17,24,42,.92);
  --te-pane-2:rgba(11,17,32,.96);
  --te-line:rgba(148,169,214,.13);
  --te-line-2:rgba(148,169,214,.24);

  --te-tx:#f1f5f9;  --te-tx-2:#b6c3da;  --te-tx-3:#7d8ca6;  --te-tx-4:#5b6980;

  --te-r-lg:24px; --te-r-md:16px; --te-r-sm:11px;
  --te-gap:18px;

  display:flex; flex-direction:column; gap:26px;
  container-type:inline-size;
}

/* =========================================================
   1) HERO — referans gorselle birebir
   Olculer referanstan alindi: kart ici 1511x356 (4.24:1).
   Sayfa kabi ~1480px oldugu icin degerler neredeyse 1:1 oturur;
   dar ekranlarda cqi ile orantili kucultulur.
   ========================================================= */
.te-hero{
  position:relative; overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(124,92,214,.26);
  background:
    radial-gradient(90% 130% at 88% 55%, rgba(124,58,237,.30), transparent 62%),
    linear-gradient(100deg,#01040d 0%,#03071a 40%,#080529 72%,#0e0736 100%);
  box-shadow:0 30px 70px -46px #000, inset 0 1px 0 rgba(255,255,255,.05);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(18px,1.6cqi,26px);
  padding:clamp(22px,2.4cqi,36px) clamp(20px,2.7cqi,42px);
  min-height:clamp(230px,23.6cqi,356px);
}
/* Sag taraftaki illustrasyon: referans gorselden kesildi, sol kenari
   yumusak gecisli oldugu icin kutu zeminine kaynasir. */
.te-hero-art{
  position:absolute; right:0; top:0; height:100%; width:auto; max-width:60%;
  z-index:1; pointer-events:none; object-fit:cover; object-position:right center;
}
.te-hero-l{display:flex; align-items:center; gap:clamp(16px,1.9cqi,30px); position:relative; z-index:2}
/* Ikon karosu: ici koyu, kenari altin (referansta dolu degil, cerceve) */
.te-hero-icon{
  flex:none; display:grid; place-items:center;
  width:clamp(64px,7.4cqi,112px); height:clamp(64px,7.4cqi,112px);
  border-radius:clamp(16px,1.7cqi,26px);
  font-size:clamp(26px,3cqi,45px); color:#f6cf5e;
  background:linear-gradient(160deg,rgba(20,14,8,.9),rgba(8,6,14,.95));
  border:2px solid #f3bf49;
  box-shadow:0 0 34px -8px rgba(243,191,73,.75), inset 0 0 26px -8px rgba(243,191,73,.5);
  text-shadow:0 0 18px rgba(246,207,94,.75);
}
.te-hero-c{min-width:0}
.te-eyebrow{
  font-size:clamp(10px,1.02cqi,15px); font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:#eebe49; margin-bottom:clamp(6px,.6cqi,10px);
}
.te-hero h1{
  margin:0; font-weight:900; letter-spacing:-.02em; line-height:1.04;
  font-size:clamp(28px,3.75cqi,56px);
  background:linear-gradient(100deg,#ffffff 0%,#f1eefb 38%,#c9a6f7 78%,#b184f2 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#f4f1fb;
}
.te-hero p{
  margin:clamp(8px,.8cqi,13px) 0 0; color:#94a0b8; font-weight:600;
  font-size:clamp(12px,1.16cqi,17px); line-height:1.55; max-width:46ch;
}
.te-hero-r{display:flex; gap:clamp(10px,1.05cqi,16px); flex-wrap:wrap; position:relative; z-index:2}

/* Butonlar: referanstaki gibi koyu zeminli, biri mor biri camgobegi cerceveli */
.te-hero .te-btn{
  display:inline-flex; align-items:center; gap:clamp(8px,.85cqi,13px);
  padding:0 clamp(14px,1.5cqi,24px); height:clamp(42px,3.75cqi,56px);
  border-radius:clamp(11px,.95cqi,14px); white-space:nowrap; cursor:pointer;
  font-size:clamp(10px,.92cqi,14px); font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:#fff; backdrop-filter:blur(6px);
  transition:transform .18s cubic-bezier(.4,0,.2,1), filter .18s, border-color .18s;
}
.te-hero .te-btn:hover{transform:translateY(-2px); filter:brightness(1.12)}
.te-hero .te-btn i{font-size:1.15em}
.te-hero .te-btn-mor{
  background:linear-gradient(150deg,#2c1266,#1a0d41);
  border:1px solid #a15eef;
  box-shadow:0 14px 34px -18px rgba(161,94,239,.95), inset 0 1px 0 rgba(255,255,255,.12);
}
.te-hero .te-btn-mor i{color:#c9a0ff}
.te-hero .te-btn-cam{
  background:linear-gradient(150deg,#030c1f,#010610);
  border:1px solid #3d8fb8;
  box-shadow:0 14px 34px -18px rgba(61,143,184,.8), inset 0 1px 0 rgba(255,255,255,.08);
}
.te-hero .te-btn-cam i{color:#9beefb}

@container (max-width:820px){
  .te-hero-art{opacity:.32; max-width:78%}
  .te-hero p{max-width:none}
}
@container (max-width:520px){
  /* Dar ekranda illüstrasyon metnin yanina sigmaz; gizlemek yerine
     kutunun tamamini kaplayan sonuk bir ortam katmanina donusur.
     Metnin okunurlugu icin uzerine koyu bir perde cekilir. */
  .te-hero-art{
    display:block; width:100%; height:100%; max-width:none;
    object-fit:cover; object-position:72% center; opacity:.30;
  }
  .te-hero::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(100deg,rgba(4,7,18,.94) 0%,rgba(4,7,18,.82) 46%,rgba(6,4,26,.66) 100%);
  }
  .te-hero-l{gap:13px}
  .te-hero-r .te-btn{flex:1; justify-content:center}
  .te-hero p{text-shadow:0 2px 14px rgba(2,5,14,.95)}
}

/* =========================================================
   2) KPI ŞERİDİ
   ========================================================= */
.te-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--te-gap)}
.te-kpi{
  position:relative; overflow:hidden; padding:17px 19px;
  border-radius:var(--te-r-md); border:1px solid var(--te-line);
  background:linear-gradient(158deg,var(--te-pane),var(--te-pane-2));
  box-shadow:0 20px 46px -34px #000, inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .2s cubic-bezier(.4,0,.2,1), border-color .2s;
}
.te-kpi:hover{transform:translateY(-3px); border-color:var(--te-line-2)}
.te-kpi::after{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,transparent,var(--k),transparent); opacity:.75;
}
/* Yatay düzen: solda ışıklı yuvarlak ikon, sağda metin */
.te-kpi{display:flex; align-items:center; gap:15px}
.te-kpi-i{
  width:50px; height:50px; flex:none; display:grid; place-items:center; border-radius:50%;
  font-size:19px; color:var(--k);
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--k) 26%,transparent), color-mix(in srgb,var(--k) 9%,transparent));
  border:1px solid color-mix(in srgb,var(--k) 34%,transparent);
  box-shadow:0 0 26px -8px color-mix(in srgb,var(--k) 70%,transparent), inset 0 1px 0 rgba(255,255,255,.14);
}
.te-kpi-c{min-width:0; flex:1}
/* Görsel ikon kullanıldığında: karo tasarımı kendi içinde geldiği için
   daire zemin ve kenarlık kaldırılır, yalnızca renkli ışık bırakılır.
   Görsel yüklenemezse .img sınıfı JS ile kalkar ve yukarıdaki daire
   görünümü ile Font Awesome ikonu geri gelir. */
.te-kpi-i.img{
  width:62px; height:62px; border-radius:16px;
  background:none; border:0;
  box-shadow:0 6px 20px -8px color-mix(in srgb,var(--k) 80%,transparent);
}
.te-kpi-i.img>i{display:none}
.te-kpi-i img{width:100%; height:100%; object-fit:contain; display:block}
.te-kpi-c span{display:block; font-size:9px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; color:var(--te-tx-4)}
.te-kpi-c b{
  display:block; margin-top:6px; font-size:clamp(21px,1.1cqi + 15px,27px); font-weight:900; color:#fff;
  line-height:1; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.te-kpi-c small{display:block; margin-top:6px; font-size:9.5px; font-weight:700; color:var(--te-tx-4)}

/* =========================================================
   3) BÖLÜM BAŞLIĞI
   ========================================================= */
.te-sec{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:2px}
.te-sec h2{
  margin:0; display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:var(--te-tx);
}
.te-sec h2 i{color:var(--te-gold); font-size:14px}
.te-sec h2 em{
  font-style:normal; font-size:10px; font-weight:800; color:var(--te-tx-4);
  letter-spacing:.06em; padding:3px 9px; border-radius:99px;
  background:rgba(148,169,214,.08); border:1px solid var(--te-line);
}

/* =========================================================
   4) ÖNE ÇIKAN ETKİNLİK (featured)
   ========================================================= */
.te-feat-wrap{position:relative}
.te-feat{
  display:grid; grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);
  border-radius:var(--te-r-lg); overflow:hidden;
  border:1px solid rgba(245,196,81,.34);
  background:linear-gradient(150deg,#131b30,#0a1020);
  box-shadow:0 34px 80px -50px #000, 0 0 0 1px rgba(245,196,81,.07), inset 0 1px 0 rgba(255,255,255,.045);
}
.te-feat[hidden]{display:none}

/* =========================================================
   4b) YATAY KARUSEL — aktif etkinlik rayı
   .is-rail sınıfı PHP'de count($aktif) > 1 kapısıyla basılır: tek
   etkinlikte buradaki hiçbir kural eşleşmez.
   --te-rail: JS'in "yeni CSS canlı mı" sınaması (yayın sırası güvenliği).
   Raya container-type VERİLMEZ — tek konteyner .te-page kalmalı.
   ========================================================= */
.te-feat-wrap.is-rail{
  --te-rail:1;
  --te-peek:74px;
  display:flex; align-items:flex-start; gap:18px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  padding:2px 0 14px;              /* gölgeye pay */
  scrollbar-width:none;            /* Windows'ta OS çubuğu bütçeyi yemesin */
}
.te-feat-wrap.is-rail::-webkit-scrollbar{display:none}

/* min-width:0 zorunlu: yoksa minmax(300px,.86fr) yüzünden kart daralmaz
   ve gövde 620-980px bandında yatay kayar. */
.te-feat-wrap.is-rail > .te-feat{
  flex:0 0 calc(100% - var(--te-peek)); min-width:0;
  scroll-snap-align:start; scroll-snap-stop:always;
  contain:paint;                   /* ekran dışı blur katmanları boyanmasın */
}
/* Son slayt: start hizası azami kaydırmanın ötesinde kalır, end ile tam oturur */
.te-feat-wrap.is-rail > .te-feat:last-child{scroll-snap-align:end}
/* SİGORTA: eski teSec hidden yazsa bile ray çökmez, paneller görünür kalır. */
.te-feat-wrap.is-rail > .te-feat[hidden]{display:grid}

/* ---- Seçici şerit artık kartın ÜSTÜNDE (DOM'da taşındı, order kullanılmadı).
   Değerler yükseklik nötr: eski 2+kart+16+şerit = 18 ; yeni 2+4+şerit+12+kart = 18. */
.te-live{display:flex; flex-direction:column}
.te-live > .te-feat-wrap{min-width:0}
.te-live > .te-sel-wrap{margin:4px 0 12px}
.te-sel{overscroll-behavior-x:contain}   /* trackpad yatay fling geri-git tetiklemesin */

/* Aktif sekmeden karta bakan ok — şerit ile kart arasındaki nedensellik bağı.
   Yarı köşegen 6.4px < .te-sel'in 9px alt dolgusu → kırpılmaz. */
.te-live > .te-sel-wrap .te-sel-card{position:relative}
.te-live > .te-sel-wrap .te-sel-card.is-active::after{
  content:''; position:absolute; left:50%; bottom:-4px; width:9px; height:9px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(24,20,10,.98);
  border-right:1px solid rgba(245,196,81,.6);
  border-bottom:1px solid rgba(245,196,81,.6);
}

/* ---- başlık göstergeleri: .te-sec satırının boş sağını kullanır ---- */
.te-sec-live{flex-wrap:wrap; row-gap:6px}
.te-sec-live h2{flex-wrap:wrap; min-width:0}
.te-rail-hd{flex:none; display:flex; align-items:center; gap:8px}
.te-rail-ct{
  display:inline-flex; align-items:baseline; padding:4px 10px; border-radius:99px;
  font-size:10px; font-weight:900; letter-spacing:.06em;
  color:var(--te-tx-3);
  background:rgba(148,169,214,.08); border:1px solid var(--te-line);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.te-rail-ct b{color:var(--te-gold); font-size:11px}
.te-rail-dots{display:flex; align-items:center}
.te-rail-dot{                                    /* 40x40 dokunma hedefi */
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  padding:0; background:none; border:0; cursor:pointer;
}
.te-rail-dot span{
  display:block; width:8px; height:8px; border-radius:99px;
  background:rgba(148,169,214,.3);
  transition:width .2s cubic-bezier(.4,0,.2,1), background .2s, box-shadow .2s;
}
.te-rail-dot:hover span{background:rgba(148,169,214,.6)}
.te-rail-dot.is-on span{
  width:20px; background:linear-gradient(90deg,var(--te-gold),var(--te-gold-2));
  box-shadow:0 0 12px -2px rgba(245,196,81,.9);
}

/* --- sol: görsel --- */
.te-feat-media{
  position:relative; overflow:hidden; min-height:330px;
  background:#070b14; display:grid; place-items:center;
}
/* Bulanık arka plan: kare/dikey/geniş her orana uyum sağlar, kırpma yok */
.te-feat-media .te-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(30px) saturate(1.5) brightness(.6); transform:scale(1.3); opacity:.85;
}
.te-feat-media .te-img{
  position:relative; z-index:2; width:100%; height:100%;
  object-fit:contain; padding:26px 28px 74px;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
}
.te-feat:hover .te-feat-media .te-img{transform:scale(1.035)}
.te-feat-media::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(105deg,transparent 62%,rgba(10,16,32,.42));
}
.te-feat-media .te-void{position:relative; z-index:2; font-size:44px; color:rgba(245,196,81,.35)}
/* Geniş banner görsellerde (ör. 600x132) panelin altında büyük boşluk
   kalıyordu. Boşluk ödül yazısıyla anlamlandırılır; görsel kare veya
   dikeyse yazı görselin üstüne binmesin diye alta hizalanır. */
.te-feat-cap{
  position:absolute; z-index:4; left:0; right:0; bottom:0; padding:18px 22px 20px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  background:linear-gradient(to top, rgba(6,10,20,.94), rgba(6,10,20,.55) 45%, transparent);
  pointer-events:none;
}
.te-feat-cap b{
  display:block; font-size:clamp(19px,1.6cqi + 9px,26px); font-weight:900; color:#fff;
  line-height:1.05; letter-spacing:-.02em; text-shadow:0 3px 16px rgba(0,0,0,.85);
}
.te-feat-cap small{
  display:block; margin-top:5px; font-size:9px; font-weight:900;
  letter-spacing:.16em; text-transform:uppercase; color:var(--te-gold);
}
.te-feat-cap .te-cap-win{
  flex:none; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:99px;
  font-size:10px; font-weight:900; letter-spacing:.06em; color:#eaf2ff;
  background:rgba(8,13,24,.8); border:1px solid rgba(148,169,214,.28); backdrop-filter:blur(8px);
}

/* rozetler */
.te-chip{
  position:absolute; z-index:4; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:99px; backdrop-filter:blur(9px);
  font-size:9px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
}
.te-chip-live{
  top:15px; left:15px; color:#062b1c;
  background:linear-gradient(135deg,#4ade80,#22c55e); border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 22px -10px rgba(34,197,94,.9);
}
.te-chip-live i{width:6px; height:6px; border-radius:50%; background:#062b1c; animation:teBlink 1.6s ease-in-out infinite}
@keyframes teBlink{0%,100%{opacity:1}50%{opacity:.25}}
.te-chip-badge{
  top:15px; right:15px; color:#2a1c00;
  background:linear-gradient(135deg,var(--te-gold-2),var(--te-gold)); border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 22px -10px rgba(245,196,81,.85);
}
.te-chip-crypto{
  bottom:15px; left:15px; gap:7px; color:var(--te-tx);
  background:rgba(8,13,24,.82); border:1px solid var(--te-line-2);
}
.te-chip-crypto img{width:15px; height:15px; border-radius:50%; background:#fff}

/* --- sağ: içerik --- */
.te-feat-body{padding:26px 28px; display:flex; flex-direction:column; gap:15px; min-width:0}
.te-feat-title{display:flex; align-items:flex-start; gap:10px; min-width:0}
.te-feat-title h3{
  margin:0; font-size:clamp(19px,1.5cqi + 11px,25px); font-weight:900; color:#fff;
  letter-spacing:-.02em; line-height:1.2; min-width:0; overflow-wrap:anywhere;
}
.te-feat-title .te-verify{flex:none; margin-top:4px; font-size:15px; color:var(--te-cyan)}
.te-feat-lead{
  margin:0; font-size:12.5px; font-weight:600; color:var(--te-tx-3); line-height:1.6;
  overflow-wrap:anywhere;
}

/* şartlar paneli */
.te-terms{
  border-radius:var(--te-r-md); border:1px solid var(--te-line);
  background:linear-gradient(150deg,rgba(8,13,24,.85),rgba(11,17,32,.6));
  padding:14px 16px;
}
.te-terms-h{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px;
}
.te-terms-h b{
  display:inline-flex; align-items:center; gap:8px;
  font-size:9.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--te-tx-2);
}
.te-terms-h b i{color:var(--te-gold)}
.te-terms-more{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:5px 10px; border-radius:9px; font-size:9px; font-weight:850;
  letter-spacing:.07em; text-transform:uppercase;
  background:rgba(148,169,214,.07); border:1px solid var(--te-line); color:var(--te-tx-3);
  transition:color .16s, border-color .16s, background .16s;
}
.te-terms-more:hover{color:#fff; border-color:var(--te-line-2); background:rgba(148,169,214,.13)}
.te-terms-more i{transition:transform .22s ease}
.te-terms.is-open .te-terms-more i{transform:rotate(90deg)}
/* İki sütun: kısa şart listesinde boşluk kalmasın diye otomatik akış */
.te-terms-list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:6px 20px; margin:0; padding:0; list-style:none;
}
.te-terms-list li{
  display:flex; align-items:flex-start; gap:8px;
  font-size:11.5px; font-weight:650; color:var(--te-tx-2); line-height:1.55;
  overflow-wrap:anywhere;
}
.te-terms-list li i{flex:none; margin-top:3px; font-size:9px; color:var(--te-emerald)}
/* 4'ten fazlası katlanır; açılınca tamamı görünür */
.te-terms:not(.is-open) .te-terms-list li.te-hid{display:none}

/* sayaç kabı — motorun ürettiği .cd-box'lar korunur */
/* Sayaç ve metrikler referanstaki gibi TEK şeritte durur */
.te-strip{
  display:flex; align-items:stretch; gap:12px; flex-wrap:wrap;
  padding:12px 13px; border-radius:var(--te-r-md);
  background:linear-gradient(150deg,rgba(8,13,24,.8),rgba(11,17,32,.55));
  border:1px solid var(--te-line);
}
.te-count{display:flex; align-items:center; flex:none}
.te-count .nx-cd{gap:.4rem}
/* Sayaç kutuları: motor üretir, biçimi buradan gelir. Her kutunun
   üstüne küçük bir ikon eklenir (motor koduna dokunulmadan). */
.te-strip .nx-cd .cd-box{
  position:relative; min-width:64px; padding:10px 8px 8px;
  border-radius:13px; background:linear-gradient(160deg,#161f36,#0b1120);
  border:1px solid rgba(245,196,81,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px -16px rgba(245,196,81,.55);
}
.te-strip .nx-cd .cd-box::before{
  font-family:"Font Awesome 6 Free"; font-weight:900; font-size:8px;
  color:var(--te-gold); opacity:.85; display:block; text-align:center; margin-bottom:3px;
}
.te-strip .nx-cd .cd-box:nth-child(1)::before{content:"\f783"}
.te-strip .nx-cd .cd-box:nth-child(3)::before{content:"\f017"}
.te-strip .nx-cd .cd-box:nth-child(5)::before{content:"\f252"}
.te-strip .nx-cd .cd-box:nth-child(7)::before{content:"\f2f2"}
.te-strip .nx-cd .cd-num{font-size:22px; color:#fff}
.te-strip .nx-cd .cd-lbl{font-size:7.5px; letter-spacing:.13em; color:var(--te-tx-4)}
.te-strip .nx-cd .cd-sep{color:rgba(245,196,81,.35); margin-top:1.1rem}
.te-strip-div{width:1px; background:var(--te-line); flex:none; margin:2px 3px}
.te-count-x{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:9px 15px; border-radius:var(--te-r-sm);
  background:rgba(8,13,24,.7); border:1px solid var(--te-line);
  font-size:11px; font-weight:850; color:var(--te-rose); letter-spacing:.1em; text-transform:uppercase;
}

/* metrikler */
.te-metrics{display:flex; align-items:center; gap:10px; flex:1; flex-wrap:wrap; min-width:0}
.te-metric{
  display:flex; align-items:center; gap:10px; padding:9px 13px; flex:1; min-width:118px;
  border-radius:var(--te-r-sm); background:rgba(8,13,24,.66); border:1px solid var(--te-line);
}
.te-metric-i{
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px; font-size:13px;
  color:var(--k); background:color-mix(in srgb,var(--k) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 28%,transparent);
}
/* Görsel ikon: madalyon kendi çerçevesini taşıdığı için zemin ve
   kenarlık kaldırılır, yalnızca renk uyumlu ışık kalır. Görsel
   yüklenemezse .img sınıfı düşer ve yukarıdaki kutu + Font Awesome
   ikonu geri gelir. */
.te-metric-i.img{
  background:none; border:0;
  box-shadow:0 4px 14px -6px color-mix(in srgb,var(--k) 80%,transparent);
}
.te-metric-i.img>i{display:none}
.te-metric-i img{width:100%; height:100%; object-fit:contain; display:block}
.te-metric span{min-width:0}
.te-metric b{
  display:block; font-size:15px; font-weight:900; color:#fff; line-height:1.1;
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.te-metric small{display:block; margin-top:2px; font-size:8.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--te-tx-4)}

/* eylem alanı */
.te-cta{margin-top:auto}
.te-need{
  display:flex; align-items:center; gap:13px; padding:13px 15px; text-decoration:none;
  border-radius:var(--te-r-md); border:1px solid rgba(139,92,246,.4);
  background:linear-gradient(120deg,rgba(139,92,246,.19),rgba(56,189,248,.11));
  transition:transform .18s cubic-bezier(.4,0,.2,1), border-color .18s;
}
.te-need:hover{transform:translateY(-2px); border-color:rgba(139,92,246,.75)}
.te-need-i{
  width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:12px; font-size:15px;
  color:var(--te-violet-2); background:rgba(139,92,246,.2); border:1px solid rgba(139,92,246,.38);
}
.te-need-i img{width:21px; height:21px; object-fit:contain; border-radius:50%; background:#fff; padding:1px}
.te-need-c{flex:1; min-width:0}
.te-need-c b{display:block; font-size:11.5px; font-weight:900; color:#fff; letter-spacing:.05em; text-transform:uppercase}
.te-need-c small{display:block; margin-top:3px; font-size:10px; font-weight:650; color:var(--te-tx-3); overflow-wrap:anywhere}
/* Sponsor CTA: başlık ve amblem tek parça görsel olarak gelir.
   Görsel yüklenemezse .te-need-sp sınıfı düşer ve önceki ikon+başlık
   düzeni geri gelir; kart hiçbir koşulda boş kalmaz. */
.te-need-art{
  flex:none; width:clamp(212px,26cqi,286px); height:auto; display:block;
  filter:drop-shadow(0 10px 22px rgba(139,92,246,.45));
}
.te-need-sp{gap:14px}
.te-need-sp .te-need-i{display:none}
.te-need-sp .te-need-c b{display:none}
.te-need-sp .te-need-c small{font-size:11px; color:#c3b5e8; font-weight:700}

.te-need-go{
  flex:none; display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:11px;
  font-size:10px; font-weight:900; letter-spacing:.09em; text-transform:uppercase; color:#fff;
  background:linear-gradient(135deg,var(--te-violet),#6d28d9);
  box-shadow:0 10px 26px -13px rgba(139,92,246,.95);
}
.te-join{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 20px; border-radius:var(--te-r-md); cursor:pointer;
  font-size:12px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:#22160a;
  background:linear-gradient(135deg,var(--te-gold-2),var(--te-gold));
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 16px 38px -18px rgba(245,196,81,.95), inset 0 1px 0 rgba(255,255,255,.55);
  transition:transform .18s cubic-bezier(.4,0,.2,1), filter .18s;
}
.te-join:hover{transform:translateY(-2px); filter:brightness(1.07)}
/* Giriş butonu: tamamı kullanıcının verdiği görsel. Görsel
   yüklenemezse .te-join-art sınıfı düşer ve altın gradyanlı metin
   butonu geri gelir — buton hiçbir koşulda boş kalmaz. */
.te-join-art{
  background:none; border:0; box-shadow:none; padding:0;
  width:100%; max-width:440px; margin:0 auto; display:block;
  filter:drop-shadow(0 12px 26px rgba(245,196,81,.4));
}
.te-join-art:hover{transform:translateY(-2px) scale(1.012); filter:drop-shadow(0 16px 32px rgba(245,196,81,.6))}
.te-join-art img{width:100%; height:auto; display:block}
.te-join-art .te-join-tx{display:none}
.te-join-tx{display:inline-flex; align-items:center; gap:10px}

.te-state{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 18px; border-radius:var(--te-r-md);
  font-size:11px; font-weight:850; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(8,13,24,.7); border:1px solid var(--te-line); color:var(--te-tx-3);
}
.te-state.ok{background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.34); color:var(--te-emerald)}
.te-state.admin{background:rgba(56,189,248,.1); border-color:rgba(56,189,248,.3); color:var(--te-cyan)}

/* ilerleme çubuğu */
.te-prog{margin-top:3px}
.te-prog-track{height:5px; border-radius:99px; background:rgba(148,169,214,.12); overflow:hidden}
.te-prog-fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--te-gold),var(--te-gold-2));
  box-shadow:0 0 14px -2px rgba(245,196,81,.85);
}
.te-prog-lbl{display:flex; justify-content:space-between; margin-top:7px; font-size:9px; font-weight:800; color:var(--te-tx-4); letter-spacing:.06em}

/* =========================================================
   5) ETKİNLİK SEÇİCİ (2+ aktif etkinlik)
   ========================================================= */
.te-sel-wrap{position:relative; display:flex; align-items:center; gap:10px; margin-top:16px}
.te-sel{
  flex:1; min-width:0; display:flex; gap:12px; overflow-x:auto; padding:3px 1px 9px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
  scrollbar-color:rgba(148,169,214,.28) transparent;
}
.te-sel::-webkit-scrollbar{height:5px}
.te-sel::-webkit-scrollbar-thumb{background:rgba(148,169,214,.28); border-radius:99px}
.te-sel::-webkit-scrollbar-track{background:transparent}
.te-sel-card{
  flex:0 0 232px; scroll-snap-align:start; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:11px; padding:11px 12px;
  border-radius:var(--te-r-md); border:1px solid var(--te-line);
  background:linear-gradient(150deg,var(--te-pane),var(--te-pane-2));
  transition:transform .18s cubic-bezier(.4,0,.2,1), border-color .18s, background .18s;
}
.te-sel-card:hover{transform:translateY(-2px); border-color:var(--te-line-2)}
.te-sel-card.is-active{
  border-color:rgba(245,196,81,.6);
  background:linear-gradient(150deg,rgba(245,196,81,.14),rgba(11,17,32,.96));
  box-shadow:0 0 0 1px rgba(245,196,81,.22), 0 16px 34px -22px rgba(245,196,81,.6);
}
.te-sel-thumb{
  width:44px; height:44px; flex:none; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; background:#0a1020; border:1px solid var(--te-line);
}
.te-sel-thumb img{width:100%; height:100%; object-fit:contain; padding:4px}
.te-sel-thumb i{font-size:16px; color:var(--k,#7d8ca6)}
/* Görseli olmayan etkinlikte renkli ikon döşemesi (referanstaki gibi) */
.te-sel-thumb.tint{
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb,var(--k) 30%,transparent), rgba(10,16,32,.95));
  border-color:color-mix(in srgb,var(--k) 34%,transparent);
  box-shadow:0 0 20px -8px color-mix(in srgb,var(--k) 75%,transparent);
}
.te-sel-c{flex:1; min-width:0}
.te-sel-c strong{
  display:block; font-size:11.5px; font-weight:850; color:var(--te-tx);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.te-sel-c .te-sel-time{
  display:block; margin-top:3px; font-size:9.5px; font-weight:800; color:var(--te-tx-4);
  font-variant-numeric:tabular-nums;
}
.te-sel-c .te-sel-prize{
  display:block; margin-top:3px; font-size:9.5px; font-weight:850; color:var(--te-gold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.te-sel-card.is-active .te-sel-c strong{color:#fff}
.te-nav{
  flex:none; width:34px; height:34px; display:grid; place-items:center; cursor:pointer;
  border-radius:11px; font-size:12px;
  background:rgba(148,169,214,.07); border:1px solid var(--te-line); color:var(--te-tx-3);
  transition:color .16s, border-color .16s, background .16s, opacity .16s;
}
.te-nav:hover{color:#fff; border-color:var(--te-line-2); background:rgba(148,169,214,.14)}
.te-nav[disabled]{opacity:.3; cursor:default}

/* =========================================================
   6) BOŞ DURUM
   ========================================================= */
.te-empty{
  border-radius:var(--te-r-lg); border:1px dashed rgba(245,196,81,.28);
  background:radial-gradient(90% 120% at 50% 0%,rgba(245,196,81,.09),transparent 62%),linear-gradient(160deg,var(--te-pane),var(--te-pane-2));
  padding:62px 26px; text-align:center;
}
.te-empty i{font-size:38px; color:rgba(245,196,81,.5)}
.te-empty b{display:block; margin-top:16px; font-size:14px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:var(--te-tx)}
.te-empty span{display:block; margin-top:8px; font-size:11px; font-weight:650; color:var(--te-tx-4)}
.te-empty .te-btn{margin-top:20px}

/* =========================================================
   7) GEÇMİŞ ETKİNLİKLER
   ========================================================= */
.te-past{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:var(--te-gap)}
.te-past-card{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--te-r-md); border:1px solid var(--te-line);
  background:linear-gradient(158deg,var(--te-pane),var(--te-pane-2));
  box-shadow:0 20px 46px -36px #000;
  transition:transform .2s cubic-bezier(.4,0,.2,1), border-color .2s;
}
.te-past-card:hover{transform:translateY(-4px); border-color:var(--te-line-2)}
/* display:flex, tarayicinin [hidden] kuralini ezdigi icin acikca gizlenir */
.te-past-card[hidden]{display:none}
.te-past-cover{position:relative; height:118px; overflow:hidden; background:#070b14; display:grid; place-items:center}
.te-past-cover .te-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(24px) saturate(1.15) brightness(.5) grayscale(35%); transform:scale(1.3); opacity:.8;
}
.te-past-cover .te-img{position:relative; z-index:2; width:100%; height:100%; object-fit:contain; padding:14px 18px}
.te-past-cover .te-void{position:relative; z-index:2; font-size:26px; color:#3b475e}
.te-past-cover::after{content:''; position:absolute; inset:0; z-index:3; background:linear-gradient(to top,rgba(8,13,24,.9),transparent 62%)}
.te-past-badge{
  position:absolute; z-index:4; top:11px; left:11px;
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px;
  font-size:8.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(8,13,24,.8); border:1px solid rgba(148,169,214,.22); color:var(--te-tx-3);
  backdrop-filter:blur(8px);
}
.te-past-badge i{width:5px; height:5px; border-radius:50%; background:var(--te-tx-4)}
.te-past-b{padding:14px 15px; display:flex; flex-direction:column; gap:11px; flex:1}
.te-past-b h3{
  margin:0; font-size:12.5px; font-weight:850; color:#fff; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.te-past-date{display:flex; align-items:center; gap:6px; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--te-tx-4)}
.te-past-stats{display:flex; gap:8px; flex-wrap:wrap}
.te-pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:9px;
  font-size:10px; font-weight:750; color:var(--te-tx-3);
  background:rgba(8,13,24,.7); border:1px solid var(--te-line);
}
.te-pill b{color:#fff; font-weight:900; font-variant-numeric:tabular-nums}
.te-pill.win{background:rgba(245,196,81,.1); border-color:rgba(245,196,81,.26); color:var(--te-gold)}
.te-pill.win b{color:var(--te-gold-2)}
.te-past-btn{
  margin-top:auto; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 14px; border-radius:var(--te-r-sm); cursor:pointer;
  font-size:10px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; color:#2a1400;
  background:linear-gradient(135deg,#fb923c,#ea580c);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 26px -16px rgba(234,88,12,.95);
  transition:transform .18s cubic-bezier(.4,0,.2,1), filter .18s;
}
.te-past-btn:hover{transform:translateY(-2px); filter:brightness(1.07)}

/* =========================================================
   8) DUYARLI DAVRANIŞ
   Hedef çözünürlükler: 1920 / 1600 / 1440 / 1366 — %100 zoom.
   zoom veya transform:scale KULLANILMAZ; gerçek akışkan düzen.
   ========================================================= */
@container (max-width:1180px){
  .te-feat{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)}
  .te-feat-media{min-height:290px}
  .te-feat-body{padding:22px 22px}
  /* Sayaç + metrik tek satıra sığmadığında rastgele sarmak yerine
     düzenli iki kata ayrılır: üstte sayaç, altta üç eşit metrik. */
  .te-strip{flex-direction:column; align-items:stretch; gap:11px}
  .te-strip-div{width:auto; height:1px; margin:0}
  .te-count{justify-content:center}
  .te-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
  .te-metric{min-width:0}
}
@container (max-width:980px){
  .te-strip{flex-direction:column; align-items:stretch}
  .te-strip-div{display:none}
  .te-kpis{grid-template-columns:repeat(2,1fr)}
  .te-feat{grid-template-columns:1fr}
  .te-feat-media{min-height:210px}
  .te-feat-media .te-img{padding:20px 24px}
}
@container (max-width:620px){
  /* ============================================================
     MOBİL DÜZEN — ölçüme dayalı yeniden kurgu
     Önce: sayfa 1415px (1.7 ekran); KPI şeridi 234, kart 771.
     Hedef: her blok işini en az yerle görsün, hiçbir bilgi
     kaybolmasın. Sıkıştırma sırası: KPI, görsel, şartlar, şerit, CTA.
     ============================================================ */
  .te-page{gap:16px}
  .te-hero-icon{width:52px; height:52px; font-size:19px}

  /* KPI: 2x2 ızgarada 234px yiyordu. Dört tanesi tek satırda,
     ikon üstte, sayı altta — bir istatistik şeridi gibi. */
  .te-kpis{grid-template-columns:repeat(4,1fr); gap:7px}
  .te-kpi{flex-direction:column; align-items:center; text-align:center; gap:6px; padding:11px 4px}
  .te-kpi-i{width:34px; height:34px; font-size:14px}
  .te-kpi-i.img{width:38px; height:38px}
  .te-kpi-c{width:100%}
  .te-kpi-c span{font-size:8px; letter-spacing:.06em; line-height:1.2}
  .te-kpi-c b{margin-top:4px; font-size:16px}
  .te-kpi-c small{display:none}           /* alt açıklama masaüstünde kalır */

  /* Görsel: banner 3.9:1 olduğu için 16/9 kutuda üstte altta boşluk
     kalıyordu. Kutu görselin oranına yaklaştırıldı. */
  .te-feat-media{min-height:0; aspect-ratio:2.6/1}
  .te-feat-media .te-img{padding:12px 14px 44px}
  .te-feat-cap{padding:8px 12px 9px}
  .te-feat-cap b{font-size:17px}
  .te-feat-cap small{font-size:8.5px; margin-top:2px}
  .te-feat-cap .te-cap-win{padding:5px 9px; font-size:9px}

  .te-feat-body{padding:13px 12px; gap:10px}
  .te-feat-title h3{font-size:17px}

  /* Şartlar: mobilde 2 madde açık, gerisi "Tüm şartları gör" ile */
  .te-terms{padding:10px 11px}
  .te-terms-h{margin-bottom:7px}
  .te-terms-h b{font-size:9px}
  .te-terms-more{padding:6px 10px; font-size:9px}
  .te-terms-list{grid-template-columns:1fr; gap:4px}
  .te-terms-list li{font-size:10.5px; line-height:1.4}
  .te-terms:not(.is-open) .te-terms-list li:nth-child(n+3){display:none}

  /* Şerit: sayaç ve metrikler daha sıkı */
  .te-strip{padding:9px; gap:8px}
  .te-strip .nx-cd{width:100%; gap:.25rem}
  .te-strip .nx-cd .cd-box{flex:1; min-width:0; padding:6px 3px 5px; border-radius:10px}
  .te-strip .nx-cd .cd-num{font-size:17px}
  .te-strip .nx-cd .cd-lbl{font-size:8px; letter-spacing:.04em}
  .te-strip .nx-cd .cd-box::before{font-size:7.5px; margin-bottom:1px}
  .te-strip .nx-cd .cd-sep{display:none}
  .te-metrics{display:grid!important; grid-template-columns:repeat(3,1fr); gap:6px}
  .te-metric{flex-direction:column; align-items:center; text-align:center; gap:4px; padding:8px 4px; min-width:0}
  .te-metric-i{width:28px; height:28px; font-size:11px}
  .te-metric b{font-size:12px}
  .te-metric small{font-size:8px; letter-spacing:.04em}

  /* CTA: sponsor banneri tam genişlikte 130px'e çıkıyordu; sınırlandı */
  .te-need{flex-wrap:wrap; padding:10px 11px; gap:8px}
  .te-need-go{width:100%; justify-content:center; padding:10px 14px}
  .te-need-art{width:100%; max-width:250px; margin:0 auto}
  .te-need-sp{flex-direction:column; text-align:center}
  .te-need-sp .te-need-c{flex-basis:100%; text-align:center}
  .te-need-sp .te-need-c small{font-size:10.5px}
  .te-join{padding:12px 16px; font-size:11px}
  .te-join-art{max-width:300px; padding:0}
  .te-state{padding:11px 14px; font-size:10.5px}

  .te-prog-lbl{font-size:9px; margin-top:5px}
  .te-past{grid-template-columns:1fr 1fr; gap:10px}
  .te-sel-card{flex:0 0 200px}
  .te-nav{width:40px; height:40px; border-radius:13px; font-size:13px}

  /* Karusel: komşu karttan 24px görünür (36 peek - 12 gap) */
  .te-feat-wrap.is-rail{--te-peek:36px; gap:12px; padding:0 0 8px}
  .te-rail-dots{display:none}          /* mobilde jest yerli; genişlik bütçesi */
  .te-rail-ct{padding:3px 8px; font-size:9.5px}
  /* Oklar şeridin ~%29'unu yiyordu; gizlenince 2. sekme kartının çoğu görünür
     olur — 24px peek'ten çok daha güçlü "devamı var" sinyali. */
  .te-live > .te-sel-wrap .te-nav{display:none}
}
@container (max-width:400px){
  .te-kpis{grid-template-columns:repeat(4,1fr); gap:5px}
  .te-kpi{padding:9px 3px}
  .te-kpi-i.img{width:34px; height:34px}
  .te-kpi-c b{font-size:14px}
  .te-past{grid-template-columns:1fr}
}

/* Container query desteklemeyen tarayıcılar için güvenlik ağı */
@media (max-width:980px){
  .te-feat{grid-template-columns:1fr}
  .te-kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  /* KPI: 980px yedegi iki sutuna dusuruyor ve dosyada sonra geldigi
     icin konteyner kuralini eziyordu. Mobil yedek burada tekrarlanir. */
  .te-kpis{grid-template-columns:repeat(4,1fr); gap:7px}

  /* Konteyner sorgusu desteklemeyen tarayicilar icin yedek.
     Metrikler burada da uc sutun kalir; daha once tek sutuna
     dusuruyordu ve konteyner kuralini eziyordu (dosya sonunda
     oldugu icin sonra geliyor). */
  .te-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
  .te-metric{flex-direction:column; align-items:center; text-align:center; gap:5px; padding:9px 5px; min-width:0}
  .te-metric-i{width:30px; height:30px; font-size:11px}
  .te-metric b{font-size:12.5px}
  .te-metric small{font-size:8px}
  .te-past{grid-template-columns:1fr 1fr}
}
@media (max-width:400px){
  .te-kpis{grid-template-columns:repeat(4,1fr); gap:5px}
  .te-past{grid-template-columns:1fr}
}

/* Konteyner sorgusu desteklemeyen tarayıcı yedeği.
   Eşik 652: main'in dolgusu @media (max-width:639px) ile 12px, üstünde 16px.
   Yani konteyner tam 620px'e viewport 652px'te ulaşır — @container (max-width:620px)
   ile BİREBİR aynı bandı kapsar. Değerler Blok B ile aynı olmak zorunda. */
@media (max-width:652px){
  .te-feat-wrap.is-rail{--te-peek:36px; gap:12px; padding:0 0 8px}
  .te-rail-dots{display:none}
  .te-rail-ct{padding:3px 8px; font-size:9.5px}
  .te-live > .te-sel-wrap .te-nav{display:none}
  /* Konteyner blogundaki bu ikisinin yedegi bugune kadar eksikti */
  .te-sel-card{flex:0 0 200px}
  .te-nav{width:40px; height:40px; border-radius:13px; font-size:13px}
}
/* Mevcut kademe hatası: @container (max-width:400px) .te-past{1fr} kuralı,
   viewport 401-432 bandında @media (max-width:620px) içindeki 1fr 1fr
   tarafından eziliyordu (dosyada sonra geldiği için). 432 = 400 + 32. */
@media (max-width:432px){
  .te-past{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .te-page *,.te-page *::before,.te-page *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}