/* a3-explore-events — bu dosya tek bir ajana ait. polish.css'e dokunulmuyor.
   Yükleme sırası: … theme.css → polish.css → a1 → a3(bu dosya). Yani buradaki
   kurallar aynı özgüllükte olsalar bile önceki dosyaları geçer.

   Renkler DAİMA theme.css token'ları üzerinden. Ölçülen kontrastlar (WCAG):
     --mg-text  / --mg-surface    → koyu 17.5:1   aydınlık 17.1:1
     --mg-text  / --mg-surface-2  → koyu 16.5:1   aydınlık 16.0:1
     --mg-muted / --mg-surface    → koyu  7.5:1   aydınlık  5.7:1
     --mg-muted / --mg-surface-2  → koyu  6.9:1   aydınlık  5.1:1
     --mg-accent-ink / --mg-surface → koyu 5.5:1  aydınlık  6.4:1
     #fff / --mg-accent           → 4.6:1 (her iki temada aynı)
   --mg-faint (koyu #6b7480 / aydınlık #8a94a1) AYDINLIK temada beyaz üstünde
   yalnızca 3.1:1 veriyor; bu yüzden bu sayfalarda ikincil metin --mg-muted.

   ============================================================
   1) KEŞFET — afiş göstergesi (noktalar) ortada
   ============================================================
   Gösterge kabı iki sınıf taşıyor: `.explore-carousel-dots .xp-dots`.
   event-shell-standard.css onu `left:50%; transform:translateX(-50%)` ile
   ortalıyor; polish.css ise `left:0; right:0; justify-content:center` ile
   TAM GENİŞLİĞE yayıp içeriği ortalıyor. polish yalnızca left/right'ı ezdiği
   için ESKİ `transform` ayakta kalıyordu: tam genişlikteki şerit kendi
   genişliğinin yarısı kadar SOLA kayıyor, noktalar sol kenara düşüyordu.
   Çözüm: taşımayı sıfırla, ortalamayı tek bir yerde topla. */
.xp-hero-carousel .explore-carousel-dots,
.explore-carousel-dots.xp-dots {
  left: 0; right: 0; transform: none;
  display: flex; justify-content: center; gap: 7px;
}

/* ============================================================
   2) KEŞFET — afişin siyah çerçevesi kalksın
   ============================================================
   İki ayrı çerçeve üst üste biniyordu:
     a) explore-pro.css → `.xp-hero-carousel{border:1px solid #232b32}`
     b) event-shell-standard.css → `.explore-hero{border:1px solid #242a2c;
        border-radius:12px}` (her afişin KENDİ çerçevesi)
   Ayrıca afişin 12px yarıçapı, kabın 18px yarıçapıyla uyuşmadığından
   köşelerde afişin altındaki koyu zemin görünüyor, bu da çerçeve etkisini
   büyütüyordu. Afiş görselini `.xp-hero-bg` taşıdığı için afişin kendi
   arka planına da gerek yok. */
.xp-hero-carousel { border: 0; }
.xp-hero-carousel .explore-hero,
.xp-hero-carousel .xp-hero {
  border: 0;
  border-radius: inherit;
  background-image: none;
}

/* ============================================================
   3) ETKİNLİKLER — kart okunurluğu
   ============================================================
   `.ev-page` sınıfı Events.razor ve EventDetail.razor kabuklarına elle
   eklendi: buradaki düzeltmeler forum/kulüp gibi aynı kabuğu paylaşan
   sayfalara sızmasın diye her kural bu sınıfla kapsanıyor.

   Eski hâlde metinler sabit hex'lerdeydi (#78808a, #9aa1ab, #a5abb3) ve
   9–9.5px boyuttaydı: aydınlık temada beyaz kart üstünde 2.6–4.0:1 arası
   kalıyor, yani okunmuyordu. Artık tümü token. */

/* Kartın kendisi — koyu temada da sabit hex yerine token. */
.ev-page .event-card {
  background: var(--mg-surface);
  border-color: var(--mg-line);
  border-radius: 16px;
  color: var(--mg-text);
}
.ev-page .event-card:hover { border-color: var(--mg-line-strong); }

/* Kapak: görsel yoksa yerine geçen ikon aydınlık temada neredeyse görünmezdi
   (#3a434d üstüne #10161c). Zemin ve ikon artık temayla birlikte değişiyor. */
.ev-page .event-cover {
  height: 160px;
  background: var(--mg-surface-2);
  color: var(--mg-muted);
}

/* Başlık rengini `b` üzerinden vermiyoruz: theme.css'te
   `html[data-theme="light"] :is(…) :is(h1,h2,h3,h4,b,strong){color:inherit}`
   kuralı (0,2,2) özgüllüğünde ve doğrudan `b` kuralını yeniyor. Bunun yerine
   KAPSAYICININ rengi veriliyor, `b` onu miras alıyor. */
.ev-page .event-body { gap: 7px; padding: 15px 16px 16px; color: var(--mg-text); }
.ev-page .event-body > b { font-size: 15px; font-weight: 700; line-height: 1.35; }

/* Meta satırları: 9.5px + #78808a → 12.5px + --mg-muted (aydınlıkta 5.7:1). */
.ev-page .event-meta { font-size: 12.5px; line-height: 1.4; color: var(--mg-muted); }
.ev-page .event-meta .mg-icon { color: var(--mg-accent-ink); flex: none; }
.ev-page .event-foot { padding-top: 12px; border-top: 1px solid var(--mg-line); }
.ev-page .event-foot > small { font-size: 12.5px; color: var(--mg-muted); }

/* Kategori jetonları polish.css'te zaten marka tonuna çevrilmiş (5.2:1);
   burada yalnızca kart içinde nefes alsın diye boşluk. */
.ev-page .event-cats { margin-top: 2px; }

/* Katıl düğmesi. Beyaz metin/marka zemin 4.6:1.
   "Katılıyorsun" durumu eski hâlde #22c55e idi: aydınlık temada beyaz üstünde
   2.3:1. Yeşil için tema token'ı yok, sabit hex de yasak — bu yüzden durum
   rengi yerine BİÇİM anlatıyor: dolu marka zemin = yapılacak eylem,
   nötr çerçeve = zaten yapılmış. */
.ev-page .attend-button {
  border-radius: 10px; padding: 10px 18px; font-size: 12.5px; font-weight: 700;
  border-color: transparent; background: var(--mg-accent); color: #fff;
}
.ev-page .attend-button.attending {
  background: var(--mg-surface-2);
  border-color: var(--mg-line-strong);
  color: var(--mg-text);
}
.ev-page .attend-button.attending:hover:not(:disabled) {
  border-color: var(--mg-accent); color: var(--mg-accent-ink);
}
.ev-page .event-finished {
  font-size: 12.5px; padding: 10px 15px; border-radius: 10px;
  border-color: var(--mg-line-strong); color: var(--mg-muted);
}

/* Boş durum, sayaçlar ve "daha fazla" — hepsi --mg-faint mirasındaydı. */
.ev-page .forum-empty { color: var(--mg-muted); }
.ev-page .forum-empty small { font-size: 13px; color: var(--mg-muted); }
.ev-page .forum-empty i { color: var(--mg-muted); }
.ev-page .section-count { color: var(--mg-muted); }
.ev-page .profile-stats small { color: var(--mg-muted); }

/* Sağ ray: "Yaklaşan Etkinlikler" alt satırları --mg-faint idi. */
.ev-page .forum-right .club-rail-row small { color: var(--mg-muted); }
.ev-page .event-thumb { background: var(--mg-surface-2); color: var(--mg-muted); }

/* ============================================================
   4) ETKİNLİK DETAYI — yönetim ve katılımcılar
   ============================================================
   Katılımcılar eskiden tam genişlikte tek sütun satırlardı: 40 kişilik bir
   etkinlikte sayfa metrelerce uzuyor, sağda kocaman boşluk kalıyordu. Artık
   ikisi de aynı duyarlı ızgarayı kullanıyor. */
.ev-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}
.ev-person {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 10px 12px;
  background: var(--mg-surface);
  border: 1px solid var(--mg-line);
  border-radius: 13px;
  /* İsim `b` etiketinde; rengi kapsayıcıya veriyoruz (theme.css'in
     `:is(h1,h2,h3,h4,b,strong){color:inherit}` kuralı doğrudan `b`
     kuralını ezerdi). */
  color: var(--mg-text);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.ev-person:hover { border-color: var(--mg-line-strong); background: var(--mg-surface-2); }
.ev-person .user-identity { flex: none; }
.ev-person-id { display: grid; gap: 2px; min-width: 0; }
/* `b` ızgara öğesi olduğu için blok gibi davranır; kırpma doğrudan burada
   çalışır. Bilerek flex KULLANILMIYOR: flex kabında metin anonim bir öğeye
   dönüşüyor ve `text-overflow:ellipsis` devre dışı kalıyor. */
.ev-person-id b {
  min-width: 0;
  font-size: 13.5px; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-person-id b .mg-icon { color: var(--mg-accent-ink); vertical-align: -2px; margin-left: 3px; }
.ev-person-id small {
  font-size: 12px; line-height: 1.3; color: var(--mg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Rol etiketi: yönetici satırlarında ikincil metin bir rozet gibi dursun. */
.ev-person.is-staff .ev-person-id small {
  display: inline-block; justify-self: start;
  padding: 2px 8px; border-radius: 20px;
  background: var(--mg-accent-soft); color: var(--mg-accent-ink);
  font-weight: 700; font-size: 11px;
}

/* Bölüm başlığı ile ızgara arası; "Katılımcılar" başlığı ve sayacı. */
.ev-page .forum-section .section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ev-page .forum-section .ev-people { margin-top: 4px; }
.ev-page .feed-load-more { margin-top: 12px; }

/* Detay kapağı — ikon rengi aydınlık temada da görünür olsun. */
.ev-page .event-detail-cover { background: var(--mg-surface-2); color: var(--mg-muted); }

/* Künye satırları (UserBadge) bu sayfalarda da --mg-muted'e çekiliyor;
   social.css'teki #78808a aydınlıkta 4.0:1 ile eşiğin altında kalıyordu. */
.ev-page .ub-names small { color: var(--mg-muted); }

@media (max-width: 760px) {
  .ev-people { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ev-page .event-cover { height: 150px; }
}