/* ============================================================================
   FAZ 5 STİLLERİ — rozet pop, avatarlar, sağlık paneli, widget sıralama
   ========================================================================== */

/* ———————————————————————— ROZET POP ———————————————————————————————— */
@keyframes pz-badge-pop {
  0% { transform: scale(.4); }
  45% { transform: scale(1.45); box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 25%, transparent), 0 0 18px color-mix(in srgb, var(--red) 60%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 2px var(--night); }
}
.notification-badge.pz-pop { animation: pz-badge-pop .55s var(--ease); }

/* ———————————————————————— REHBER AVATARLARI ———————————————————————————————— */
.pz-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: 0 0 34px;
  border-radius: 999px;
  color: #f8f4ec;
  font-family: var(--serif);
  font-size: .82rem;
  letter-spacing: .03em;
  margin-right: 11px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 3px 8px rgb(20 14 8 / 18%);
  vertical-align: middle;
  user-select: none;
}
.pz-has-avatar .list-row-title,
.pz-has-avatar .record-title { display: inline-flex; align-items: center; }

/* ———————————————————————— SİSTEM SAĞLIĞI ———————————————————————————————— */
.pz-health {
  margin: 0 0 20px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}
.pz-health-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.pz-health-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 8px;
  flex: 0 0 12px;
}
.pz-health-dot.pz-ok { background: var(--green); box-shadow: 0 0 10px color-mix(in srgb, var(--green) 60%, transparent); animation: pz-live 2.4s var(--ease) infinite; }
.pz-health-dot.pz-warn { background: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 60%, transparent); animation: pz-live 1.6s var(--ease) infinite; }
.pz-health-dot.pz-bad { background: var(--red); box-shadow: 0 0 10px color-mix(in srgb, var(--red) 60%, transparent); animation: pz-live 1s var(--ease) infinite; }
.pz-health-dot.pz-muted { background: var(--control-line); }
.pz-health-main h3 {
  margin: 2px 0 3px;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: -.015em;
}
.pz-health-hint { margin: 0; color: var(--muted); font-size: .85rem; }
.pz-health-facts {
  margin-left: auto;
  display: grid;
  gap: 4px;
  font-size: .8rem;
  color: var(--muted);
  text-align: right;
}
.pz-health-facts strong { color: var(--ink); font-weight: 650; }
.pz-health-facts .pz-warn-text, .pz-health-facts .pz-warn-text strong { color: var(--gold); }
@media (max-width: 720px) { .pz-health-facts { margin-left: 0; text-align: left; } }

/* ———————————————————————— WİDGET SIRALAMA ———————————————————————————————— */
.pz-drag-handle { cursor: grab; user-select: none; }
.pz-drag-handle:active { cursor: grabbing; }
.pz-widget-drag { opacity: .55; transform: scale(.995); box-shadow: var(--shadow-3) !important; }
.pz-widget-over {
  outline: 2px dashed color-mix(in srgb, var(--red) 50%, transparent);
  outline-offset: -6px;
  border-radius: var(--radius-l);
}
@media (pointer: coarse) { .pz-drag-handle { cursor: default; } }

.pz-health-loading {
  padding: 10px 2px;
  color: var(--muted);
  font-size: .85rem;
  letter-spacing: .04em;
  animation: pz-live 1.4s var(--ease) infinite;
}