/*
Theme Name: Berita Pro
Theme URI: https://beritapro.com
Description: WordPress News Theme Professional - Responsive, Modern, and Feature-Rich News Theme
Version: 1.0.0
Author: Berita Pro Team
Author URI: https://beritapro.com
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: berita-pro
Domain Path: /languages
Tags: news, blog, magazine, responsive, modern, clean, professional, two-columns, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Berita Pro is a professional WordPress news theme designed for modern news websites and online magazines. 
With its clean design, responsive layout, and powerful features, it's perfect for content creators who want 
to showcase their news articles in an elegant and engaging way.

Features:
- Responsive Design for All Devices
- Modern Card-Based Layout
- Breaking News Ticker
- Hero Section with Gradient Background
- Category Grid Navigation
- Featured Posts Support
- Trending Articles Sidebar
- Social Media Integration
- SEO Optimized
- Fast Loading
- Easy Customization
- Translation Ready
- RTL Support
- Custom Widgets
- Advanced Theme Options
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
    margin-bottom: 1rem;
}

a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #e74c3c;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    padding: 0 15px;
}

.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

/* Header */
.header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    background: #2c3e50;
    color: #fff;
    padding: 10px 0;
}

.header-main {
    padding: 20px 0;
}

.logo {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    text-decoration: none;
}

.logo:hover {
    color: #e74c3c;
}

/* Navigation */
.main-nav {
    background: #fff;
    border-top: 1px solid #e9ecef;
}

.main-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.main-nav li {
    position: relative;
}

.main-nav a {
    display: block;
    padding: 15px 20px;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
}

.main-nav a:hover {
    background: #f8f9fa;
    color: #e74c3c;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 10px;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 80px 0;
    margin-bottom: 40px;
}

.hero-content {
    text-align: center;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-btn {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.hero-btn:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Breaking News Ticker */
.breaking-news {
    background: #e74c3c;
    color: #fff;
    padding: 15px 0;
    margin-bottom: 30px;
}

.breaking-news-label {
    background: #c0392b;
    padding: 10px 20px;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 20px;
}

.breaking-news-content {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.ticker {
    display: flex;
    animation: ticker 30s linear infinite;
}

.ticker-item {
    white-space: nowrap;
    padding-right: 50px;
}

@keyframes ticker {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.category-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.category-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.category-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}

.category-count {
    color: #666;
    font-size: 0.9rem;
}

/* News Cards */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.news-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.news-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 20px;
}

.news-category {
    display: inline-block;
    background: #2c3e50;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.news-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3;
}

.news-title a {
    color: #2c3e50;
}

.news-title a:hover {
    color: #e74c3c;
}

.news-excerpt {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.5;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #999;
}

.news-date {
    display: flex;
    align-items: center;
    gap: 5px;
}

.news-views {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Featured Posts */
.featured-section {
    margin-bottom: 40px;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: #e74c3c;
}

.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.featured-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.featured-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.featured-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.featured-content {
    padding: 30px;
}

.featured-badge {
    display: inline-block;
    background: #e74c3c;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.featured-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

.featured-title a {
    color: #2c3e50;
}

.featured-title a:hover {
    color: #e74c3c;
}

/* Sidebar */
.sidebar {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 30px;
}

.widget-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e74c3c;
}

/* Trending Widget */
.trending-list {
    list-style: none;
}

.trending-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
}

.trending-item:last-child {
    border-bottom: none;
}

.trending-number {
    background: #e74c3c;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 15px;
    flex-shrink: 0;
}

.trending-content {
    flex: 1;
}

.trending-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.trending-title a {
    color: #2c3e50;
}

.trending-title a:hover {
    color: #e74c3c;
}

.trending-meta {
    font-size: 0.8rem;
    color: #999;
}

/* Categories Widget */
.categories-list {
    list-style: none;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.category-item:last-child {
    border-bottom: none;
}

.category-item a {
    color: #2c3e50;
    font-weight: 500;
}

.category-item a:hover {
    color: #e74c3c;
}

.category-count {
    background: #f8f9fa;
    color: #666;
    padding: 3px 8px;
    border-radius: 15px;
    font-size: 0.8rem;
}

/* Load More Button */
.load-more {
    text-align: center;
    margin: 40px 0;
}

.load-more-btn {
    display: inline-block;
    background: #2c3e50;
    color: #fff;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.load-more-btn:hover {
    background: #e74c3c;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Footer */
.footer {
    background: #2c3e50;
    color: #fff;
    padding: 60px 0 20px;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-widget h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 1.25rem;
}

.footer-widget ul {
    list-style: none;
}

.footer-widget ul li {
    margin-bottom: 10px;
}

.footer-widget ul li a {
    color: #bdc3c7;
    transition: color 0.3s ease;
}

.footer-widget ul li a:hover {
    color: #fff;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #34495e;
    color: #bdc3c7;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #34495e;
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #e74c3c;
    transform: translateY(-3px);
}

/* Single Post */
.single-post {
    background: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 40px;
}

.post-header {
    margin-bottom: 30px;
}

.post-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.2;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.post-content {
    line-height: 1.8;
    color: #333;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #2c3e50;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
}

.post-content blockquote {
    background: #f8f9fa;
    border-left: 4px solid #e74c3c;
    padding: 20px;
    margin: 20px 0;
    font-style: italic;
}

.post-tags {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag {
    display: inline-block;
    background: #f8f9fa;
    color: #2c3e50;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.tag:hover {
    background: #e74c3c;
    color: #fff;
}

/* Comments */
.comments-section {
    background: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 40px;
}

.comments-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 30px;
}

.comment-list {
    list-style: none;
}

.comment {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e9ecef;
}

.comment:last-child {
    border-bottom: none;
}

.comment-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 20px;
    float: left;
}

.comment-content {
    overflow: hidden;
}

.comment-author {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.comment-date {
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 10px;
}

.comment-text {
    line-height: 1.6;
    color: #333;
}

/* Responsive Design */
@media (max-width: 992px) {
    .col-8, .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .featured-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .main-nav {
        display: none;
    }
    
    .main-nav.active {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .main-nav ul {
        flex-direction: column;
    }
    
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .category-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
    }
    
    .post-title {
        font-size: 2rem;
    }
    
    .single-post {
        padding: 20px;
    }
    
    .comments-section {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .post-title {
        font-size: 1.75rem;
    }
    
    .featured-content {
        padding: 20px;
    }
    
    .sidebar {
        padding: 20px;
    }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }

.p-0 { padding: 0; }
.p-1 { padding: 10px; }
.p-2 { padding: 20px; }
.p-3 { padding: 30px; }
.p-4 { padding: 40px; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #e74c3c;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .header,
    .main-nav,
    .sidebar,
    .footer,
    .load-more,
    .comments-form {
        display: none !important;
    }
    
    .single-post {
        box-shadow: none;
        border: none;
        padding: 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }
}