/* Canlı hareket şeridi. Sol altta sabit kart; position:fixed olduğu için CLS yaratmaz. */
.activity{
  position:fixed;left:var(--s3);bottom:var(--s3);z-index:45;
  display:flex;align-items:center;gap:12px;
  width:max-content;min-width:320px;max-width:380px;
  padding:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  opacity:0;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;
}
.activity.is-in{opacity:1;transform:none}
.activity.is-out{opacity:0;transform:translateY(8px);pointer-events:none}

/* İkon kapsülü: marka lacivert daire, beyaz ikon. "hot" tipinde vurgu rengi. */
.activity__icon{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:var(--ink);color:#fff;
}
.activity__icon--hot{display:none;background:var(--accent)}
.activity[data-type="hot"] .activity__icon--vote{display:none}
.activity[data-type="hot"] .activity__icon--hot{display:flex}

.activity__text{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:15px;line-height:1.45;color:var(--text);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.activity__link{color:var(--ink);font-weight:600;text-decoration:none}
.activity__link:hover,.activity__link:focus-visible{color:var(--ink);text-decoration:underline}

/* 44x44 dokunma hedefi, görsel olarak küçük ve soluk. Negatif margin kartı büyütmesin diye. */
.activity__close{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-13px -14px -13px -12px;padding:0;
  border:0;background:none;color:var(--line-strong);border-radius:50%;cursor:pointer;
  transition:color .15s ease,background .15s ease;
}
.activity__close:hover{color:var(--ink);background:var(--bg)}
.activity__close:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}

@media (max-width:480px){
  .activity{left:var(--s2);right:var(--s2);bottom:8px;width:auto;min-width:0;max-width:none;padding:12px}
  .activity__icon{width:34px;height:34px}
  .activity__text{font-size:14px}
  .activity__close{margin:-13px -12px -13px -10px}
}
@media (prefers-reduced-motion:reduce){
  .activity{transition:none}
}