/* ═══════════════════════════════════════════════════════════════════════
   KÜME İŞARETİ — ortak görünüm katmanı.

   kume-isareti.js ile eşleşir: JS hâli ve yerleşimi yönetir, buradaki
   sınıflar o kararların görünen yüzüdür. Sınıfım ekranı, küme odası ve
   öğrenci profilindeki "Sınıfın" kapısı AYNI dosyayı kullanır.

   Sınıf haritası:
     .kume-isaret   işaretin yaşadığı kutu (genişliği JS verir)
     .ki-sahne      240×130 çizim alanı
     .ki-alanlar    örtüşmenin doğduğu katman (screen karışımı)
     .ki-alan       tek bir kişinin alanı — konturu YOK
     .ki-sonuk      ışığı yanmayan alan (silinmez, soğur)
     .ki-kavusma    eşik töreni: ortak yer bir kez parlar

   🔴 Buraya `stroke` EKLEME. Konturlu daire diyagramdır; alanın sınırı
   çizilmez, ışık sönerek biter.
   ═══════════════════════════════════════════════════════════════════════ */

.kume-isaret {
  display: block;
  line-height: 0;
  /* Örtüşme koyu zeminde okunur; işaret daima koyu bir yüzeyde durur. */
  isolation: isolate;
}

.kume-isaret .ki-sahne {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Örtüşme burada doğar: iki ışık üst üste gelince toplanır.
   Kesişim ÇİZİLMİYOR — sonucu görüyoruz. */
.kume-isaret .ki-alanlar {
  mix-blend-mode: screen;
}

.kume-isaret .ki-alan {
  /* Yaşayan işaret: alanlar yalnız yaklaşırken kıpırdar, o da eşikte.
     Süre uzun ve yumuşak — kavuşma bir tören, bir animasyon değil. */
  transition: transform 1.15s cubic-bezier(.32, .9, .32, 1), fill .6s ease;
  will-change: transform;
}

/* Işığı yanmayan alan: geri planda kalır ama YERİ DURUR. */
.kume-isaret .ki-alan.ki-sonuk {
  opacity: .85;
}

/* ——— EŞİK TÖRENİ: kavuşma anı ———
   Ortak yer bir kez parlar, sonra yerine döner. Tek animasyonumuz bu. */
.kume-isaret.ki-kavusma .ki-alanlar {
  animation: ki-kavusma-parla 1.6s ease-in-out;
}

@keyframes ki-kavusma-parla {
  0%   { filter: none; }
  38%  { filter: brightness(1.35); }
  100% { filter: none; }
}

/* Hareketi azaltılmış cihazda tören sessizleşir: parlama kalır, yaklaşma
   anlık olur — anlam kaybolmasın diye ışık korunur. */
@media (prefers-reduced-motion: reduce) {
  .kume-isaret .ki-alan { transition: fill .3s ease; }
  .kume-isaret.ki-kavusma .ki-alanlar { animation-duration: .8s; }
}