@php
            $code = request()->query('id');
            $item = $code ? \App\Models\Backend\ContentArticle::with('translations')->where('article_code', $code)->where('article_status', 'ACTIVE')->first() : null;
            @endphp
            @if($item)
            @php
            $t = $item->translations->firstWhere('article_translation_language', $lang) ?? $item->translations->first();
            $catDescr = \App\Models\Backend\Ref::where('cat', 'ARTICLE_CAT')->where('code', $item->article_category)->value('descr') ?? $item->article_category;
            @endphp
            <section class="article-detail">
                <div class="container">
                    <div class="article-breadcrumb">
                        <a href="/{{ $siteSlug }}">Utama</a>
                        <span class="sep">/</span>
                        <span class="current">Artikel</span>
                    </div>
            
                    <div class="article-content">
                        @if($item->article_image)
                        <div class="article-image">
                            <img src="{{ str_starts_with($item->article_image, 'http') ? $item->article_image : \Illuminate\Support\Facades\Storage::url($item->article_image) }}" alt="{{ $t?->article_translation_title ?? '' }}">
                        </div>
                        @endif
            
                        <div class="article-meta">
                            <span class="article-category"><i class="fas fa-tag"></i> {{ $catDescr }}</span>
                            <span class="article-date"><i class="fas fa-calendar-alt"></i> {{ \Carbon\Carbon::parse($item->article_date)->format('d M Y') }}</span>
                        </div>
            
                        <h1 class="article-title">{{ $t?->article_translation_title ?? 'Tidak Berjudul' }}</h1>
            
                        <div class="article-body">
                            {!! $t?->article_translation_content ?? '' !!}
                        </div>
            
                        <div class="article-footer">
                            <a href="/{{ $siteSlug }}" class="btn-back"><i class="fas fa-arrow-left"></i> Kembali ke Laman Utama</a>
                        </div>
                    </div>
                </div>
            </section>
            
            <style>
            .article-detail {
                padding: 60px 0 80px;
                background: var(--gray-50);
                min-height: 60vh;
            }
            .article-breadcrumb {
                font-size: 0.82rem;
                color: var(--gray-400);
                margin-bottom: 30px;
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .article-breadcrumb a {
                color: var(--primary);
                text-decoration: none;
                transition: color 0.2s;
            }
            .article-breadcrumb a:hover { color: var(--accent); }
            .article-breadcrumb .sep { color: var(--gray-300); }
            .article-breadcrumb .current { color: var(--gray-500); font-weight: 500; }
            .article-image {
                border-radius: 16px;
                overflow: hidden;
                margin-bottom: 30px;
                box-shadow: var(--shadow-lg);
            }
            .article-content {
                max-width: 800px;
                margin: 0 auto;
            }
            .article-image img {
                width: 100%;
                max-height: 400px;
                object-fit: cover;
                display: block;
            }
            .article-meta {
                display: flex;
                align-items: center;
                gap: 20px;
                margin-bottom: 20px;
                flex-wrap: wrap;
            }
            .article-category {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                background: var(--accent-light);
                color: var(--accent);
                padding: 6px 14px;
                border-radius: 999px;
                font-size: 0.75rem;
                font-weight: 600;
            }
            .article-category i { font-size: 0.65rem; }
            .article-date {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                color: var(--gray-400);
                font-size: 0.8rem;
            }
            .article-date i { font-size: 0.7rem; }
            .article-title {
                font-size: 2rem;
                font-weight: 700;
                color: var(--gray-900);
                line-height: 1.3;
                margin: 0 0 30px;
                letter-spacing: -0.5px;
            }
            .article-body {
                color: var(--gray-600);
                font-size: 1.05rem;
                line-height: 1.9;
                overflow-wrap: break-word;
                word-wrap: break-word;
                hyphens: auto;
            }
            .article-body p { margin-bottom: 1.2rem; }
            .article-body p.lead {
                font-size: 1.15rem;
                color: var(--gray-700);
                font-weight: 500;
                line-height: 1.7;
                padding: 20px 24px;
                background: var(--white);
                border-left: 4px solid var(--accent);
                border-radius: 0 12px 12px 0;
                margin-bottom: 1.5rem;
            }
            .article-body h2 {
                font-size: 1.4rem;
                font-weight: 600;
                color: var(--gray-900);
                margin: 2rem 0 1rem;
            }
            .article-body ul {
                padding-left: 20px;
                margin-bottom: 1.2rem;
            }
            .article-body ul li {
                margin-bottom: 8px;
                list-style-type: disc;
            }
            .article-body ul li::marker { color: var(--accent); }
            .article-body table {
                width: 100%;
                border-collapse: collapse;
                margin-bottom: 1.5rem;
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .article-body table th,
            .article-body table td {
                padding: 10px 16px;
                border: 1px solid var(--gray-200);
                text-align: left;
                vertical-align: top;
                white-space: normal;
            }
            .article-body table th {
                background: var(--primary);
                color: white;
                font-weight: 600;
            }
            .article-body table tr:nth-child(even) {
                background: var(--gray-50);
            }
            .article-body img,
            .article-body video,
            .article-body iframe {
                max-width: 100%;
                height: auto;
                border-radius: 12px;
            }
            .article-body pre,
            .article-body code {
                white-space: pre-wrap;
                word-break: break-word;
            }
            .article-footer {
                margin-top: 50px;
                padding-top: 30px;
                border-top: 1px solid var(--gray-200);
            }
            .btn-back {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 12px 24px;
                background: var(--primary);
                color: var(--white);
                border-radius: 10px;
                font-size: 0.85rem;
                font-weight: 500;
                text-decoration: none;
                transition: all 0.25s;
            }
            .btn-back:hover {
                background: var(--primary-light);
                transform: translateX(-3px);
            }
            .btn-back i { font-size: 0.75rem; }
            @media (max-width: 768px) {
                .article-detail { padding: 30px 0 50px; }
                .article-image img { max-height: 220px; }
                .article-title { font-size: 1.4rem; }
                .article-body { font-size: 0.95rem; }
                .article-content { max-width: 100%; }
            }
            @media (max-width: 480px) {
                .article-detail { padding: 20px 0 40px; }
                .article-image img { max-height: 180px; }
                .article-title { font-size: 1.2rem; }
                .article-body { font-size: 0.9rem; }
                .article-meta { gap: 12px; }
                .article-body p.lead { padding: 16px 18px; font-size: 1rem; }
            }
            </style>
            @else
            <section style="padding:80px 0;text-align:center;background:var(--gray-50);min-height:50vh;">
                <div class="container">
                    <i class="fas fa-file-alt" 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;">Artikel tidak ditemui</h2>
                    <p style="color:var(--gray-400);margin:10px 0 30px;">Maaf, artikel yang anda cari tidak wujud atau telah dialihkan.</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 ke Laman Utama</a>
                </div>
            </section>
            @endif