@php
            $items = \App\Models\Backend\ContentArticle::with(['translations' => function($q) use ($lang) { $q->where('article_translation_language', $lang); }])->where('article_category', 'NEWS')->where('article_status', 'ACTIVE')->orderBy('article_date', 'desc')->orderBy('created_at', 'desc')->get();
            @endphp
            @if($items->count())
            <section class="berita-section">
                <div class="container">
                    <div class="berita-header">
                        <span class="berita-badge">Berita</span>
                        <h1 class="berita-title">Berita Terkini</h1>
                        <p class="berita-subtitle">Ikuti perkembangan terkini dan pengumuman rasmi.</p>
                    </div>
                    <div class="berita-grid">
                        @foreach($items as $item)
                        @php $t = $item->translations->first(); @endphp
                        @if($t)
                        <a href="/{{ $siteSlug }}/article-web?id={{ $item->article_code }}" class="berita-card">
                            @if($item->article_image)
                            <div class="berita-card-img">
<img src="{{ image_url($item->article_image) }}" alt="{{ $t->article_translation_title ?? '' }}">
                            </div>
                            @endif
                            <div class="berita-card-body">
                                <div class="berita-meta">
                                    <span class="berita-date">{{ \Carbon\Carbon::parse($item->article_date)->format('d M Y') }}</span>
                                </div>
                                <h2 class="berita-card-title">{{ $t->article_translation_title }}</h2>
                                <p class="berita-card-excerpt">{{ strip_tags(Str::limit($t->article_translation_content, 150)) }}</p>
                                <span class="berita-readmore">Baca Selengkapnya <i class="fas fa-arrow-right"></i></span>
                            </div>
                        </a>
                        @endif
                        @endforeach
                    </div>
                </div>
            </section>
            <style>
            .berita-section { padding: 60px 0 80px; background: var(--gray-50); min-height: 60vh; }
            .berita-header { text-align: center; margin-bottom: 50px; }
            .berita-badge { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 6px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin-bottom: 16px; }
            .berita-title { font-size: 2rem; font-weight: 700; color: var(--gray-900); margin: 0 0 12px; }
            .berita-subtitle { color: var(--gray-400); font-size: 1rem; margin: 0; }
            .berita-grid { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
            .berita-card { display: block; background: var(--white); border-radius: 16px; border: 1px solid var(--gray-200); padding: 24px 28px; text-decoration: none; transition: box-shadow 0.2s, border-color 0.2s; }
            .berita-card:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }
            .berita-card-img { width: 100%; height: 180px; border-radius: 12px; overflow: hidden; margin-bottom: 14px; } .berita-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .berita-card-body { }
            .berita-meta { margin-bottom: 10px; }
            .berita-date { font-size: 0.8rem; color: var(--gray-400); }
            .berita-card-title { font-size: 1.1rem; font-weight: 600; color: var(--gray-900); margin: 0 0 8px; line-height: 1.4; }
            .berita-card:hover .berita-card-title { color: var(--primary); }
            .berita-card-excerpt { font-size: 0.88rem; color: var(--gray-500); margin: 0 0 14px; line-height: 1.6; }
            .berita-readmore { font-size: 0.85rem; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
            .berita-readmore i { font-size: 0.75rem; }
            .berita-card:hover .berita-readmore { gap: 10px; }
            @media (max-width: 768px) {
                .berita-section { padding: 30px 0 50px; }
                .berita-title { font-size: 1.4rem; }
                .berita-card { padding: 18px 20px; }
            }
            @media (max-width: 480px) {
                .berita-title { font-size: 1.2rem; }
                .berita-card { padding: 16px; }
            }
            </style>
            @else
            <section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;"><div class="container"><i class="fas fa-newspaper" style="font-size:3rem;color:var(--gray-300);margin-bottom:20px;"></i><h2 style="color:var(--gray-500);font-weight:500;font-size:1.2rem;">Tiada Berita</h2><p style="color:var(--gray-400);margin:10px 0 30px;">Tiada berita buat masa ini.</p><a href="/{{ $siteSlug }}" style="display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--primary);color:white;border-radius:10px;text-decoration:none;font-size:0.85rem;"><i class="fas fa-arrow-left"></i> Kembali</a></div></section>
            @endif
            