<?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),
        last_visit TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )
");

$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, user_agent) 
        VALUES ('$ip', '$tanggal', '{$_SERVER['HTTP_USER_AGENT']}')
    ");
} else {
    mysqli_query($koneksi, "
        UPDATE visitor_counter 
        SET last_visit = NOW() 
        WHERE ip_address = '$ip' AND tanggal = '$tanggal'
    ");
}

$totalVisitor = 0;
$query_total = mysqli_query($koneksi, "SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter");
if($query_total && mysqli_num_rows($query_total) > 0){
    $row = mysqli_fetch_assoc($query_total);
    $totalVisitor = $row['total'];
}

$hariIni = 0;
$query_hari = mysqli_query($koneksi, "SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter WHERE tanggal = '$tanggal'");
if($query_hari && mysqli_num_rows($query_hari) > 0){
    $row = mysqli_fetch_assoc($query_hari);
    $hariIni = $row['total'];
}

$online = 0;
$batas_online = date('Y-m-d H:i:s', strtotime('-15 minutes'));
$query_online = mysqli_query($koneksi, "SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter WHERE last_visit > '$batas_online'");
if($query_online && mysqli_num_rows($query_online) > 0){
    $row = mysqli_fetch_assoc($query_online);
    $online = $row['total'];
}

// ========== STATISTIK ==========
// Total Berita
$q_berita = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM berita");
$total_berita = ($q_berita && mysqli_num_rows($q_berita) > 0) ? mysqli_fetch_assoc($q_berita)['total'] : 0;

// Total Arsip Galeri
$q_galeri = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM arsip_foto");
$total_galeri = ($q_galeri && mysqli_num_rows($q_galeri) > 0) ? mysqli_fetch_assoc($q_galeri)['total'] : 0;

// Total Video
$cek_tabel_video = mysqli_query($koneksi, "SHOW TABLES LIKE 'arsip_video'");
if($cek_tabel_video && mysqli_num_rows($cek_tabel_video) > 0){
    $q_video = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM arsip_video");
    $total_video = ($q_video && mysqli_num_rows($q_video) > 0) ? mysqli_fetch_assoc($q_video)['total'] : 0;
} else {
    mysqli_query($koneksi, "
        CREATE TABLE IF NOT EXISTS arsip_video (
            id INT AUTO_INCREMENT PRIMARY KEY,
            judul VARCHAR(200) NOT NULL,
            deskripsi TEXT,
            video VARCHAR(255),
            thumbnail VARCHAR(255),
            durasi VARCHAR(20),
            tanggal DATE,
            tahun YEAR,
            kualitas VARCHAR(10) DEFAULT 'HD',
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        )
    ");
    $total_video = 0;
}

// Total Pengguna
$q_user = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM users");
$total_user = ($q_user && mysqli_num_rows($q_user) > 0) ? mysqli_fetch_assoc($q_user)['total'] : 0;
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>Layanan Akses Arsip | DPAD Solok Selatan</title>

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

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

        body {
            font-family: 'Inter', sans-serif;
            background: #f0f7f2;
            color: #1e293b;
            padding-top: 80px;
        }

        /* ========== HEADER PREMIUM ========== */
        .header-premium {
            background: linear-gradient(135deg, #0a3d32, #1a5f4b);
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .header-premium.scrolled {
            padding: 8px 40px;
            box-shadow: 0 4px 25px rgba(0,0,0,0.15);
        }

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

        .logo-icon {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.15);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .logo-icon:hover {
            transform: scale(1.05);
            background: rgba(255,255,255,0.25);
        }

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

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

        .logo-text h2 {
            color: white;
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.3;
        }

        .logo-text p {
            color: rgba(255,255,255,0.7);
            font-size: 0.65rem;
            margin-top: 3px;
        }

        /* Header Actions - Icon Buttons */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        /* Icon Button dengan Tooltip */
        .icon-btn {
            position: relative;
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(10px);
            color: white;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            text-decoration: none;
            font-size: 1.2rem;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .icon-btn:hover {
            background: white;
            color: #1a5f4b;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        /* Tooltip Text */
        .icon-btn .tooltip {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: white;
            padding: 6px 12px;
            border-radius: 8px;
            font-size: 0.7rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 100;
            pointer-events: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

        .icon-btn .tooltip::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #1e293b;
        }

        .icon-btn:hover .tooltip {
            opacity: 1;
            visibility: visible;
            bottom: -35px;
        }

        /* ========== HERO ========== */
        .hero-page {
            background: linear-gradient(135deg, #0f3b2c, #1a5f4b);
            margin: 20px 40px 30px;
            border-radius: 30px;
            padding: 55px 50px;
            color: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .hero-page::before {
            content: "🔍";
            position: absolute;
            right: -20px;
            top: -20px;
            font-size: 200px;
            opacity: 0.06;
        }

        .hero-page::after {
            content: "📖";
            position: absolute;
            left: -20px;
            bottom: -20px;
            font-size: 200px;
            opacity: 0.06;
        }

        .hero-page .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(245,197,66,0.2);
            padding: 6px 18px;
            border-radius: 50px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #f5c542;
            margin-bottom: 15px;
        }

        .hero-page h1 {
            font-size: 2.5rem;
            font-weight: 800;
            font-family: 'Playfair Display', serif;
            position: relative;
            z-index: 2;
            margin-bottom: 8px;
        }

        .hero-page h1 span {
            color: #f5c542;
        }

        .hero-page p {
            font-size: 1.05rem;
            opacity: 0.9;
            max-width: 600px;
            position: relative;
            z-index: 2;
            line-height: 1.7;
        }

        /* ========== BREADCRUMB ========== */
        .breadcrumb-wrap {
            max-width: 1400px;
            margin: -8px auto 0;
            padding: 0 40px 25px;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.8rem;
            color: #94a3b8;
            flex-wrap: wrap;
        }

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

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

        .breadcrumb .sep {
            color: #cbd5e1;
        }

        .breadcrumb .active {
            color: #1a5f4b;
            font-weight: 600;
        }

        /* ========== STATISTIK ========== */
        .stats-wrap {
            max-width: 1400px;
            margin: -15px auto 0;
            padding: 0 40px 30px;
            position: relative;
            z-index: 10;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .stat-card {
            background: white;
            border-radius: 20px;
            padding: 25px 20px;
            text-align: center;
            border: 1px solid #e8edf2;
            box-shadow: 0 4px 15px rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            border-color: #1a5f4b;
            box-shadow: 0 12px 30px rgba(0,0,0,0.08);
        }

        .stat-card .stat-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, #eaf5ed, #d4e8db);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            transition: all 0.3s ease;
        }

        .stat-card:hover .stat-icon {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            transform: scale(1.05);
        }

        .stat-card:hover .stat-icon i {
            color: white;
        }

        .stat-card .stat-icon i {
            font-size: 24px;
            color: #1a5f4b;
            transition: all 0.3s ease;
        }

        .stat-card .stat-number {
            font-size: 1.8rem;
            font-weight: 800;
            color: #0f3b2c;
        }

        .stat-card .stat-label {
            font-size: 0.85rem;
            color: #64748b;
            margin-top: 2px;
        }

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

        /* ========== CONTENT CARD ========== */
        .content-card {
            background: white;
            border-radius: 24px;
            padding: 35px 40px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.04);
            border: 1px solid #e8edf2;
            transition: all 0.3s ease;
        }

        .content-card:hover {
            transform: translateY(-3px);
            border-color: #1a5f4b;
            box-shadow: 0 12px 30px rgba(0,0,0,0.08);
        }

        .content-card .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #f5c542;
        }

        .content-card .card-header .header-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #eaf5ed, #d4e8db);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #1a5f4b;
            flex-shrink: 0;
        }

        .content-card .card-header h2 {
            font-size: 1.3rem;
            font-weight: 700;
            color: #0f3b2c;
        }

        .content-card p {
            color: #475569;
            line-height: 1.8;
            font-size: 1rem;
            margin-bottom: 12px;
        }

        /* ========== FEATURE BOX ========== */
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
            margin: 15px 0;
        }

        .feature-box {
            background: #f8fafc;
            border-radius: 16px;
            padding: 25px;
            border: 1px solid #e8edf2;
            transition: all 0.3s ease;
        }

        .feature-box:hover {
            transform: translateY(-5px);
            border-color: #1a5f4b;
            background: white;
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
        }

        .feature-box .feature-icon {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .feature-box h4 {
            font-size: 1.05rem;
            font-weight: 700;
            color: #0f3b2c;
            margin-bottom: 8px;
        }

        .feature-box p {
            font-size: 0.9rem;
            color: #64748b;
            line-height: 1.6;
            margin-bottom: 0;
        }

        .feature-box .contoh {
            margin-top: 10px;
            font-size: 0.8rem;
            color: #1a5f4b;
            font-style: italic;
            background: #dcfce7;
            padding: 6px 14px;
            border-radius: 30px;
            display: inline-block;
        }

        /* ========== TABLE ========== */
        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .info-table tr {
            border-bottom: 1px solid #e8edf2;
        }

        .info-table tr:last-child {
            border-bottom: none;
        }

        .info-table th {
            background: #f1f5f9;
            padding: 14px 18px;
            text-align: left;
            font-weight: 600;
            color: #0f3b2c;
            width: 30%;
            font-size: 0.9rem;
        }

        .info-table td {
            padding: 14px 18px;
            color: #475569;
            font-size: 0.9rem;
        }

        /* ========== LIST STYLE ========== */
        .list-style {
            list-style: none;
            padding: 0;
        }

        .list-style li {
            padding: 10px 0;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-bottom: 1px solid #e8edf2;
        }

        .list-style li:last-child {
            border-bottom: none;
        }

        .list-style li i {
            color: #1a5f4b;
            margin-top: 2px;
            min-width: 20px;
        }

        .list-style li strong {
            color: #0f3b2c;
            min-width: 200px;
            font-weight: 600;
        }

        .list-style li span {
            color: #475569;
        }

        /* ========== ALUR ========== */
        .alur-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 15px 0;
        }

        .alur-item {
            text-align: center;
            padding: 25px 20px;
            background: #f8fafc;
            border-radius: 16px;
            border: 1px solid #e8edf2;
            transition: all 0.3s ease;
        }

        .alur-item:hover {
            transform: translateY(-5px);
            border-color: #1a5f4b;
            background: white;
            box-shadow: 0 8px 25px rgba(0,0,0,0.06);
        }

        .alur-number {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-weight: 700;
            font-size: 1.1rem;
        }

        .alur-item h4 {
            font-size: 1rem;
            font-weight: 700;
            color: #0f3b2c;
            margin-bottom: 6px;
        }

        .alur-item p {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.5;
        }

        /* ========== KONTAK ========== */
        .kontak-wrap {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            border-radius: 24px;
            padding: 40px 50px;
            text-align: center;
            color: white;
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }

        .kontak-wrap::before {
            content: '📞';
            position: absolute;
            right: -20px;
            bottom: -20px;
            font-size: 150px;
            opacity: 0.05;
        }

        .kontak-wrap h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .kontak-wrap h3 i {
            color: #f5c542;
        }

        .kontak-wrap p {
            opacity: 0.9;
            font-size: 1rem;
            margin-bottom: 5px;
        }

        .kontak-info {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin: 15px 0;
        }

        .kontak-info span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.1);
            padding: 8px 18px;
            border-radius: 30px;
            font-size: 0.85rem;
        }

        .kontak-info i {
            color: #f5c542;
        }

        .kontak-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #f5c542;
            color: #0f3b2c;
            padding: 12px 32px;
            border-radius: 40px;
            text-decoration: none;
            font-weight: 700;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            margin-top: 15px;
        }

        .kontak-btn:hover {
            background: white;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

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

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

        .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: 40px;
        }

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

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

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

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

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

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

        .footer-logo .logo-text p {
            font-size: 0.7rem;
            opacity: 0.7;
        }

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

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

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

        .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 {
            color: #f5c542;
            width: 20px;
        }

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

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

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

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

        .social-icon:hover {
            transform: translateY(-4px);
            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: 12px;
            color: #cbd5e1;
            font-size: 0.85rem;
        }

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

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.06);
            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.5);
            font-size: 0.75rem;
        }

        .footer-bottom a {
            color: #f5c542;
            text-decoration: none;
        }

        .visitor-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.06);
            padding: 5px 14px;
            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.04);
            color: #94a3b8;
            font-size: 0.75rem;
        }

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

        /* ============================================================ */
        /* ===== RESPONSIVE ===== */
        /* ============================================================ */

        @media (max-width: 1200px) {
            .main-container {
                padding: 0 30px 40px;
            }
            .stats-wrap {
                padding: 0 30px 25px;
            }
        }

        @media (max-width: 1024px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .grid-2 {
                grid-template-columns: 1fr;
            }
            .alur-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

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

            .header-premium {
                padding: 10px 20px;
                flex-wrap: wrap;
            }
            .logo-text h2 {
                font-size: 0.8rem;
            }
            .logo-icon {
                width: 40px;
                height: 40px;
            }
            .icon-btn {
                width: 36px;
                height: 36px;
                font-size: 1rem;
            }
            .header-actions {
                gap: 8px;
            }
            .icon-btn .tooltip {
                display: none;
            }

            .hero-page {
                margin: 15px;
                padding: 30px 20px;
                border-radius: 20px;
            }
            .hero-page h1 {
                font-size: 1.8rem;
            }
            .hero-page p {
                font-size: 0.95rem;
            }
            .hero-page .hero-badge {
                font-size: 0.65rem;
                padding: 4px 14px;
            }

            .breadcrumb-wrap {
                padding: 0 15px 18px;
            }
            .breadcrumb {
                font-size: 0.7rem;
            }

            .stats-wrap {
                padding: 0 15px 20px;
            }
            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 12px;
            }
            .stat-card {
                padding: 18px 15px;
            }
            .stat-card .stat-number {
                font-size: 1.4rem;
            }
            .stat-card .stat-icon {
                width: 50px;
                height: 50px;
            }

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

            .content-card {
                padding: 25px 20px;
            }
            .content-card .card-header h2 {
                font-size: 1.1rem;
            }
            .content-card .card-header .header-icon {
                width: 42px;
                height: 42px;
                font-size: 18px;
            }
            .content-card p {
                font-size: 0.9rem;
            }

            .grid-2 {
                gap: 15px;
            }

            .feature-box {
                padding: 20px;
            }
            .feature-box h4 {
                font-size: 0.95rem;
            }
            .feature-box p {
                font-size: 0.85rem;
            }

            .alur-grid {
                grid-template-columns: 1fr 1fr;
                gap: 15px;
            }
            .alur-item {
                padding: 18px 15px;
            }
            .alur-item h4 {
                font-size: 0.9rem;
            }
            .alur-item p {
                font-size: 0.8rem;
            }

            .info-table th,
            .info-table td {
                padding: 10px 14px;
                font-size: 0.85rem;
                display: block;
                width: 100%;
            }
            .info-table tr {
                display: block;
                margin-bottom: 12px;
                border: 1px solid #e8edf2;
                border-radius: 12px;
                overflow: hidden;
            }
            .info-table th {
                background: #f1f5f9;
            }

            .list-style li {
                flex-direction: column;
                gap: 4px;
                padding: 8px 0;
            }
            .list-style li strong {
                min-width: auto;
            }
            .list-style li span {
                padding-left: 28px;
            }

            .kontak-wrap {
                padding: 30px 20px;
            }
            .kontak-wrap h3 {
                font-size: 1.2rem;
            }
            .kontak-info {
                gap: 12px;
            }
            .kontak-info span {
                font-size: 0.75rem;
                padding: 6px 14px;
            }
            .kontak-btn {
                padding: 10px 24px;
                font-size: 0.85rem;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 25px;
                text-align: center;
            }
            .footer-col h3::after {
                left: 50%;
                transform: translateX(-50%);
            }
            .footer-logo {
                justify-content: center;
            }
            .footer-menu li a {
                justify-content: center;
            }
            .social-links {
                justify-content: center;
            }
            .footer-contact-item {
                justify-content: center;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }

        @media (max-width: 480px) {
            .header-premium {
                padding: 8px 15px;
            }
            .logo-text h2 {
                font-size: 0.7rem;
            }
            .logo-text p {
                font-size: 0.5rem;
            }
            .logo-icon {
                width: 35px;
                height: 35px;
            }
            .icon-btn {
                width: 32px;
                height: 32px;
                font-size: 0.8rem;
            }
            .header-actions {
                gap: 5px;
            }

            .hero-page h1 {
                font-size: 1.4rem;
            }
            .hero-page p {
                font-size: 0.85rem;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            .stat-card {
                padding: 14px 10px;
                border-radius: 14px;
            }
            .stat-card .stat-number {
                font-size: 1.2rem;
            }
            .stat-card .stat-label {
                font-size: 0.7rem;
            }
            .stat-card .stat-icon {
                width: 42px;
                height: 42px;
            }
            .stat-card .stat-icon i {
                font-size: 18px;
            }

            .content-card {
                padding: 18px 15px;
                border-radius: 16px;
            }
            .content-card .card-header {
                flex-direction: column;
                text-align: center;
                gap: 8px;
            }
            .content-card .card-header h2 {
                font-size: 1rem;
            }

            .alur-grid {
                grid-template-columns: 1fr;
            }

            .feature-box {
                padding: 16px;
            }

            .kontak-wrap {
                padding: 25px 15px;
            }
            .kontak-wrap h3 {
                font-size: 1rem;
            }
            .kontak-wrap p {
                font-size: 0.85rem;
            }
            .kontak-info {
                flex-direction: column;
                align-items: center;
            }

            .footer-premium {
                padding-top: 30px;
                margin-top: 30px;
            }
            .footer-grid {
                gap: 20px;
            }
            .visitor-badge {
                font-size: 0.6rem;
                padding: 3px 8px;
            }
        }

        @media (max-width: 360px) {
            .hero-page h1 {
                font-size: 1.2rem;
            }
            .hero-page p {
                font-size: 0.75rem;
            }

            .stats-grid {
                gap: 6px;
            }
            .stat-card {
                padding: 10px 6px;
                border-radius: 10px;
            }
            .stat-card .stat-number {
                font-size: 1rem;
            }
            .stat-card .stat-label {
                font-size: 0.6rem;
            }
            .stat-card .stat-icon {
                width: 36px;
                height: 36px;
            }
            .stat-card .stat-icon i {
                font-size: 14px;
            }

            .content-card {
                padding: 14px 12px;
            }
            .content-card .card-header h2 {
                font-size: 0.9rem;
            }
            .content-card p {
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>

<!-- ========== HEADER PREMIUM DENGAN ICON DAN TOOLTIP ========== -->
<div class="header-premium" id="mainHeader">
    <div class="logo-area">
        <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">
            <h2>DINAS KEARSIPAN<br>KABUPATEN SOLOK SELATAN</h2>
            <p>Dinas Perpustakaan dan Arsip Daerah</p>
        </div>
    </div>
    
    <div class="header-actions">
        <!-- Icon Home dengan Tooltip -->
        <a href="dashboard.php" class="icon-btn">
            <i class="fas fa-home"></i>
            <span class="tooltip">Halaman Utama</span>
        </a>
        
        <!-- Icon Arsip dengan Tooltip -->
        <a href="layanan_arsip.php" class="icon-btn">
            <i class="fas fa-archive"></i>
            <span class="tooltip">Layanan Arsip</span>
        </a>
        
        <!-- Icon Kembali dengan Tooltip -->
        <a href="javascript:history.back()" class="icon-btn">
            <i class="fas fa-arrow-left"></i>
            <span class="tooltip">Kembali</span>
        </a>
    </div>
</div>

<!-- ========== HERO ========== -->
<div class="hero-page" data-aos="fade-up">
    <div class="hero-badge">
        <i class="fas fa-star"></i> Layanan Arsip Solok Selatan
    </div>
    <h1>Layanan <span>Akses Arsip</span></h1>
    <p>Memberikan kemudahan akses informasi arsip bagi masyarakat, peneliti, akademisi, dan instansi untuk kepentingan ilmiah, sejarah, dan administrasi</p>
</div>

<!-- ========== BREADCRUMB ========== -->
<div class="breadcrumb-wrap">
    <div class="breadcrumb">
        <a href="dashboard.php"><i class="fas fa-home"></i></a>
        <span class="sep">/</span>
        <a href="layanan.php">Layanan</a>
        <span class="sep">/</span>
        <span class="active">Akses Arsip</span>
    </div>
</div>

<!-- ========== MAIN CONTENT ========== -->
<div class="main-container">

    <!-- 1. PENGERTIAN -->
    <div class="content-card" data-aos="fade-up">
        <div class="card-header">
            <div class="header-icon"><i class="fas fa-info-circle"></i></div>
            <h2>Apa itu Layanan Akses Arsip?</h2>
        </div>
        <p><strong>Layanan Akses Arsip</strong> adalah layanan yang diberikan oleh Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan untuk memberikan kemudahan kepada masyarakat, peneliti, akademisi, dan instansi dalam mengakses informasi yang terkandung dalam arsip yang dikelola.</p>
        <p>Layanan ini bertujuan untuk mendukung kepentingan ilmiah, penelitian sejarah, pertanggungjawaban administrasi, serta meningkatkan transparansi dan akuntabilitas publik melalui penyediaan akses informasi arsip yang mudah, cepat, dan terpercaya.</p>
    </div>

    <!-- 2. TUJUAN LAYANAN -->
    <div class="content-card" data-aos="fade-up">
        <div class="card-header">
            <div class="header-icon"><i class="fas fa-bullseye"></i></div>
            <h2>Tujuan Layanan Akses Arsip</h2>
        </div>
        <div class="grid-2">
            <div class="feature-box">
                <div class="feature-icon">📚</div>
                <h4>Mendukung Penelitian</h4>
                <p>Menyediakan akses arsip bagi peneliti dan akademisi untuk kepentingan riset dan pengembangan ilmu pengetahuan.</p>
                <span class="contoh">Contoh: Penelitian sejarah, tesis, disertasi</span>
            </div>
            <div class="feature-box">
                <div class="feature-icon">📜</div>
                <h4>Pelestarian Sejarah</h4>
                <p>Memudahkan akses terhadap dokumen-dokumen bersejarah untuk kepentingan dokumentasi dan pelestarian memori kolektif.</p>
                <span class="contoh">Contoh: Dokumen perjuangan, peristiwa penting</span>
            </div>
            <div class="feature-box">
                <div class="feature-icon">🏛️</div>
                <h4>Administrasi Pemerintahan</h4>
                <p>Mendukung kelancaran administrasi pemerintahan melalui akses cepat terhadap arsip-arsip penting.</p>
                <span class="contoh">Contoh: Arsip kebijakan, peraturan daerah</span>
            </div>
            <div class="feature-box">
                <div class="feature-icon">🔍</div>
                <h4>Transparansi Publik</h4>
                <p>Mewujudkan keterbukaan informasi publik melalui penyediaan akses arsip yang mudah dan terbuka.</p>
                <span class="contoh">Contoh: Informasi layanan publik, anggaran</span>
            </div>
        </div>
    </div>

    <!-- 3. JENIS AKSES -->
    <div class="content-card" data-aos="fade-up">
        <div class="card-header">
            <div class="header-icon"><i class="fas fa-list-ul"></i></div>
            <h2>Jenis Akses Arsip</h2>
        </div>
        <div class="grid-2">
            <div class="feature-box">
                <div class="feature-icon">🖥️</div>
                <h4>Akses Online</h4>
                <p>Mengakses arsip melalui portal digital yang dapat diakses kapan saja dan di mana saja melalui internet.</p>
                <span class="contoh">Melalui website, aplikasi, atau database online</span>
            </div>
            <div class="feature-box">
                <div class="feature-icon">📁</div>
                <h4>Akses Offline</h4>
                <p>Mengakses arsip secara langsung di ruang baca atau ruang penelitian yang disediakan oleh DPAD.</p>
                <span class="contoh">Kunjungan langsung ke kantor DPAD Solok Selatan</span>
            </div>
        </div>
    </div>

    <!-- 4. LAYANAN YANG DIBERIKAN -->
    <div class="content-card" data-aos="fade-up">
        <div class="card-header">
            <div class="header-icon"><i class="fas fa-hand-holding-heart"></i></div>
            <h2>Layanan yang Diberikan</h2>
        </div>
        <table class="info-table">
            <tr>
                <th>Jenis Layanan</th>
                <td>Pelayanan akses dan peminjaman arsip untuk penelitian</td>
            </tr>
            <tr>
                <th>Jenis Arsip</th>
                <td>Arsip dinamis, arsip statis, arsip digital, dan dokumen sejarah</td>
            </tr>
            <tr>
                <th>Waktu Layanan</th>
                <td>Senin - Jumat, 08.00 - 16.00 WIB</td>
            </tr>
            <tr>
                <th>Persyaratan</th>
                <td>Surat permohonan, KTP/SIM, dan mengisi formulir penelitian</td>
            </tr>
            <tr>
                <th>Biaya</th>
                <td><strong style="color:#1a5f4b;">GRATIS</strong> (tidak dipungut biaya)</td>
            </tr>
            <tr>
                <th>Durasi Akses</th>
                <td>Sesuai kebutuhan penelitian (maksimal 7 hari kerja)</td>
            </tr>
        </table>
    </div>

    <!-- 5. PERSYARATAN -->
    <div class="content-card" data-aos="fade-up">
        <div class="card-header">
            <div class="header-icon"><i class="fas fa-clipboard-list"></i></div>
            <h2>Persyaratan Akses Arsip</h2>
        </div>
        <ul class="list-style">
            <li><i class="fas fa-check-circle"></i> <strong>Surat Permohonan</strong> <span>- Surat resmi dari instansi/lembaga atau perorangan yang ditujukan kepada Kepala DPAD</span></li>
            <li><i class="fas fa-check-circle"></i> <strong>Identitas Diri</strong> <span>- Fotokopi KTP/SIM yang masih berlaku</span></li>
            <li><i class="fas fa-check-circle"></i> <strong>Surat Tugas</strong> <span>- Surat tugas dari instansi/lembaga (jika ada)</span></li>
            <li><i class="fas fa-check-circle"></i> <strong>Formulir Penelitian</strong> <span>- Mengisi formulir permohonan akses arsip yang disediakan</span></li>
            <li><i class="fas fa-check-circle"></i> <strong>Proposal Penelitian</strong> <span>- Proposal/rencana penelitian (untuk penelitian akademis)</span></li>
        </ul>
    </div>

    <!-- 6. MEKANISME AKSES -->
    <div class="content-card" data-aos="fade-up">
        <div class="card-header">
            <div class="header-icon"><i class="fas fa-step-forward"></i></div>
            <h2>Mekanisme Akses Arsip</h2>
        </div>
        <div class="alur-grid">
            <div class="alur-item">
                <div class="alur-number">1</div>
                <h4>Pengajuan</h4>
                <p>Mengajukan permohonan akses arsip secara tertulis</p>
            </div>
            <div class="alur-item">
                <div class="alur-number">2</div>
                <h4>Verifikasi</h4>
                <p>Petugas melakukan verifikasi kelengkapan persyaratan</p>
            </div>
            <div class="alur-item">
                <div class="alur-number">3</div>
                <h4>Pencarian</h4>
                <p>Petugas melakukan pencarian arsip yang diminta</p>
            </div>
            <div class="alur-item">
                <div class="alur-number">4</div>
                <h4>Penyediaan</h4>
                <p>Arsip disediakan untuk diakses di ruang baca penelitian</p>
            </div>
            <div class="alur-item">
                <div class="alur-number">5</div>
                <h4>Pemanfaatan</h4>
                <p>Pemohon dapat membaca, mencatat, atau memfoto arsip</p>
            </div>
            <div class="alur-item">
                <div class="alur-number">6</div>
                <h4>Pengembalian</h4>
                <p>Arsip dikembalikan kepada petugas setelah selesai</p>
            </div>
        </div>
    </div>

    <!-- 7. DASAR HUKUM -->
    <div class="content-card" data-aos="fade-up">
        <div class="card-header">
            <div class="header-icon"><i class="fas fa-gavel"></i></div>
            <h2>Dasar Hukum</h2>
        </div>
        <ul class="list-style">
            <li><i class="fas fa-check-circle"></i> <strong>UU No. 43 Tahun 2009</strong> <span>- Tentang Kearsipan</span></li>
            <li><i class="fas fa-check-circle"></i> <strong>PP No. 28 Tahun 2012</strong> <span>- Tentang Pelaksanaan UU Kearsipan</span></li>
            <li><i class="fas fa-check-circle"></i> <strong>Peraturan Kepala ANRI No. 1 Tahun 2010</strong> <span>- Tentang Pedoman Pengelolaan Arsip Statis</span></li>
            <li><i class="fas fa-check-circle"></i> <strong>Peraturan Daerah Solok Selatan</strong> <span>- Tentang Pengelolaan Arsip Daerah</span></li>
            <li><i class="fas fa-check-circle"></i> <strong>UU No. 14 Tahun 2008</strong> <span>- Tentang Keterbukaan Informasi Publik</span></li>
        </ul>
    </div>
</div>

<!-- ========== FOOTER ========== -->
<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" style="width:35px; height:35px; object-fit:contain;">
                        <?php else: ?>
                            <i class="fas fa-archive"></i>
                        <?php endif; ?>
                    </div>
                    <div class="logo-text">
                        <h3>Dinas Kearsipan 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" target="_blank"><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" target="_blank"><i class="fab fa-youtube"></i></a>
                    <a href="https://www.tiktok.com/@solselnews" class="social-icon social-tt" target="_blank"><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</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:4px; font-size:0.65rem; opacity:0.5;">All Rights Reserved</p>
            </div>
            <div>
                <p style="font-size:0.7rem; color:#94a3b8;">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 class="dev-credit" style="margin-top:8px;">
                    Developed by <a href="https://www.pnp.ac.id/download/psdku-solok-selatan/" target="_blank">PSDKU Solok Selatan</a>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- ========== SCRIPTS ========== -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 600,
        once: true,
        offset: 30,
        easing: 'ease-in-out'
    });

    // Header Sticky
    const header = document.getElementById('mainHeader');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });
</script>
</body>
</html>