.fpk-wrap {
  display: flex; flex-direction: column; gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.fpk-baslik-row {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--py-metin-ikincil, #777);
}
.fpk-baslik { flex: 1; color: var(--py-metin, #222); font-size: 13px; font-weight: 700; }
.fpk-sayi-rozet {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); color: #15803d;
}

/* Yükleniyor */
.fpk-yukl {
  display: flex; justify-content: center; align-items: center; gap: 5px; padding: 20px 0;
}
.fpk-yukl-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--py-metin-ikincil, #aaa);
  animation: fpk-dot 1.2s ease-in-out infinite;
  &.d2 { animation-delay: 0.2s; }
  &.d3 { animation-delay: 0.4s; }
}
@keyframes fpk-dot { 0%,80%,100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* Boş durum */
.fpk-bos {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 24px 12px; color: var(--py-metin-ikincil, #aaa); font-size: 12px;
}

/* Grid */
.fpk-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.fpk-kisi {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 72px; min-width: 72px;
}
.fpk-avatar {
  position: relative; width: 48px; height: 48px; flex-shrink: 0;
}
.fpk-avatar-img {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(34,197,94,0.4);
  box-shadow: 0 0 8px rgba(34,197,94,0.2);
}
.fpk-avatar-harf {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #00b894, #00cec9);
  border: 2px solid rgba(34,197,94,0.4);
  box-shadow: 0 0 8px rgba(34,197,94,0.2);
}
.fpk-avatar-rozet {
  position: absolute; bottom: 0; right: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--py-arkaplan, #fff);
  box-shadow: 0 0 4px rgba(34,197,94,0.6);
  animation: fpk-rozet 2s ease-in-out infinite;
}
@keyframes fpk-rozet { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
.fpk-kisi-isim {
  font-size: 11px; font-weight: 600; color: var(--py-metin, #222);
  text-align: center; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fpk-kisi-saat {
  font-size: 10px; color: var(--py-metin-ikincil, #999);
  font-family: 'Courier New', monospace;
}
.fpk-kisi-okuyucu {
  font-size: 9px; color: rgba(0,180,220,0.7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; text-align: center;
}