:root { --kuqe: #cc0000; --zi: #1a1a1a; --bardhe: #ffffff; }
body { margin:0; font-family: 'Helvetica', sans-serif; background: var(--bardhe); transition: 0.3s; color: #1a1a1a; }
body.dark-mode { background: #121212; color: white; }
.container { max-width: 1200px; margin: auto; padding: 0 15px; }

/* LOGO & HEADER */
.main-header { padding: 20px 0; border-bottom: 1px solid #eee; position: sticky; top: 0; background: white; z-index: 100; }
body.dark-mode .main-header { border-color: #333; background: #121212; }
.logo { font-weight: 900; font-size: 30px; letter-spacing: -1px; display: flex; align-items: center; cursor: pointer; }
.logo span { background: var(--kuqe); color: white; padding: 0 5px; margin-right: 5px; border-radius: 3px; }

/* CNN GRID SYSTEM */
.cnn-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 25px; padding: 20px 0; }
.card { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px; cursor: pointer; transition: 0.2s; }
.card:hover { opacity: 0.8; }
.card img { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; }
.card h3 { font-size: 18px; margin: 10px 0; line-height: 1.3; }

/* LAJMI KRYESOR (I PARI) */
.card.featured { grid-column: 2 / 3; grid-row: 1 / 6; border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0 20px; }
.card.featured img { height: 450px; }
.card.featured h3 { font-size: 36px; font-weight: 800; }

/* TOP BAR & NAV */
.top-bar { background: #000; color: #fff; padding: 8px 0; font-size: 12px; }
.flex-bar { display: flex; justify-content: space-between; align-items: center; }
.categories-nav { border-bottom: 1px solid #eee; overflow-x: auto; white-space: nowrap; position: sticky; top: 80px; background: white; z-index: 99; }
body.dark-mode .categories-nav { background: #121212; border-color: #333; }
.categories-nav ul { display: flex; gap: 20px; list-style: none; padding: 12px 0; }
.categories-nav li { font-weight: bold; cursor: pointer; font-size: 13px; text-transform: uppercase; }
.categories-nav li:hover { color: var(--kuqe); }

/* MODAL PER LAJMIN E PLOTE */
#lajmiFull { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background: white; overflow-y: auto; padding: 20px; }
body.dark-mode #lajmiFull { background: #121212; }
.mbyll-btn { font-size: 30px; cursor: pointer; position: absolute; right: 20px; top: 20px; }

@media (max-width: 900px) { 
    .cnn-grid { grid-template-columns: 1fr; } 
    .card.featured { grid-column: auto; border: none; padding: 0; } 
}