/*
Theme Name: Nalarsisa Custom
Theme URI: https://nalarsisa.com
Author: Tim Nalarsisa
Description: Tema kustom ringan untuk portal berita nalarsisa.com dibangun dari nol.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: nalarsisa
*/

/* Reset dasar agar tampilan bersih di semua browser */
body {
    font-family: 'Georgia', serif; /* Font klasik berita */
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Layout Container */
.main-content { max-width: 1100px; margin: 30px auto; padding: 0 20px; }

/* 1. Headline Styling */
.headline-image { 
    position: relative; width: 100%; height: 450px; overflow: hidden; border-radius: 8px; 
}
.headline-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.headline-image:hover img { transform: scale(1.05); }
.headline-overlay { 
    position: absolute; bottom: 0; left: 0; right: 0; 
    padding: 40px 30px; background: linear-gradient(transparent, rgba(0,0,0,0.9)); 
    color: white; 
}
.headline-overlay h1 { font-size: 32px; margin: 10px 0; }
.category-label a { background: var(--merah); color: white; padding: 4px 12px; font-size: 12px; text-transform: uppercase; border-radius: 3px; text-decoration: none; }

/* 2. Grid Styling */
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0; }
.grid-item h3 { font-size: 16px; margin-top: 10px; color: var(--hitam); text-decoration: none; }
.grid-thumb img { width: 100%; height: 180px; object-fit: cover; border-radius: 5px; }

/* 3. List Styling */
.bottom-section { display: flex; gap: 40px; }
.latest-list { flex: 2; }
.list-item { display: flex; gap: 20px; margin-bottom: 25px; align-items: center; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.list-thumb img { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; }
.list-text h3 { font-size: 18px; margin: 0; }
.list-text a { text-decoration: none; color: var(--hitam); }

/* Sidebar space */
aside { flex: 1; }

/* Mobile View */
@media (max-width: 768px) {
    .grid-container { grid-template-columns: 1fr; }
    .bottom-section { flex-direction: column; }
    .headline-image { height: 300px; }
    .headline-overlay h1 { font-size: 20px; }
}