.datum-es-nevnap {
display: flex;
justify-content: center;
gap: 10px;
align-items: center; }
.datum-es-nevnap .datum, 
.datum-es-nevnap .nevnap {
font-size: 12px;
color: #333;
text-decoration: underline;
text-decoration-color: rgba(0,0,0,0.4);
}:root { --kps-active-text: #b91c1c;
--kps-active-bg: #fef2f2;
--kps-active-border: #b91c1c;
--kps-inactive-text: #64748b;
--kps-inactive-bg: #ffffff;
--kps-border-color: #e2e8f0;
--kps-primary: #2563eb;
--kps-danger: #ef4444;
--kps-new-color: #16a34a;
--kps-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
} .kps-wrapper {
max-width: 100%;
margin: 0 auto 25px auto;
font-family: var(--kps-font);
box-sizing: border-box;
display: block !important;
overflow: visible !important;
border: 1px solid var(--kps-border-color);
border-radius: 12px;
background: #fff;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); min-height: 400px;
contain: layout style;
}
.kps-wrapper *, .kps-wrapper *::before, .kps-wrapper *::after {
box-sizing: border-box;
} .kps-tab-header {
display: flex;
width: 100%;
border-bottom: 1px solid var(--kps-border-color);
background: var(--kps-inactive-bg);
border-radius: 12px 12px 0 0;
overflow: hidden; position: relative;
z-index: 1;
} .kps-tab-btn {
flex: 1 1 0;
border: none;
background: var(--kps-inactive-bg);
padding: 16px 10px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: var(--kps-inactive-text);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: background 0.2s ease, color 0.2s ease;
border-bottom: 3px solid transparent;
position: relative;
font-family: inherit;
-webkit-tap-highlight-color: transparent; margin: 0;
} .kps-tab-btn:focus-visible {
outline: 2px solid var(--kps-active-text);
outline-offset: -2px;
z-index: 2;
} .kps-tab-btn + .kps-tab-btn::before {
content: '';
position: absolute;
left: 0;
top: 25%;
height: 50%;
width: 1px;
background: var(--kps-border-color);
}
.kps-tab-btn:hover:not(.active) {
background: #f8fafc;
color: var(--kps-active-text);
}
.kps-icon {
width: 20px;
height: 20px;
stroke-width: 2px;
flex-shrink: 0;
} .kps-tab-btn.active {
background: var(--kps-active-bg);
color: var(--kps-active-text);
border-bottom-color: var(--kps-active-border);
} .kps-body {
padding: 15px;
}
.kps-tab-content, .kps-pane {
display: block;
height: auto !important;
overflow: visible !important;
}
.kps-pane { display: none; }
.kps-pane.active {
display: block !important;
animation: kpsFade 0.3s ease-out forwards;
}
@keyframes kpsFade {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
} .kps-news-container {
display: flex;
flex-direction: column;
gap: 0; min-height: 350px;
}
.kps-news-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 9px 10px;
background: transparent;
text-decoration: none;
border-bottom: 1px solid #f1f5f9;
border-left: 3px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease;
position: relative;
overflow: visible !important;
z-index: 1;
border-radius: 6px; min-height: 93px;
}
.kps-news-card:hover {
background: #f8fafc;
border-left-color: var(--kps-active-border);
}
.kps-news-card:last-child { border-bottom: none; }
.kps-news-card:hover .kps-card-title { color: var(--kps-primary); } .kps-news-card:focus-visible {
outline: 2px solid var(--kps-active-text);
outline-offset: 2px;
} .kps-card-img {
flex-shrink: 0;
width: 75px;
height: 75px;
position: relative;
background: transparent;
overflow: visible;
}
.kps-card-img-inner {
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
background: #f1f5f9; }
.kps-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
} .kps-news-card:hover .kps-card-img img {
transform: scale(1.08);
} .kps-news-card:first-child .kps-card-img {
width: 90px;
height: 90px;
}
.kps-news-card:first-child {
background: #fef8f8;
border-left-color: var(--kps-active-border);
border-radius: 8px;
padding: 12px 10px;
min-height: 108px;
}
.kps-news-card:first-child .kps-card-title {
font-size: 19px;
font-weight: 700;
} .kps-hot-badge {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
background: var(--kps-danger);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 20;
animation: kpsPulse 2s infinite;
}
.kps-hot-badge svg { width: 10px; height: 10px; stroke: #fff; }
@keyframes kpsPulse {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
70% { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
100% { transform: scale(1); }
} .kps-card-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 0;
}
.kps-card-title {
margin: 0;
font-size: 17px;
line-height: 1.4;
font-weight: 500;
color: #1e293b;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.kps-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 4px;
gap: 8px;
}
.kps-card-date {
font-size: 13px;
color: #94a3b8;
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
} .kps-popular-list ul, .kps-popular-list ol {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.kps-popular-list h3,
.kps-popular-list .tptn-title,
.kps-popular-list > div > h3 {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #94a3b8 !important;
margin: 0 0 8px 0 !important;
padding: 0 4px !important;
}
.kps-popular-list li {
position: relative;
padding: 11px 12px 11px 48px !important;
margin-bottom: 0 !important;
background: transparent !important;
min-height: 44px;
display: flex !important;
align-items: center;
border-bottom: 1px solid #f1f5f9;
border-left: 3px solid transparent;
border-radius: 6px;
transition: background 0.2s, border-color 0.2s;
opacity: 1;
transform: translateY(0);
} .kps-pane.active .kps-popular-list li {
opacity: 0;
transform: translateY(12px);
animation: kpsSlideIn 0.4s ease-out forwards;
}
.kps-pane.active .kps-popular-list li:nth-child(1) { animation-delay: 0s; }
.kps-pane.active .kps-popular-list li:nth-child(2) { animation-delay: 0.06s; }
.kps-pane.active .kps-popular-list li:nth-child(3) { animation-delay: 0.12s; }
.kps-pane.active .kps-popular-list li:nth-child(4) { animation-delay: 0.18s; }
.kps-pane.active .kps-popular-list li:nth-child(5) { animation-delay: 0.24s; }
.kps-pane.active .kps-popular-list li:nth-child(6) { animation-delay: 0.30s; }
.kps-pane.active .kps-popular-list li:nth-child(7) { animation-delay: 0.36s; }
.kps-pane.active .kps-popular-list li:nth-child(8) { animation-delay: 0.42s; }
.kps-pane.active .kps-popular-list li:nth-child(9) { animation-delay: 0.48s; }
.kps-pane.active .kps-popular-list li:nth-child(10) { animation-delay: 0.54s; }
.kps-popular-list li:hover {
background: #f8fafc !important;
border-left-color: var(--kps-active-border);
}
.kps-popular-list li:last-child { border-bottom: none; }
.kps-popular-list li a {
color: #1e293b !important;
font-weight: 500 !important;
font-size: 16px !important;
line-height: 1.4 !important;
text-decoration: none !important;
transition: color 0.2s ease;
}
.kps-popular-list li a:hover { color: var(--kps-primary) !important; }
.kps-popular-list li:nth-child(-n+3) a {
font-weight: 600 !important;
font-size: 17px !important;
} .kps-popular-list ul, .kps-popular-list ol { counter-reset: kps-pop; }
.kps-popular-list li::before {
counter-increment: kps-pop;
content: counter(kps-pop);
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: #f1f5f9;
color: #64748b;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.kps-popular-list li:hover::before {
transform: translateY(-50%) scale(1.1);
} .kps-popular-list li:nth-child(1)::before { background: #b91c1c; color: #fff; }
.kps-popular-list li:nth-child(2)::before { background: #64748b; color: #fff; }
.kps-popular-list li:nth-child(3)::before { background: #b45309; color: #fff; } .kps-popular-list li img { display: none !important; }
.kps-loading {
text-align: center;
padding: 20px;
color: #94a3b8;
font-size: 13px;
}
.kps-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid #ccc;
border-left-color: var(--kps-active-text);
border-radius: 50%;
animation: kpsSpin 1s linear infinite;
vertical-align: middle;
}
@keyframes kpsSpin { to { transform: rotate(360deg); } } .kps-all-news-link {
display: block;
text-align: center;
padding: 12px 20px;
margin-top: 10px;
background: var(--kps-active-bg);
color: var(--kps-active-text);
font-weight: 600;
font-size: 14px;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s, color 0.2s;
border: 1px solid rgba(185, 28, 28, 0.15);
}
.kps-all-news-link:hover,
.kps-all-news-link:focus-visible {
background: var(--kps-active-text);
color: #fff;
outline: none;
}
.kps-all-news-link svg {
vertical-align: middle;
margin-left: 4px;
transition: transform 0.2s ease;
}
.kps-all-news-link:hover svg {
transform: translateX(4px);
} .kps-load-more-btn {
display: block;
width: 100%;
text-align: center;
padding: 12px 20px;
margin-top: 10px;
background: #f8fafc;
color: #475569;
font-weight: 600;
font-size: 14px;
font-family: var(--kps-font);
border: 1px solid var(--kps-border-color);
border-radius: 8px;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kps-load-more-btn:hover:not(:disabled),
.kps-load-more-btn:focus-visible {
background: #f1f5f9;
color: #1e293b;
border-color: #cbd5e1;
outline: none;
}
.kps-load-more-btn.loading,
.kps-load-more-btn:disabled {
opacity: 0.7;
cursor: wait;
}
.kps-load-more-btn svg {
vertical-align: middle;
margin-left: 4px;
} .kps-news-card {
opacity: 0;
transform: translateY(12px);
animation: kpsSlideIn 0.4s ease-out forwards;
}
.kps-news-card:nth-child(1) { animation-delay: 0s; }
.kps-news-card:nth-child(2) { animation-delay: 0.06s; }
.kps-news-card:nth-child(3) { animation-delay: 0.12s; }
.kps-news-card:nth-child(4) { animation-delay: 0.18s; }
.kps-news-card:nth-child(5) { animation-delay: 0.24s; }
.kps-news-card:nth-child(6) { animation-delay: 0.30s; }
.kps-news-card:nth-child(7) { animation-delay: 0.36s; }
.kps-news-card:nth-child(8) { animation-delay: 0.42s; }
.kps-news-card:nth-child(9) { animation-delay: 0.48s; }
.kps-news-card:nth-child(10) { animation-delay: 0.54s; }
@keyframes kpsSlideIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
} .kps-new-badge {
display: inline-block;
background: var(--kps-new-color);
color: #fff;
font-size: 9px;
font-weight: 700;
padding: 2px 5px;
border-radius: 3px;
margin-left: 6px;
text-transform: uppercase;
letter-spacing: 0.4px;
line-height: 1;
vertical-align: middle; } @media (prefers-reduced-motion: reduce) {
.kps-news-card,
.kps-pane,
.kps-pane.active,
.kps-pane.active .kps-popular-list li,
.kps-hot-badge {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.kps-news-card:hover .kps-card-img img {
transform: none !important;
}
.kps-popular-list li:hover::before {
transform: translateY(-50%) !important;
}
.kps-all-news-link:hover svg {
transform: none !important;
}
} @media (max-width: 768px) {
.kps-card-title { font-size: 16px; }
.kps-card-img { width: 70px; height: 70px; }
.kps-news-card { min-height: 88px; }
.kps-news-card:first-child .kps-card-img { width: 80px; height: 80px; }
.kps-news-card:first-child .kps-card-title { font-size: 17px; }
.kps-news-card:first-child { min-height: 104px; }
.kps-tab-btn { padding: 14px 8px; font-size: 13px; }
.kps-body { padding: 10px; } .kps-popular-list li a { font-size: 15px !important; }
.kps-popular-list li:nth-child(-n+3) a { font-size: 16px !important; } .kps-load-more-btn {
background: var(--kps-active-bg);
color: var(--kps-active-text);
border-color: rgba(185, 28, 28, 0.2);
padding: 14px 20px;
font-size: 15px;
}
.kps-load-more-btn:active:not(:disabled) {
background: var(--kps-active-text);
color: #fff;
}
} @media (max-width: 380px) {
.kps-tab-btn .kps-label { font-size: 12px; }
.kps-icon { width: 16px; height: 16px; }
.kps-card-img { width: 64px; height: 64px; }
.kps-news-card:first-child .kps-card-img { width: 72px; height: 72px; }
}