/* SAHNE · KAHRAMAN BİLDİRİM AKIŞI (includes/scenes/hero-feed.php) — s1…s4: her adımda yeni bildirim üstten gelir,
   bir öncekini aşağı iter (soluk), daha eskisi söner. Hareket azaltmada s4: son iki bildirim durağan. */
.hfd { --hfd-spring: cubic-bezier(.34, 1.4, .64, 1); width: 100%; container-type: inline-size; }
.hfd-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px 4px; padding: 3px 10px 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px rgba(16, 37, 64, .08), 0 6px 14px -8px rgba(16, 37, 64, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 11px; font-weight: 800; color: var(--ui-text-2); letter-spacing: .01em; }
.hfd-tag i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
/* nabız halkası: yalnız transform + opacity (bileşikte döner, her karede boyama yok) */
.hfd-tag i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 111, 79, .55); animation: hfd-ping 2s ease-out infinite; }
.hfd-stack { position: relative; height: 172px; }
.hfd-t { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 11px 13px 12px 11px; border-radius: 18px;
  background: rgba(250, 251, 253, .9); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(16, 37, 64, .07), 0 2px 4px rgba(16, 37, 64, .06), 0 22px 40px -18px rgba(16, 37, 64, .55);
  font-size: 12px; line-height: 1.38; color: var(--ui-text-2);
  opacity: 0; transform: translateY(-22px) scale(.94); transform-origin: 50% 0;
  transition: opacity .45s var(--ui-ease), transform .7s var(--hfd-spring), filter .5s var(--ui-ease); }
.hfd-ic { grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; background: linear-gradient(140deg, var(--navy-soft), var(--navy-night)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.hfd-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hfd--odev .hfd-ic { background: linear-gradient(140deg, #3d84d6, #1d4f86); }
.hfd--sinav .hfd-ic { background: linear-gradient(140deg, #22a352, #146b37); }
.hfd--odeme .hfd-ic { background: linear-gradient(140deg, #ffb627, #d98a00); color: var(--sun-ink); }
.hfd--program .hfd-ic { background: linear-gradient(140deg, #ff8b6e, #e0532f); }
.hfd-app { font-size: 10px; font-weight: 800; letter-spacing: .07em; color: var(--ui-muted); }
.hfd-t em { font-style: normal; font-size: 10.5px; color: var(--ui-muted); }
.hfd-t b { grid-column: 2 / span 2; font-size: 13px; font-weight: 800; color: var(--ui-text); letter-spacing: -.005em; }
.hfd-msg { grid-column: 2 / span 2; }

/* yuvalar: 0 = en yeni (üst), 1 = bir önceki (altta, soluk), sonra söner */
.hfd.s1 .hfd-t1, .hfd.s2 .hfd-t2, .hfd.s3 .hfd-t3, .hfd.s4 .hfd-t4 { opacity: 1; transform: none; z-index: 2; }
.hfd.s2 .hfd-t1, .hfd.s3 .hfd-t2, .hfd.s4 .hfd-t3 { opacity: .9; transform: translateY(78px) scale(.95); z-index: 1; filter: saturate(.85); }
.hfd.s3 .hfd-t1, .hfd.s4 .hfd-t2 { opacity: 0; transform: translateY(120px) scale(.9); z-index: 0; }
@keyframes hfd-ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hfd-tag i::after { animation: none; opacity: 0; } }

@container (max-width: 300px) {
  .hfd-t { padding: 9px 10px 10px 9px; font-size: 11px; border-radius: 15px; grid-template-columns: 26px minmax(0, 1fr) auto; }
  .hfd-ic { width: 26px; height: 26px; }
  .hfd-t b { font-size: 12px; }
  .hfd-stack { height: 96px; }
  .hfd.s2 .hfd-t1, .hfd.s3 .hfd-t2, .hfd.s4 .hfd-t3 { opacity: 0; transform: translateY(18px) scale(.94); }
}