.news-ticker {
display: flex;
align-items: center;
gap: 14px;
max-width: var(--max-width);
margin: 18px auto 0;
padding: 8px 14px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
}
.ticker-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-xs);
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: #fff;
background: var(--gradient-brand);
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
}
.ticker-badge .pulse {
width: 8px; height: 8px; border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 0 rgba(255,255,255,.7);
animation: tickerPulse 1.6s infinite;
}
@keyframes tickerPulse {
0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.ticker-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; height: 1.5em; }
.ticker-track { position: relative; height: 100%; }
.ticker-item {
position: absolute; inset: 0;
display: flex; align-items: center;
gap: 8px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--foreground);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
opacity: 0;
transform: translateY(40%);
transition: opacity .45s var(--ease), transform .45s var(--ease);
text-decoration: none;
}
.ticker-item:hover { color: var(--primary); text-decoration: none; }
.ticker-item.active { opacity: 1; transform: translateY(0); }
.ticker-item::before { content: "▸"; color: var(--primary); }
.home-featured {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin-top: 4px;
}
.f-lead {
position: relative;
display: flex;
align-items: flex-end;
min-height: 280px;
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
background: var(--bg-elev-2, #1a1f2e);
isolation: isolate;
border: 1px solid var(--border);
transition: border-color var(--duration) var(--ease);
}
@media (min-width: 761px) {
.home-featured { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.f-lead { min-height: 320px; }
}
.f-lead:hover { border-color: var(--primary); }
.f-lead-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: var(--image-filter);
transition: transform .7s var(--ease);
z-index: -2;
}
.f-lead:hover .f-lead-img { transform: scale(1.05); }
.f-lead-grad {
position: absolute; inset: 0;
z-index: -1;
background: linear-gradient(180deg, rgba(11,13,20,0) 46%, rgba(11,13,20,.62) 82%, rgba(11,13,20,.92) 100%);
}
html[data-theme="light"] .f-lead-grad {
background: linear-gradient(180deg, rgba(11,13,20,0) 46%, rgba(11,13,20,.62) 82%, rgba(11,13,20,.92) 100%);
}
.f-lead-body {
position: relative;
z-index: 1;
padding: 16px;
max-width: 92%;
min-width: 0;
overflow-wrap: anywhere;
}
.f-lead-title, .f-lead-summary { overflow-wrap: anywhere; word-break: break-word; }
@media (min-width: 461px) { .f-lead-body { padding: 20px 22px; } }
.f-lead-cat {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
color: #fff;
background: var(--gradient-brand);
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 10px;
}
.f-lead-title {
margin: 0 0 8px;
font-size: clamp(1.5rem, 2.6vw, 2.4rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.02em;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 14px rgba(0,0,0,.6);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;   overflow: hidden;
}
.f-lead-summary {
margin: 0 0 8px;
color: rgba(255,255,255,.92);
font-size: var(--text-sm);
line-height: 1.45;
text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 1px 8px rgba(0,0,0,.5);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.f-lead-meta { font-size: var(--text-xs); color: rgba(255,255,255,.9); text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.f-lead-meta .dot { color: var(--primary); margin: 0 6px; }
.f-secondary-band {
background: rgba(22, 24, 33, 0.2);
border-color: var(--border);
}
.home-quicknav {
display: flex;
gap: 10px;
margin-top: 24px;
padding-bottom: 4px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
min-width: 0;
}
.home-quicknav::-webkit-scrollbar { display: none; }
.home-quicknav a {
flex: 0 0 auto;
white-space: nowrap;
padding: 9px 18px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--card);
color: var(--foreground);
font-size: var(--text-sm);
font-weight: 600;
text-decoration: none;
transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.home-quicknav a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.home-main {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 30px;
align-items: start;
margin-top: 32px;
}
@media (min-width: 981px) { .home-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.home-feed .article-grid { margin-top: 4px; }
.home-sidebar { display: flex; flex-direction: column; gap: 22px; position: static; }
@media (min-width: 981px) { .home-sidebar { position: sticky; top: 84px; } }
.side-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 18px;
}
.side-card-title {
margin: 0 0 12px;
font-size: var(--text-lg);
font-weight: 800;
letter-spacing: -0.01em;
position: relative;
padding-inline-start: 12px;
}
.side-card-title::before {
content: ""; position: absolute; inset-inline-start: 0; top: 3px; bottom: 3px;
width: 4px; border-radius: 4px; background: var(--gradient-brand);
}
.side-card-sub { margin: -6px 0 14px; font-size: var(--text-xs); color: var(--muted-foreground); }
.rank-list { display: flex; flex-direction: column; }
.rank-item {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px 0;
border-top: 1px solid var(--border);
text-decoration: none;
color: var(--foreground);
}
.rank-item:first-child { border-top: 0; padding-top: 0; }
.rank-item:hover { text-decoration: none; }
.rank-item:hover .rank-title { color: var(--primary); }
.rank-num {
flex: 0 0 28px; width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 8px;
font-size: var(--text-sm); font-weight: 800;
color: #fff;
background: var(--gradient-brand);
counter-increment: rank;
}
.rank-list { counter-reset: rank; }
.rank-num::before { content: counter(rank); }
.rank-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rank-title {
font-size: var(--text-sm); font-weight: 700; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
transition: color var(--duration) var(--ease);
}
.rank-meta { font-size: var(--text-xs); color: var(--muted-foreground); }
.rank-meta .dot { color: var(--primary); margin: 0 5px; }
.explore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.explore-item {
display: flex; align-items: center; gap: 10px;
padding: 11px 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
color: var(--foreground);
font-size: var(--text-sm);
font-weight: 600;
transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.explore-item:hover { border-color: var(--primary); transform: translateY(-2px); text-decoration: none; color: var(--foreground); }
.explore-item svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--primary); }
.explore-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 460px) {
.explore-item { padding: 9px 10px; gap: 8px; font-size: var(--text-xs); }
.side-card { padding: 14px; }
}
.home-cta {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
margin-top: 34px;
}
@media (min-width: 761px) { .home-cta { grid-template-columns: repeat(3, 1fr); } }
.cta-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 18px;
border-radius: var(--radius-lg);
overflow: hidden;
text-decoration: none;
color: #fff;
background: var(--card);
border: 1px solid var(--border);
transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.cta-card:hover { transform: translateY(-3px); text-decoration: none; color: #fff; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.cta-card.tip      { background: linear-gradient(135deg, #ff2357, #c600db); }
.cta-card.annonce  { background: linear-gradient(135deg, #00b7d7, #155dfc); }
.cta-card.business { background: linear-gradient(135deg, #f99c00, #f6339a); }
.cta-icon {
flex: 0 0 46px; width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 12px;
background: rgba(255,255,255,.18);
}
.cta-icon svg { width: 24px; height: 24px; color: #fff; }
.cta-text { min-width: 0; }
.cta-title { display: block; font-size: var(--text-base); font-weight: 800; }
.cta-desc  { display: block; font-size: var(--text-xs); opacity: .92; margin-top: 2px; }
.home-bands { margin-top: 34px; }
.home-bands .bands-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .home-bands .bands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-bands .bands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-feed .article-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 561px) { .home-feed .article-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } }