/*
Theme Name: News Portal Gelung
Theme URI: https://gelung.com
Author: Krisservice
Description: Theme portal berita responsive, SEO friendly, dengan slider dan sidebar
Version: 1.0
License: GPL v2
Text Domain: newsportal
*/

/* Layout Header */
.site-header { background: #fff; padding: 20px 0; border-bottom: 1px solid #eee; }
.header-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 20px; 
}

.header-logo img { max-height: 60px; width: auto; }
.header-banner { max-width: 728px; width: 100%; height: 90px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; }
.banner-placeholder { color: #ccc; font-size: 14px; border: 1px dashed #ddd; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* Menu Navigasi */
.main-navigation { background: #004a8e; color: #fff; padding: 10px 0; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-navigation li { margin-right: 20px; }
.main-navigation a { color: #fff; text-decoration: none; font-weight: bold; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .header-container { flex-direction: column; text-align: center; }
    .header-banner { margin-top: 15px; width: 100%; height: auto; min-height: 50px; }
    .main-navigation ul { justify-content: center; font-size: 14px; }
}


body { font-family: Arial, sans-serif; margin: 0; background: #f4f4f4; }
.container { display: flex; flex-wrap: wrap; max-width: 1200px; margin: auto; padding: 20px; }

/* Sidebar Kiri PC */
#sidebar { flex: 1; min-width: 300px; order: 1; padding-right: 20px; }
#main-content { flex: 3; order: 2; }

/* Thumbnail & Card */
.news-card { display: flex; background: #fff; margin-bottom: 20px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.news-thumb { width: 200px; height: 150px; object-fit: cover; }
.news-text { padding: 15px; }

/* Slider Otomatis */
.slider-container { width: 100%; height: 400px; overflow: hidden; position: relative; margin-bottom: 20px; }
.slide { display: none; width: 100%; height: 100%; position: absolute; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .container { flex-direction: column; }
    #sidebar { order: 2; padding-right: 0; }
    #main-content { order: 1; }
    .news-card { flex-direction: column; }
    .news-thumb { width: 100%; height: 200px; }
}

/* Layout Header */
.site-header { background: #fff; padding: 20px 0; border-bottom: 1px solid #eee; }
.header-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 20px; 
}

.header-logo img { max-height: 60px; width: auto; }
.header-banner { max-width: 728px; width: 100%; height: 90px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; }
.banner-placeholder { color: #ccc; font-size: 14px; border: 1px dashed #ddd; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }

/* Menu Navigasi */
.main-navigation { background: #004a8e; color: #fff; padding: 10px 0; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; }
.main-navigation li { margin-right: 20px; }
.main-navigation a { color: #fff; text-decoration: none; font-weight: bold; }

/* Responsive Mobile */
@media (max-width: 768px) {
    .header-container { flex-direction: column; text-align: center; }
    .header-banner { margin-top: 15px; width: 100%; height: auto; min-height: 50px; }
    .main-navigation ul { justify-content: center; font-size: 14px; }
}