<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
.br-wrap { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; max-width: 820px; margin: 0 auto; }

/* Back bar */
.br-back {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.br-back-btn {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: .8rem;
    font-weight: 700;
    color: #0f766e;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: .15s;
}
.br-back-btn:hover { background: #f0fdfa; border-color: #14b8a6; }
.br-breadcrumb {
    font-size: .75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}
.br-breadcrumb a { color: #0f766e; text-decoration: none; font-weight: 600; }
.br-breadcrumb a:hover { text-decoration: underline; }

/* Card artikel */
.br-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    overflow: hidden;
}

/* Hero gambar */
.br-hero {
    position: relative;
    aspect-ratio: 16/7;
    overflow: hidden;
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
}
.br-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.br-hero-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
    height: 60%;
}
.br-no-hero {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
}
.br-no-hero i { font-size: 4rem; color: #99f6e4; }

/* Body */
.br-body { padding: 28px 32px 36px; }

/* Meta */
.br-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.br-source-badge {
    background: #0f766e;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.br-source-badge span { color: #ff6b6b; }
.br-meta-item {
    font-size: .75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}
.br-meta-item i { color: #14b8a6; }

/* Judul */
.br-judul {
    font-size: 1.45rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 20px;
}

/* Divider */
.br-divider {
    height: 3px;
    background: linear-gradient(90deg, #0f766e, #14b8a6, transparent);
    border-radius: 2px;
    margin-bottom: 22px;
}

/* Isi */
.br-isi p {
    font-size: .92rem;
    color: #334155;
    line-height: 1.85;
    margin-bottom: 16px;
}
.br-isi p:last-child { margin-bottom: 0; }

/* Loading state */
.br-loading {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.br-loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #14b8a6;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto 14px;
}

/* Gagal / fallback */
.br-fallback {
    text-align: center;
    padding: 40px 20px;
}
.br-fallback i { font-size: 3rem; color: #e2e8f0; display: block; margin-bottom: 12px; }
.br-fallback p { font-size: .85rem; color: #64748b; margin-bottom: 16px; }
.br-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0f766e;
    color: #fff;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    transition: .15s;
}
.br-open-btn:hover { background: #0d6b62; }

/* Footer card */
.br-card-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 14px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.br-cnn-note {
    font-size: .72rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}
.br-ext-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: .74rem;
    font-weight: 700;
    color: #0f766e;
    text-decoration: none;
    transition: .15s;
}
.br-ext-link:hover { background: #f0fdfa; border-color: #14b8a6; }

@media (max-width: 600px) {
    .br-body { padding: 18px 16px 24px; }
    .br-judul { font-size: 1.1rem; }
    .br-card-footer { padding: 12px 16px; }
    .br-hero { aspect-ratio: 16/9; }
}

@keyframes spin { to { transform: rotate(360deg); } }
</style>

<div class="br-wrap">

    <!-- Back navigation -->
    <div class="br-back">
        <a href="<?php echo base_url('berita?kat='.$kategori) ?>" class="br-back-btn">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
        <div class="br-breadcrumb">
            <a href="<?php echo base_url('berita') ?>"><i class="bi bi-house"></i> Berita</a>
            <i class="bi bi-chevron-right" style="font-size:.6rem;"></i>
            <a href="<?php echo base_url('berita?kat='.$kategori) ?>"><?php echo htmlspecialchars($feeds[$kategori]['label']) ?></a>
            <i class="bi bi-chevron-right" style="font-size:.6rem;"></i>
            <span style="color:#64748b;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                <?php echo htmlspecialchars(substr($artikel['judul'], 0, 50)) ?>...
            </span>
        </div>
    </div>

    <!-- Card artikel -->
    <div class="br-card">

        <!-- Hero image -->
        <?php if ($artikel['gambar']): ?>
        <div class="br-hero">
            <img src="<?php echo htmlspecialchars($artikel['gambar']) ?>"
                 alt="<?php echo htmlspecialchars($artikel['judul']) ?>"
                 onerror="this.parentElement.innerHTML='<div class=\'br-no-hero\'><i class=\'bi bi-newspaper\'></i></div>'">
            <div class="br-hero-overlay"></div>
        </div>
        <?php else: ?>
        <div class="br-no-hero"><i class="bi bi-newspaper"></i></div>
        <?php endif; ?>

        <div class="br-body">

            <!-- Meta info -->
            <div class="br-meta">
                <div class="br-source-badge">
                    <span>&#9654;</span> CNN Indonesia
                </div>
                <?php if ($artikel['tanggal']): ?>
                <div class="br-meta-item">
                    <i class="bi bi-calendar3"></i>
                    <?php
                        $tgl = strtotime($artikel['tanggal']);
                        echo $tgl ? date('d M Y, H:i', $tgl) . ' WIB' : '';
                    ?>
                </div>
                <?php endif; ?>
                <?php if ($artikel['penulis']): ?>
                <div class="br-meta-item">
                    <i class="bi bi-person"></i>
                    <?php echo htmlspecialchars($artikel['penulis']) ?>
                </div>
                <?php endif; ?>
            </div>

            <!-- Judul -->
            <?php if ($artikel['judul']): ?>
            <h1 class="br-judul"><?php echo htmlspecialchars($artikel['judul']) ?></h1>
            <?php endif; ?>

            <div class="br-divider"></div>

            <!-- Isi konten -->
            <?php if (!empty($artikel['isi'])): ?>
            <div class="br-isi">
                <?php foreach ($artikel['isi'] as $paragraf): ?>
                <p><?php echo htmlspecialchars($paragraf) ?></p>
                <?php endforeach; ?>
            </div>
            <?php else: ?>
            <div class="br-fallback">
                <i class="bi bi-file-earmark-text"></i>
                <p>Konten artikel tidak dapat ditampilkan di sini.<br>Buka langsung di CNN Indonesia untuk membaca artikel lengkap.</p>
                <a href="<?php echo htmlspecialchars($artikel['url']) ?>" target="_blank" rel="noopener noreferrer" class="br-open-btn">
                    <i class="bi bi-box-arrow-up-right"></i> Buka di CNN Indonesia
                </a>
            </div>
            <?php endif; ?>

        </div>

        <!-- Footer card -->
        <div class="br-card-footer">
            <div class="br-cnn-note">
                <i class="bi bi-info-circle"></i>
                Konten berita milik CNN Indonesia
            </div>
            <a href="<?php echo htmlspecialchars($artikel['url']) ?>" target="_blank" rel="noopener noreferrer" class="br-ext-link">
                <i class="bi bi-box-arrow-up-right"></i> Artikel Asli
            </a>
        </div>

    </div>

</div>