<?php
session_start();
include 'koneksi.php';

// ========== HIT COUNTER PENGUNJUNG ==========
$ip = $_SERVER['REMOTE_ADDR'];
$tanggal = date('Y-m-d');

mysqli_query($koneksi, "
    CREATE TABLE IF NOT EXISTS visitor_counter (
        id INT AUTO_INCREMENT PRIMARY KEY,
        ip_address VARCHAR(100),
        tanggal DATE,
        user_agent VARCHAR(255)
    )
");

$cek = mysqli_query($koneksi, "
    SELECT * FROM visitor_counter 
    WHERE ip_address = '$ip' AND tanggal = '$tanggal'
");

if(mysqli_num_rows($cek) == 0){
    mysqli_query($koneksi, "
        INSERT INTO visitor_counter (ip_address, tanggal) 
        VALUES ('$ip', '$tanggal')
    ");
}

$totalVisitor = mysqli_fetch_assoc(mysqli_query($koneksi, "
    SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter
"))['total'];

$id = isset($_GET['id']) ? mysqli_real_escape_string($koneksi, $_GET['id']) : 0;

// Update views otomatis setiap halaman dibuka
mysqli_query($koneksi, "UPDATE berita SET views = views + 1 WHERE id='$id'");

$query = mysqli_query($koneksi, "SELECT * FROM berita WHERE id='$id'");

if(mysqli_num_rows($query) == 0) {
    echo "<script>alert('Berita tidak ditemukan!'); window.location='berita.php';</script>";
    exit();
}

$data = mysqli_fetch_array($query);

// Format tanggal Indonesia (Senin, 10 Mei 2026)
$hari = array('Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu');
$tanggal_format = date('Y-m-d', strtotime($data['tanggal']));
$hari_indo = $hari[date('w', strtotime($tanggal_format))];
$tanggal_indonesia = $hari_indo . ', ' . date('d F Y', strtotime($data['tanggal']));

// Ambil views dari database
$views = isset($data['views']) ? $data['views'] : 0;

// Ambil semua gambar (multiple images) dari database
$gambarArray = [];
if(!empty($data['gambar'])){
    $gambarArray = explode(',', $data['gambar']);
    $gambarArray = array_map('trim', $gambarArray);
    $gambarArray = array_filter($gambarArray);
}

if(empty($gambarArray)){
    $gambarArray = ['placeholder.jpg'];
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($data['judul']); ?> | DPAD Solok Selatan</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    
    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- Swiper CSS untuk Carousel -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f0f7f2 0%, #e8f0ea 100%);
            min-height: 100vh;
            padding-top: 80px;
        }

        /* ========== HEADER STICKY TANPA ANIMASI ========== */
        .header {
            background: linear-gradient(135deg, #0a3d32 0%, #1a5f4b 50%, #0f3b2c 100%);
            padding: 0;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            overflow: visible;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: padding 0.3s ease;
        }

        .header.scrolled {
            padding: 5px 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }

        .header.scrolled .logo-img {
            width: 50px;
            height: 50px;
        }

        .header.scrolled .logo-text h1 {
            font-size: 1.1rem;
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 12px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            position: relative;
            z-index: 2;
            transition: all 0.3s ease;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo-img {
            width: 60px;
            height: 60px;
            border-radius: 14px;
            overflow: hidden;
            background: rgba(255,255,255,0.15);
            padding: 8px;
            border: 2px solid rgba(255,255,255,0.15);
            transition: all 0.3s ease;
        }

        .logo-img:hover {
            border-color: rgba(245,197,66,0.5);
        }

        .logo-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .logo-text h1 {
            font-size: 1.3rem;
            font-weight: 800;
            color: white;
            letter-spacing: -0.5px;
            line-height: 1.3;
            font-family: 'Playfair Display', serif;
            transition: all 0.3s ease;
        }

        .logo-text p {
            color: rgba(255,255,255,0.8);
            font-size: 0.7rem;
            margin-top: 2px;
            letter-spacing: 0.5px;
        }

        .header-menu {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        /* ===== MENU ITEM DENGAN TOOLTIP DI BAWAH ===== */
        .menu-item {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .menu-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            background: rgba(255,255,255,0.1);
            color: white;
            font-size: 16px;
            border: 1px solid rgba(255,255,255,0.1);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .menu-icon:hover {
            background: white;
            color: #1a5f4b;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            border-color: #f5c542;
        }

        .menu-icon.logout:hover {
            background: #ef4444;
            color: white;
            border-color: #ef4444;
        }

        /* ===== TOOLTIP DI BAWAH ICON ===== */
        .menu-item .tooltip {
            position: absolute;
            bottom: -38px;
            left: 50%;
            transform: translateX(-50%) scale(0.9);
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(10px);
            color: white;
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 0.65rem;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s ease;
            pointer-events: none;
            border: 1px solid rgba(255,255,255,0.08);
            letter-spacing: 0.3px;
            z-index: 99999;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .menu-item .tooltip::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 8px;
            height: 8px;
            background: rgba(0,0,0,0.85);
            border-radius: 2px;
            border-top: 1px solid rgba(255,255,255,0.08);
            border-left: 1px solid rgba(255,255,255,0.08);
            z-index: 99999;
        }

        .menu-item:hover .tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) scale(1);
            bottom: -42px;
        }

        .menu-item .tooltip.logout-tooltip {
            background: rgba(239, 68, 68, 0.95);
        }

        .menu-item .tooltip.logout-tooltip::before {
            background: rgba(239, 68, 68, 0.95);
        }

        /* ========== BREADCRUMB ========== */
        .breadcrumb-section {
            max-width: 1200px;
            margin: 30px auto 20px;
            padding: 0 40px;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            color: #64748b;
            flex-wrap: wrap;
        }

        .breadcrumb a {
            color: #1a5f4b;
            text-decoration: none;
            transition: 0.3s;
        }

        .breadcrumb a:hover {
            color: #f5c542;
        }

        .breadcrumb .separator {
            color: #94a3b8;
        }

        .breadcrumb .current {
            color: #1e293b;
            font-weight: 600;
        }

        /* ========== MAIN CONTENT ========== */
        .main-container {
            max-width: 1200px;
            margin: 0 auto 50px;
            padding: 0 40px;
        }

        /* ========== HEADER ARTIKEL ========== */
        .article-wrapper {
            background: white;
            border-radius: 30px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

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

        .article-category {
            display: inline-block;
            background: #dcfce7;
            color: #1a5f4b;
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.75rem;
            font-weight: 700;
            margin-bottom: 18px;
        }

        .article-title {
            font-size: 2.2rem;
            font-weight: 800;
            font-family: 'Playfair Display', serif;
            color: #0f3b2c;
            line-height: 1.3;
            margin-bottom: 20px;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            padding-bottom: 20px;
            border-bottom: 2px solid #f1f5f9;
            margin-bottom: 25px;
        }

        .meta-date, .meta-views {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #64748b;
            font-size: 0.85rem;
        }

        .meta-date i, .meta-views i {
            color: #1a5f4b;
        }

        /* ========== GALLERY CAROUSEL ========== */
        .article-gallery {
            margin-bottom: 30px;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            position: relative;
        }

        .swiper {
            width: 100%;
            height: 450px;
        }

        .swiper-slide {
            text-align: center;
            background: #f1f5f9;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .swiper-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .swiper-button-next, .swiper-button-prev {
            color: white;
            background: rgba(0,0,0,0.4);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .swiper-button-next:after, .swiper-button-prev:after {
            font-size: 18px;
        }

        .swiper-button-next:hover, .swiper-button-prev:hover {
            background: #1a5f4b;
        }

        .swiper-pagination-bullet {
            background: white;
            opacity: 0.7;
        }

        .swiper-pagination-bullet-active {
            background: #f5c542;
        }

        .gallery-info {
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            z-index: 10;
            backdrop-filter: blur(5px);
        }

        .image-caption {
            padding: 10px 15px;
            background: #f8fafc;
            font-size: 0.75rem;
            color: #64748b;
            font-style: italic;
            text-align: center;
            border-top: 1px solid #e2e8f0;
        }

        /* ========== ISI ARTIKEL ========== */
        .article-content {
            font-size: 1.05rem;
            line-height: 1.9;
            color: #334155;
        }

        .article-content p {
            margin-bottom: 1.2rem;
        }

        .article-content img {
            max-width: 100%;
            border-radius: 12px;
            margin: 20px 0;
        }

        /* ========== SHARE BOX ========== */
        .share-box {
            margin: 40px 0 30px;
            padding: 20px 0;
            border-top: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 15px;
        }

        .share-label {
            font-weight: 600;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .share-label i {
            color: #f5c542;
        }

        .share-icons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .share-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: all 0.3s;
            font-size: 0.9rem;
        }

        .share-icon:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

        .share-fb { background: #1877f2; }
        .share-twitter { background: #1da1f2; }
        .share-wa { background: #25d366; }
        .share-linkedin { background: #0077b5; }

        /* ========== NAVIGASI ARTIKEL ========== */
        .article-nav {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 35px;
        }

        .nav-prev, .nav-next {
            flex: 1;
            background: #f8fafc;
            padding: 18px 22px;
            border-radius: 16px;
            text-decoration: none;
            transition: all 0.3s;
            border: 1px solid #e2e8f0;
        }

        .nav-prev:hover, .nav-next:hover {
            background: #1a5f4b;
            transform: translateX(-3px);
            border-color: #1a5f4b;
        }

        .nav-prev:hover .nav-label, .nav-next:hover .nav-label,
        .nav-prev:hover .nav-title, .nav-next:hover .nav-title {
            color: white;
        }

        .nav-next:hover {
            transform: translateX(3px);
        }

        .nav-label {
            font-size: 0.7rem;
            color: #94a3b8;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .nav-title {
            font-weight: 600;
            color: #1e293b;
            font-size: 0.9rem;
        }

        .nav-next {
            text-align: right;
        }

        .nav-next .nav-label {
            justify-content: flex-end;
        }

        /* ========== BACK TO TOP ========== */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top button {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: all 0.3s;
        }

        .back-to-top button:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(26,95,75,0.3);
        }

        /* ========== ADMIN EDIT BUTTON ========== */
        .admin-edit-btn {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 1000;
        }

        .admin-edit-btn a {
            background: #1a5f4b;
            color: white;
            padding: 12px 24px;
            border-radius: 40px;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: all 0.3s;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .admin-edit-btn a:hover {
            background: #f5c542;
            color: #0f3b2c;
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(245,197,66,0.3);
        }

        /* ========== FOOTER PREMIUM ========== */
        .footer-premium {
            background: linear-gradient(135deg, #0a3d32, #0f3b2c);
            color: #ffffff;
            position: relative;
            overflow: hidden;
            padding-top: 60px;
            margin-top: 60px;
        }

        .footer-premium::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #f5c542, #eab308, #f5c542);
        }

        .footer-premium::after {
            content: '📚';
            position: absolute;
            bottom: 20px;
            right: 20px;
            font-size: 120px;
            opacity: 0.03;
            pointer-events: none;
        }

        .footer-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 35px;
            margin-bottom: 50px;
        }

        .footer-col h3 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
            padding-bottom: 10px;
            color: #f5c542;
        }

        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background: #f5c542;
            border-radius: 2px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .footer-logo .logo-icon {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.1);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .footer-logo .logo-icon img {
            width: 35px;
            height: 35px;
            object-fit: contain;
        }

        .footer-logo .logo-icon i {
            font-size: 28px;
            color: #f5c542;
        }

        .footer-logo .logo-text h3 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 4px;
            color: white;
        }

        .footer-logo .logo-text p {
            font-size: 0.7rem;
            opacity: 0.7;
            color: rgba(255,255,255,0.7);
        }

        .footer-description {
            color: #cbd5e1;
            line-height: 1.6;
            margin-bottom: 20px;
            font-size: 0.85rem;
        }

        .footer-menu {
            list-style: none;
        }

        .footer-menu li {
            margin-bottom: 12px;
        }

        .footer-menu li a {
            color: #cbd5e1;
            text-decoration: none;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 0.85rem;
        }

        .footer-menu li a i {
            width: 20px;
            font-size: 0.8rem;
            color: #f5c542;
        }

        .footer-menu li a:hover {
            color: #f5c542;
            transform: translateX(8px);
        }

        .social-links {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .social-icon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s;
            font-size: 1rem;
            text-decoration: none;
        }

        .social-fb { background: #1877f2; }
        .social-ig { background: #e4405f; }
        .social-yt { background: #ff0000; }
        .social-tt { background: #010101; }

        .social-icon:hover {
            transform: translateY(-3px);
            filter: brightness(1.1);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .footer-contact-item {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 15px;
            color: #cbd5e1;
            font-size: 0.85rem;
        }

        .footer-contact-item i {
            width: 35px;
            height: 35px;
            background: rgba(245,197,66,0.12);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #f5c542;
            font-size: 0.9rem;
            flex-shrink: 0;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.08);
            padding-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .footer-bottom p {
            color: rgba(255,255,255,0.6);
            font-size: 0.75rem;
        }

        .visitor-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.08);
            padding: 5px 12px;
            border-radius: 30px;
            font-size: 0.7rem;
            color: #f5c542;
        }

        .dev-credit {
            text-align: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.05);
            color: #94a3b8;
            font-size: 0.75rem;
        }

        .dev-credit a {
            color: #f5c542;
            text-decoration: none;
            font-weight: 500;
        }

        /* ========== RESPONSIVE ========== */
        
        /* Laptop & Tablet */
        @media (max-width: 1024px) {
            .header-content {
                padding: 12px 25px;
            }
            .article-title {
                font-size: 2rem;
            }
            .swiper {
                height: 380px;
            }
        }

        @media (max-width: 992px) {
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
            .main-container {
                padding: 0 25px;
            }
            .breadcrumb-section {
                padding: 0 25px;
            }
        }

        @media (max-width: 768px) {
            body {
                padding-top: 65px;
            }

            .header-content {
                padding: 8px 15px;
                gap: 10px;
            }
            
            .logo-text h1 {
                font-size: 0.85rem;
            }
            .logo-text p {
                font-size: 0.6rem;
            }
            .logo-img {
                width: 40px;
                height: 40px;
                padding: 6px;
            }
            .header.scrolled .logo-img {
                width: 35px;
                height: 35px;
            }
            .header.scrolled .logo-text h1 {
                font-size: 0.75rem;
            }
            
            .menu-icon {
                width: 36px;
                height: 36px;
                font-size: 13px;
                border-radius: 10px;
            }
            .header-menu {
                gap: 4px;
            }

            .breadcrumb-section {
                padding: 0 15px;
                margin: 20px auto 15px;
            }
            .breadcrumb {
                font-size: 0.75rem;
                gap: 5px;
            }

            .main-container {
                padding: 0 15px;
                margin-bottom: 30px;
            }

            .article-wrapper {
                padding: 20px 18px;
                border-radius: 16px;
            }

            .article-title {
                font-size: 1.4rem;
            }

            .article-meta {
                gap: 15px;
                font-size: 0.75rem;
            }

            .swiper {
                height: 220px;
            }

            .swiper-button-next, .swiper-button-prev {
                width: 30px;
                height: 30px;
            }
            .swiper-button-next:after, .swiper-button-prev:after {
                font-size: 14px;
            }

            .article-content {
                font-size: 0.9rem;
                line-height: 1.8;
            }

            .share-box {
                flex-direction: column;
                text-align: center;
                gap: 12px;
                padding: 15px 0;
            }

            .share-icons {
                justify-content: center;
            }

            .share-icon {
                width: 36px;
                height: 36px;
                font-size: 0.8rem;
            }

            .article-nav {
                flex-direction: column;
                gap: 12px;
            }

            .nav-prev, .nav-next {
                text-align: center;
                padding: 14px 16px;
            }

            .nav-next .nav-label {
                justify-content: center;
            }

            .nav-title {
                font-size: 0.8rem;
            }

            .admin-edit-btn {
                bottom: 15px;
                left: 15px;
            }

            .admin-edit-btn a {
                padding: 8px 16px;
                font-size: 0.75rem;
                gap: 6px;
            }

            .back-to-top {
                bottom: 15px;
                right: 15px;
            }

            .back-to-top button {
                width: 38px;
                height: 38px;
                font-size: 0.9rem;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 25px;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }

            .menu-item .tooltip {
                display: none;
            }

            /* Hide gallery info on small screens */
            .gallery-info {
                bottom: 10px;
                right: 10px;
                font-size: 0.6rem;
                padding: 3px 10px;
            }
            .image-caption {
                font-size: 0.65rem;
                padding: 6px 10px;
            }
        }

        @media (max-width: 576px) {
            body {
                padding-top: 60px;
            }

            .header-content {
                padding: 6px 10px;
                gap: 8px;
            }
            
            .logo-area {
                gap: 8px;
            }
            .logo-text h1 {
                font-size: 0.7rem;
            }
            .logo-text p {
                font-size: 0.5rem;
                margin-top: 1px;
            }
            .logo-img {
                width: 32px;
                height: 32px;
                padding: 4px;
                border-radius: 10px;
            }
            .header.scrolled .logo-img {
                width: 28px;
                height: 28px;
            }
            .header.scrolled .logo-text h1 {
                font-size: 0.65rem;
            }

            .menu-icon {
                width: 30px;
                height: 30px;
                font-size: 11px;
                border-radius: 8px;
            }
            .header-menu {
                gap: 3px;
            }

            .breadcrumb-section {
                padding: 0 10px;
                margin: 15px auto 10px;
            }
            .breadcrumb {
                font-size: 0.65rem;
                gap: 3px;
            }

            .main-container {
                padding: 0 10px;
                margin-bottom: 20px;
            }

            .article-wrapper {
                padding: 15px 12px;
                border-radius: 12px;
            }

            .article-title {
                font-size: 1.1rem;
                margin-bottom: 12px;
            }

            .article-category {
                font-size: 0.6rem;
                padding: 4px 12px;
                margin-bottom: 12px;
            }

            .article-meta {
                gap: 10px;
                font-size: 0.65rem;
                padding-bottom: 12px;
                margin-bottom: 15px;
            }

            .swiper {
                height: 170px;
            }

            .swiper-button-next, .swiper-button-prev {
                width: 25px;
                height: 25px;
            }
            .swiper-button-next:after, .swiper-button-prev:after {
                font-size: 10px;
            }

            .article-content {
                font-size: 0.8rem;
                line-height: 1.7;
            }
            .article-content p {
                margin-bottom: 0.8rem;
            }

            .share-box {
                margin: 25px 0 20px;
                padding: 12px 0;
                gap: 10px;
            }
            .share-label {
                font-size: 0.75rem;
            }
            .share-icon {
                width: 32px;
                height: 32px;
                font-size: 0.7rem;
            }

            .article-nav {
                gap: 10px;
                margin-top: 25px;
            }
            .nav-prev, .nav-next {
                padding: 10px 12px;
                border-radius: 12px;
            }
            .nav-label {
                font-size: 0.6rem;
            }
            .nav-title {
                font-size: 0.7rem;
            }

            .admin-edit-btn {
                bottom: 10px;
                left: 10px;
            }
            .admin-edit-btn a {
                padding: 6px 12px;
                font-size: 0.65rem;
                gap: 5px;
                border-radius: 30px;
            }

            .back-to-top {
                bottom: 10px;
                right: 10px;
            }
            .back-to-top button {
                width: 32px;
                height: 32px;
                font-size: 0.75rem;
            }

            .footer-premium {
                padding-top: 30px;
                margin-top: 30px;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 30px;
            }
            .footer-col h3 {
                font-size: 0.95rem;
                margin-bottom: 15px;
            }
            .footer-description {
                font-size: 0.75rem;
            }
            .footer-menu li a {
                font-size: 0.75rem;
            }
            .footer-contact-item {
                font-size: 0.75rem;
            }
            .footer-logo .logo-text h3 {
                font-size: 0.95rem;
            }
            .footer-bottom p {
                font-size: 0.65rem;
            }
            .visitor-badge {
                font-size: 0.6rem;
                padding: 3px 10px;
            }
            .dev-credit {
                font-size: 0.6rem;
            }
            .footer-premium::after {
                font-size: 60px;
            }

            /* Hide caption on very small screens */
            .image-caption {
                font-size: 0.55rem;
                padding: 4px 8px;
            }
            .gallery-info {
                font-size: 0.55rem;
                padding: 2px 8px;
                bottom: 8px;
                right: 8px;
            }
        }

        @media (max-width: 400px) {
            .header-content {
                padding: 5px 8px;
            }
            .logo-img {
                width: 28px;
                height: 28px;
                padding: 3px;
            }
            .logo-text h1 {
                font-size: 0.6rem;
            }
            .logo-text p {
                font-size: 0.45rem;
            }
            .menu-icon {
                width: 26px;
                height: 26px;
                font-size: 10px;
            }
            .header-menu {
                gap: 2px;
            }
            .article-title {
                font-size: 0.95rem;
            }
            .swiper {
                height: 140px;
            }
            .article-wrapper {
                padding: 10px 8px;
            }
            .article-content {
                font-size: 0.7rem;
            }
        }
    </style>
</head>
<body>

<!-- HEADER STICKY TANPA ANIMASI -->
<div class="header" id="mainHeader">
    <div class="header-content">
        <div class="logo-area">
            <div class="logo-img">
                <img src="img/logo.png" alt="Logo DPAD">
            </div>
            <div class="logo-text">
                <h1>Dinas Arsip Solok Selatan</h1>
                <p>Dinas Arsip Daerah</p>
            </div>
        </div>

        <div class="header-menu">
            <div class="menu-item">
                <a href="dashboard.php" class="menu-icon">
                    <i class="fas fa-house"></i>
                </a>
                <span class="tooltip">Beranda</span>
            </div>
            <div class="menu-item">
                <a href="berita.php" class="menu-icon">
                    <i class="fas fa-newspaper"></i>
                </a>
                <span class="tooltip">Berita</span>
            </div>

            <div class="menu-item">
                <a href="struktur.php" class="menu-icon">
                    <i class="fas fa-user"></i>
                </a>
                <span class="tooltip">Struktur</span>
            </div>
        </div>
    </div>
</div>

<!-- BREADCRUMB -->
<div class="breadcrumb-section" data-aos="fade-up">
    <div class="breadcrumb">
        <a href="dashboard.php"><i class="fas fa-home"></i> Beranda</a>
        <span class="separator"><i class="fas fa-chevron-right" style="font-size:10px;"></i></span>
        <a href="berita.php">Berita</a>
        <span class="separator"><i class="fas fa-chevron-right" style="font-size:10px;"></i></span>
        <span class="current"><?php echo htmlspecialchars(substr($data['judul'], 0, 50)); ?>...</span>
    </div>
</div>

<!-- MAIN CONTENT -->
<div class="main-container">
    <article class="article-wrapper" data-aos="fade-up">
        <div class="article-header">
            <div class="article-category">
                <i class="fas fa-tag"></i> Berita Terkini
            </div>
            <h1 class="article-title"><?php echo htmlspecialchars($data['judul']); ?></h1>
            <div class="article-meta">
                <div class="meta-date">
                    <i class="far fa-calendar-alt"></i>
                    <?php echo $tanggal_indonesia; ?>
                </div>
                <div class="meta-views">
                    <i class="far fa-eye"></i>
                    <?php echo number_format($views); ?> kali dibaca
                </div>
            </div>
        </div>

        <!-- GALLERY CAROUSEL -->
        <div class="article-gallery">
            <div class="swiper gallerySwiper">
                <div class="swiper-wrapper">
                    <?php foreach($gambarArray as $index => $gambar): ?>
                        <?php if($gambar != 'placeholder.jpg' && file_exists("img/".$gambar)): ?>
                            <div class="swiper-slide">
                                <img src="img/<?php echo $gambar; ?>" alt="Gambar <?php echo $index+1; ?> - <?php echo htmlspecialchars($data['judul']); ?>">
                            </div>
                        <?php else: ?>
                            <div class="swiper-slide">
                                <img src="https://placehold.co/1200x450/1a5f4b/white?text=DPAD+Solok+Selatan" alt="Default Image">
                            </div>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>
                <?php if(count($gambarArray) > 1): ?>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                <?php endif; ?>
            </div>
            <?php if(count($gambarArray) > 1): ?>
                <div class="gallery-info">
                    <i class="fas fa-images"></i> <?php echo count($gambarArray); ?> gambar
                </div>
            <?php endif; ?>
            <div class="image-caption">
                <i class="fas fa-camera"></i> Galeri Berita
            </div>
        </div>

        <div class="article-content">
            <?php 
            $isi = $data['isi'];
            $isi = preg_replace('/<img(.*?)src="([^"]+)"(.*?)>/i', '<img$1src="$2"$3 style="max-width:100%; border-radius:12px; margin:20px 0;">', $isi);
            echo $isi;
            ?>
        </div>

        <!-- SHARE BOX -->
        <div class="share-box">
            <span class="share-label">
                <i class="fas fa-share-alt"></i> Bagikan artikel ini:
            </span>
            <div class="share-icons">
                <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode('https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>" target="_blank" class="share-icon share-fb"><i class="fab fa-facebook-f"></i></a>
                <a href="https://twitter.com/intent/tweet?url=<?php echo urlencode('https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>&text=<?php echo urlencode($data['judul']); ?>" target="_blank" class="share-icon share-twitter"><i class="fab fa-twitter"></i></a>
                <a href="https://wa.me/?text=<?php echo urlencode($data['judul'] . ' - ' . 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>" target="_blank" class="share-icon share-wa"><i class="fab fa-whatsapp"></i></a>
                <a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo urlencode('https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); ?>" target="_blank" class="share-icon share-linkedin"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>

        <!-- NAVIGASI ARTIKEL -->
        <div class="article-nav">
            <?php
            $prev = mysqli_query($koneksi, "SELECT id, judul FROM berita WHERE id < '$id' ORDER BY id DESC LIMIT 1");
            $prev_data = mysqli_fetch_assoc($prev);
            
            $next = mysqli_query($koneksi, "SELECT id, judul FROM berita WHERE id > '$id' ORDER BY id ASC LIMIT 1");
            $next_data = mysqli_fetch_assoc($next);
            ?>
            
            <?php if($prev_data): ?>
            <a href="detail_berita.php?id=<?php echo $prev_data['id']; ?>" class="nav-prev">
                <div class="nav-label"><i class="fas fa-arrow-left"></i> Sebelumnya</div>
                <div class="nav-title"><?php echo htmlspecialchars(substr($prev_data['judul'], 0, 50)); ?>...</div>
            </a>
            <?php else: ?>
            <div class="nav-prev" style="opacity:0.5; cursor:default; background:#f1f5f9;">
                <div class="nav-label"><i class="fas fa-arrow-left"></i> Tidak ada berita sebelumnya</div>
            </div>
            <?php endif; ?>
            
            <?php if($next_data): ?>
            <a href="detail_berita.php?id=<?php echo $next_data['id']; ?>" class="nav-next">
                <div class="nav-label">Selanjutnya <i class="fas fa-arrow-right"></i></div>
                <div class="nav-title"><?php echo htmlspecialchars(substr($next_data['judul'], 0, 50)); ?>...</div>
            </a>
            <?php else: ?>
            <div class="nav-next" style="opacity:0.5; cursor:default; background:#f1f5f9;">
                <div class="nav-label">Tidak ada berita berikutnya <i class="fas fa-arrow-right"></i></div>
            </div>
            <?php endif; ?>
        </div>
    </article>
</div>

<!-- BACK TO TOP -->
<div class="back-to-top" id="backToTop">
    <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
        <i class="fas fa-arrow-up"></i>
    </button>
</div>

<!-- ADMIN EDIT BUTTON -->
<?php if(isset($_SESSION['admin'])): ?>
<div class="admin-edit-btn">
    <a href="edit_berita.php?id=<?php echo $id; ?>">
        <i class="fas fa-edit"></i> Edit Berita
    </a>
</div>
<?php endif; ?>

<!-- FOOTER PREMIUM -->
<footer class="footer-premium">
    <div class="footer-container">
        <div class="footer-grid">
            <div class="footer-col" data-aos="fade-up">
                <div class="footer-logo">
                    <div class="logo-icon">
                        <?php if(file_exists("img/logo.png")): ?>
                            <img src="img/logo.png" alt="Logo DPAD">
                        <?php else: ?>
                            <i class="fas fa-archive"></i>
                        <?php endif; ?>
                    </div>
                    <div class="logo-text">
                        <h3>Dinas Arsip Solok Selatan</h3>
                        <p>Dinas Perpustakaan & Arsip Daerah</p>
                    </div>
                </div>
                <p class="footer-description">
                    Melestarikan sejarah, menjaga arsip, dan membangun peradaban literasi untuk masyarakat Solok Selatan yang cerdas dan berbudaya.
                </p>
                 <div class="social-links">
                    <a href="https://www.facebook.com/profile.php?id=61573699960407" class="social-icon social-fb"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.instagram.com/arsip_solsel/" class="social-icon social-ig" target="_blank"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.youtube.com/@pustakadpksolsel" class="social-icon social-yt"><i class="fab fa-youtube"></i></a>
                    <a href="https://www.tiktok.com/@solselnews" class="social-icon social-tt"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>

            <div class="footer-col" data-aos="fade-up" data-aos-delay="100">
                <h3><i class="fas fa-link"></i> Menu Cepat</h3>
                 <ul class="footer-menu">
                    <li><a href="dashboard.php"><i class="fas fa-home"></i> Beranda</a></li>
                    <li><a href="profil_istansi.php"><i class="fas fa-building"></i> Profil</a></li>
                    <li><a href="visi.php"><i class="fas fa-eye"></i> Visi & Misi</a></li>
                    <li><a href="struktur.php"><i class="fas fa-diagram-project"></i> Struktur Organisasi</a></li>
                    <li><a href="berita.php"><i class="fas fa-newspaper"></i> Berita</a></li>
                </ul>
            </div>

            <div class="footer-col" data-aos="fade-up" data-aos-delay="200">
                <h3><i class="fas fa-star"></i> Layanan</h3>
               <ul class="footer-menu">
                    <li><a href="https://perpustakaan.solselkab.go.id/read/166/bidang-kearsipan"><i class="fas fa-book"></i> Perpustakaan</a></li>
                    <li><a href="layanan_arsip.php"><i class="fas fa-archive"></i> Kearsipan</a></li>
                    <li><a href="layanan_kunjungan.php"><i class="fas fa-users"></i> Kunjungan Edukasi</a></li>
                    <li><a href="layanan_konsultasi.php"><i class="fas fa-comments"></i> Konsultasi Arsip</a></li>
                    <li><a href="pengaduan.php"><i class="fas fa-headset"></i> Pengaduan Masyarakat</a></li>
                </ul>
            </div>

            <div class="footer-col" data-aos="fade-up" data-aos-delay="300">
                <h3><i class="fas fa-map-marker-alt"></i> Lokasi & Kontak</h3>
                <div class="footer-contact-item"><i class="fas fa-map-marker-alt"></i><span>Jl. Lubuk Gadang - Simpang Tigo Rimbo Tangah, Sangir, Solok Selatan</span></div>
                <div class="footer-contact-item"><i class="fas fa-envelope"></i><span>pustaka.arsipsolsel@gmail.com</span></div>
                <div class="footer-contact-item"><i class="fas fa-clock"></i><span>Senin - Jumat, 08:00 - 16:00 WIB</span></div>
            </div>
        </div>

        <div class="footer-bottom">
            <div>
                <p>&copy; <?php echo date('Y'); ?> Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan</p>
                <p style="margin-top: 5px;">All Rights Reserved | <a>Kebijakan Privasi</a> | <a>Sitemap</a></p>
            </div>
            <div>
                <p>Sistem Informasi Perpustakaan dan Arsip Daerah</p>
                <div class="visitor-badge">
                    <i class="fas fa-eye"></i> <?php echo number_format($totalVisitor); ?> Pengunjung
                </div>
            </div>
        </div>
        
        <div class="dev-credit">
            Developed by <a href="https://www.pnp.ac.id/download/psdku-solok-selatan/" target="_blank">PSDKU Solok Selatan</a>
        </div>
    </div>
</footer>


<!-- Scripts -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    AOS.init({
        duration: 600,
        once: true,
        offset: 30
    });

    // ========== HEADER STICKY ==========
    const header = document.getElementById('mainHeader');
    let lastScrollY = window.scrollY;

    window.addEventListener('scroll', function() {
        const currentScrollY = window.scrollY;
        
        if (currentScrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }

        // Sembunyikan header saat scroll ke bawah, tampilkan saat scroll ke atas
        if (currentScrollY > lastScrollY && currentScrollY > 100) {
            header.style.transform = 'translateY(-100%)';
        } else {
            header.style.transform = 'translateY(0)';
        }
        lastScrollY = currentScrollY;

        // Back to top visibility
        const btn = document.getElementById('backToTop');
        if (currentScrollY > 300) {
            btn.classList.add('show');
        } else {
            btn.classList.remove('show');
        }
    });

    // ========== SWIPER GALLERY ==========
    <?php if(count($gambarArray) > 1): ?>
    const gallerySwiper = new Swiper('.gallerySwiper', {
        loop: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        effect: 'slide',
        speed: 600,
    });
    <?php endif; ?>
</script>

</body>
</html>