DLE ticker (marquee)

✔ CSS-only (smooth, performanslı)
✔ Responsive
✔ Hover pause
✔ Fade effect (premium görünüş)
✔ “SON DƏQİQƏ” badge
✔ DLE {custom} ilə dinamik

🔧 1. HTML ( header.tpl və ya main.tpl )

<div class="news-ticker">
  
  <div class="ticker-label">
    <span>SON DƏQİQƏ</span>
  </div>

  <div class="ticker-track">
    <div class="ticker-content">
      {custom order="date" limit="10" template="ticker"}
    </div>
    <div class="ticker-content">
      {custom order="date" limit="10" template="ticker"}
    </div>
  </div>

</div>

👉 2 dəfə yazmağımızın səbəbi: loop effekti (kəsilmədən axır)

🔧 2. ticker.tpl (yarat)
/templates/senin_template/ticker.tpl

<a href="{full-link}" class="ticker-item">
  📰 {title}
</a>

🎨 3. CSS (FULL MODERN)

.news-ticker {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  background: #0f172a;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

/* LABEL */
.ticker-label {
  background: linear-gradient(135deg, #ff0033, #cc0029);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 3;
  white-space: nowrap;
}

/* TRACK */
.ticker-track {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* CONTENT LOOP */
.ticker-content {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 25s linear infinite;
}

/* ITEM */
.ticker-item {
  color: #e2e8f0;
  margin: 0 30px;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.ticker-item:hover {
  color: #38bdf8;
}

/* PAUSE ON HOVER */
.news-ticker:hover .ticker-content {
  animation-play-state: paused;
}

/* SMOOTH LOOP */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* FADE EDGES (PREMIUM LOOK) */
.news-ticker::before,
.news-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.news-ticker::before {
  left: 0;
  background: linear-gradient(to right, #0f172a, transparent);
}

.news-ticker::after {
  right: 0;
  background: linear-gradient(to left, #0f172a, transparent);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .ticker-item {
    font-size: 13px;
    margin: 0 20px;
  }

  .ticker-label {
    font-size: 12px;
    padding: 0 10px;
  }
}

⚡ 4. Nəticə
Bu koddan sonra səndə olacaq:
🔥 Tam professional xəbər lenti
🔄 Kəsilməyən smooth animasiya
🖱 Hover pause
🎨 Premium fade effect
📱 Mobil uyğun