.latest { padding: 26px 0 56px; background: var(--page); }
.section-title { display: flex; align-items: center; gap: 12px; font-size: clamp(24px, 2.4vw, 36px); font-weight: 800; letter-spacing: -.01em; margin-bottom: 22px; }
.section-title::before { content: ""; width: 5px; height: 1.1em; border-radius: 5px; background: var(--blue-500); transform: skewX(-10deg); }
.carousel { position: relative; }
.cards { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px 22px; scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.cards li { flex: 0 0 calc((100% - 66px) / 4); scroll-snap-align: start; min-width: 0; }
.card { height: 100%; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(6, 38, 96, .24); }
.card-link { display: block; height: 100%; }
.card-media { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--navy-800), var(--blue-500)); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-tag { position: absolute; left: 14px; top: 12px; padding: 5px 14px; border-radius: 10px; background: rgba(4, 20, 51, .78); backdrop-filter: blur(4px); color: var(--white); font-weight: 700; font-size: 15px; }
.card-title { padding: 14px 18px 20px; font-size: clamp(18px, 1.5vw, 23px); font-weight: 700; line-height: 1.25; }
.carousel-next { position: absolute; right: -22px; top: 36%; width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; background: linear-gradient(180deg, #1b9bff, #0a6cf0); color: var(--white); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(10, 108, 240, .55); }
.carousel-next[hidden] { display: none; }
.empty-state { border: 2px dashed #b9cdf0; border-radius: var(--radius-lg); background: #f4f8ff; padding: 52px 24px; text-align: center; color: var(--muted); font-size: 18px; }
.empty-state strong { color: var(--ink); font-size: 22px; }
.empty-state p { margin: 6px 0; }
.notfound { padding: 90px 0; text-align: center; }
.notfound h1 { font-size: 40px; margin-bottom: 12px; }
.notfound p { color: var(--muted); margin-bottom: 28px; }