.news-page { background: #eeeaea; color: #fff; }
.news-hero {
    padding: 150px 0 80px 0;
    text-align: center;
    background: #ffffff;
}
.tag-red { color: #cc0000; font-weight: 800; letter-spacing: 5px; font-size: 14px; }
.yellow-text { color: #ffcd00; }
.news-hero h1 { color: #111; font-size: 52px; font-weight: 700; }

.search-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.search-box i { color: #888; font-size: 16px; }
.search-box input {
    padding: 12px 20px;
    border: 1px solid #ddd;
    border-radius: 50px;
    outline: none;
    font-size: 14px;
    width: 300px;
    color: #333;
}

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; padding: 60px 0; }

.news-card { background: #151515; border-bottom: 3px solid #333; cursor: pointer; transition: 0.3s; }
.news-card:hover { transform: translateY(-10px); border-color: #ffcd00; }

.card-img { position: relative; height: 220px; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-label { position: absolute; top: 15px; left: 15px; background: #cc0000; color: #fff; padding: 5px 12px; font-size: 10px; font-weight: 900; }

.card-body { padding: 25px; }
.card-body .date { color: #666; font-size: 20px; }
.card-body h3 { margin: 15px 0; font-size: 20px; line-height: 1.3; color: #fff; }
.card-body p { color: #aaa; font-size: 14px; line-height: 1.6; }
.read-btn { display: block; margin-top: 20px; color: #f1f1ee; font-size: 12px; font-weight: 800; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .news-hero { padding: 120px 0 40px 0; }
    .news-hero h1 { font-size: 36px; }
    .tag-red { font-size: 11px; }
    .search-box input { width: 220px; padding: 10px 16px; font-size: 13px; }

    .news-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding: 30px 0;
        scrollbar-width: none;
    }
    .news-grid::-webkit-scrollbar { display: none; }

    .news-card {
        flex: 0 0 260px;
        scroll-snap-align: start;
    }
    .card-img { height: 140px; }
    .card-body { padding: 15px; }
    .card-body .date { font-size: 12px; }
    .card-body h3 { font-size: 14px; margin: 8px 0; }
    .card-body p { font-size: 12px; }
}