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

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

// Buat tabel visitor_counter jika belum ada
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 apakah IP sudah tercatat hari ini
$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 {
    // Update last_visit jika sudah ada
    mysqli_query($koneksi, "
        UPDATE visitor_counter 
        SET last_visit = NOW() 
        WHERE ip_address = '$ip' AND tanggal = '$tanggal'
    ");
}

// Hitung total pengunjung unik (semua waktu)
$totalVisitor = 0;
$query_total_visitor = mysqli_query($koneksi, "SELECT COUNT(DISTINCT ip_address) as total FROM visitor_counter");
if($query_total_visitor && mysqli_num_rows($query_total_visitor) > 0){
    $row = mysqli_fetch_assoc($query_total_visitor);
    $totalVisitor = $row['total'];
}

// Hitung pengunjung hari ini
$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'];
}

// Hitung pengunjung online (15 menit terakhir)
$batas_online = date('Y-m-d H:i:s', strtotime('-15 minutes'));
$online = 0;
$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'];
}

// ========== QUERY ARSIP DINAMIS ==========
$query_total = mysqli_query($koneksi, "SELECT COUNT(*) as total FROM arsip_dinamis");
$totalArsip = 0;

// Cek apakah query berhasil
if($query_total && mysqli_num_rows($query_total) > 0){
    $row = mysqli_fetch_assoc($query_total);
    $totalArsip = $row['total'];
} else {
    // Jika tabel belum ada, buat tabel terlebih dahulu
    mysqli_query($koneksi, "
        CREATE TABLE IF NOT EXISTS arsip_dinamis (
            id INT AUTO_INCREMENT PRIMARY KEY,
            judul VARCHAR(200),
            nomor VARCHAR(100),
            tahun YEAR,
            created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        )
    ");
}
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Digitalisasi Arsip & SIMPAN | DPAD Solok Selatan</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&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: #f5f7fb;
            color: #1e293b;
        }
        
        /* Header Premium dengan Icon */
        .header {
            background: linear-gradient(135deg, #0a3d32, #1a5f4b);
            padding: 15px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .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 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 Section */
        .hero {
            background: linear-gradient(135deg, #1a5f4b 0%, #0f3b2c 100%);
            padding: 60px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            font-weight: 800;
            color: white;
            margin-bottom: 15px;
        }
        
        .hero p {
            max-width: 700px;
            margin: 0 auto;
            font-size: 1rem;
            color: rgba(255,255,255,0.9);
            line-height: 1.6;
        }
        
        /* Container */
        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 60px 20px;
        }
        
        /* Card Style */
        .card {
            background: white;
            border-radius: 24px;
            padding: 35px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .card h2 {
            font-size: 1.5rem;
            color: #0f3b2c;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #f5c542;
            display: inline-block;
        }
        
        .card h3 {
            font-size: 1.2rem;
            color: #1a5f4b;
            margin: 20px 0 12px;
        }
        
        .card p {
            color: #475569;
            line-height: 1.7;
            margin-bottom: 15px;
        }
        
        /* Grid untuk 2 kolom */
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            margin: 30px 0;
        }
        
        /* Feature Box */
        .feature-box {
            background: #f8fafc;
            border-radius: 16px;
            padding: 25px;
            transition: 0.3s;
            border: 1px solid #e2e8f0;
        }
        
        .feature-box:hover {
            transform: translateY(-5px);
            border-color: #f5c542;
            background: white;
        }
        
        .feature-box h4 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: #0f3b2c;
        }
        
        .feature-box p {
            font-size: 0.9rem;
            color: #64748b;
            line-height: 1.6;
        }
        
        .feature-box ul {
            list-style: none;
            padding-left: 0;
            margin-top: 10px;
        }
        
        .feature-box ul li {
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            gap: 8px;
            align-items: center;
            color: #475569;
            font-size: 0.9rem;
        }
        
        .feature-box ul li:last-child {
            border-bottom: none;
        }
        
        .feature-box ul li i {
            color: #1a5f4b;
            font-size: 1rem;
        }
        
        .feature-box .contoh {
            margin-top: 10px;
            font-size: 0.8rem;
            color: #1a5f4b;
            font-style: italic;
        }
        
        /* List Style */
        .list-style {
            list-style: none;
            padding-left: 0;
        }
        
        .list-style li {
            padding: 10px 0;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .list-style li strong {
            color: #0f3b2c;
            min-width: 180px;
        }
        
        .list-style li span {
            color: #475569;
        }
        
        /* Step Container */
        .step-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin: 20px 0;
        }
        
        .step-box {
            text-align: center;
            padding: 20px;
            background: #f8fafc;
            border-radius: 16px;
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            background: #1a5f4b;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        .step-box h4 {
            margin-bottom: 8px;
            color: #0f3b2c;
        }
        
        .step-box p {
            font-size: 0.85rem;
            color: #64748b;
        }
        
        /* Tabel Informasi */
        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .info-table tr {
            border-bottom: 1px solid #e2e8f0;
        }
        
        .info-table th {
            background: #f1f5f9;
            padding: 14px 18px;
            text-align: left;
            font-weight: 600;
            color: #0f3b2c;
            width: 30%;
        }
        
        .info-table td {
            padding: 14px 18px;
            color: #475569;
        }
        
        /* SIMPAN Platform Box */
        .simpan-box {
            background: linear-gradient(135deg, #f8fafc, #edf2f7);
            border-radius: 16px;
            padding: 20px 25px;
            margin: 15px 0;
            border-left: 4px solid #f5c542;
        }
        
        .simpan-box h4 {
            color: #0f3b2c;
            margin-bottom: 8px;
            font-size: 1.1rem;
        }
        
        .simpan-box ul {
            list-style: none;
            padding-left: 0;
        }
        
        .simpan-box ul li {
            padding: 6px 0;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #475569;
            font-size: 0.9rem;
        }
        
        .simpan-box ul li i {
            color: #f5c542;
            font-size: 0.5rem;
        }
        
        /* ============================================================ */
        /* ===== AKSES SIMPAN - TAMPILAN DIPERBAIKI ===== */
        /* ============================================================ */
        
        /* Hero SIMPAN */
        .simpan-hero {
            background: linear-gradient(135deg, #0a3d32, #1a5f4b);
            border-radius: 24px;
            padding: 50px 50px;
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            color: white;
            box-shadow: 0 15px 40px rgba(26, 95, 75, 0.25);
        }
        
        .simpan-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 500px;
            height: 500px;
            background: rgba(245, 197, 66, 0.05);
            border-radius: 50%;
        }
        
        .simpan-hero::after {
            content: '📂';
            position: absolute;
            right: 50px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 120px;
            opacity: 0.06;
        }
        
        .simpan-hero .badge-simpan {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(245, 197, 66, 0.2);
            padding: 6px 20px;
            border-radius: 50px;
            font-size: 0.8rem;
            color: #f5c542;
            margin-bottom: 15px;
            border: 1px solid rgba(245, 197, 66, 0.15);
        }
        
        .simpan-hero h2 {
            font-size: 2rem;
            font-weight: 800;
            color: white;
            margin-bottom: 12px;
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .simpan-hero h2 i {
            color: #f5c542;
            margin-right: 10px;
        }
        
        .simpan-hero p {
            color: rgba(255,255,255,0.85);
            font-size: 1.05rem;
            max-width: 600px;
            line-height: 1.7;
        }
        
        .simpan-hero .btn-simpan-hero {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-top: 20px;
            padding: 14px 35px;
            background: #f5c542;
            color: #0a3d32;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(245, 197, 66, 0.3);
        }
        
        .simpan-hero .btn-simpan-hero:hover {
            transform: translateY(-3px);
            gap: 18px;
            box-shadow: 0 8px 30px rgba(245, 197, 66, 0.5);
        }
        
        /* Card Akses SIMPAN */
        .akses-simpan-card {
            background: white;
            border-radius: 24px;
            padding: 35px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            border: 1px solid #e8edf2;
            transition: 0.3s;
        }
        
        .akses-simpan-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        }
        
        .akses-simpan-card .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f4f8;
        }
        
        .akses-simpan-card .card-header .icon-box {
            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;
        }
        
        .akses-simpan-card .card-header h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: #0f3b2c;
            margin: 0;
        }
        
        .akses-simpan-card .card-header p {
            color: #64748b;
            font-size: 0.85rem;
            margin: 0;
        }
        
        /* Info Grid Akses */
        .info-grid-akses {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .info-item-akses {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 18px;
            background: #f8fafc;
            border-radius: 14px;
            border: 1px solid #e8edf2;
            transition: 0.3s;
        }
        
        .info-item-akses:hover {
            background: white;
            border-color: #1a5f4b;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.06);
        }
        
        .info-item-akses .info-icon {
            width: 40px;
            height: 40px;
            background: #eaf5ed;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1a5f4b;
            font-size: 16px;
            flex-shrink: 0;
        }
        
        .info-item-akses .info-text strong {
            display: block;
            font-size: 0.75rem;
            color: #94a3b8;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .info-item-akses .info-text span {
            font-size: 0.95rem;
            font-weight: 600;
            color: #0f3b2c;
        }
        
        /* Steps Akses */
        .steps-akses {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 25px 0;
        }
        
        .step-akses-item {
            text-align: center;
            padding: 20px 15px;
            background: #f8fafc;
            border-radius: 16px;
            border: 1px solid #e8edf2;
            transition: 0.3s;
            position: relative;
        }
        
        .step-akses-item:hover {
            transform: translateY(-4px);
            background: white;
            border-color: #f5c542;
            box-shadow: 0 8px 20px rgba(0,0,0,0.06);
        }
        
        .step-akses-item .step-num {
            width: 36px;
            height: 36px;
            background: #1a5f4b;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-weight: 700;
            font-size: 0.9rem;
        }
        
        .step-akses-item h4 {
            font-size: 0.95rem;
            font-weight: 700;
            color: #0f3b2c;
            margin-bottom: 5px;
        }
        
        .step-akses-item p {
            font-size: 0.8rem;
            color: #64748b;
            line-height: 1.5;
        }
        
        .step-akses-item .step-icon {
            font-size: 28px;
            color: #f5c542;
            margin-bottom: 10px;
            display: block;
        }
        
        /* Arrow connector */
        .step-akses-item .arrow-connector {
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            color: #cbd5e1;
            font-size: 1.2rem;
        }
        
        /* CTA Akses SIMPAN */
        .cta-akses {
            background: linear-gradient(135deg, #0a3d32, #1a5f4b);
            border-radius: 20px;
            padding: 35px 40px;
            text-align: center;
            color: white;
            margin-top: 25px;
            box-shadow: 0 10px 30px rgba(26, 95, 75, 0.2);
        }
        
        .cta-akses h4 {
            font-size: 1.3rem;
            font-weight: 700;
            color: #f5c542;
            margin-bottom: 10px;
        }
        
        .cta-akses p {
            color: rgba(255,255,255,0.85);
            font-size: 0.95rem;
            margin-bottom: 20px;
        }
        
        .cta-akses .btn-akses {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 14px 35px;
            background: #f5c542;
            color: #0a3d32;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 20px rgba(245, 197, 66, 0.3);
        }
        
        .cta-akses .btn-akses:hover {
            transform: translateY(-3px);
            gap: 18px;
            box-shadow: 0 8px 30px rgba(245, 197, 66, 0.5);
        }
        
        .cta-akses .note-akses {
            margin-top: 15px;
            font-size: 0.75rem;
            opacity: 0.7;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .cta-akses .note-akses i {
            margin-right: 5px;
        }
        
        /* ============================================================ */
        /* ===== FOOTER PREMIUM ===== */
        /* ============================================================ */
        
        .footer {
            background: linear-gradient(135deg, #0a3d32, #0f3b2c);
            color: #ffffff;
            position: relative;
            overflow: hidden;
            padding: 60px 20px 30px;
            margin-top: 60px;
        }
        
        .footer::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;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 35px;
            margin-bottom: 50px;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .footer-logo-icon {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, rgba(245, 197, 66, 0.2), rgba(245, 197, 66, 0.05));
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: 2px solid rgba(245, 197, 66, 0.3);
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(245, 197, 66, 0.1);
        }
        
        .footer-logo-icon:hover {
            transform: scale(1.05) rotate(-3deg);
            border-color: #f5c542;
            box-shadow: 0 8px 25px rgba(245, 197, 66, 0.25);
        }
        
        .footer-logo-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 8px;
            border-radius: 12px;
        }
        
        .footer-logo-icon i {
            font-size: 28px;
            color: #f5c542;
            text-shadow: 0 0 20px rgba(245, 197, 66, 0.3);
        }
        
        .footer-logo-text {
            display: flex;
            flex-direction: column;
        }
        
        .footer-logo-text h2 {
            color: white;
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.5px;
        }
        
        .footer-logo-text h2:first-child {
            color: #f5c542;
        }
        
        .footer-logo-text p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.7rem;
            margin-top: 3px;
            letter-spacing: 0.3px;
        }
        
        .footer-description {
            color: #cbd5e1;
            line-height: 1.7;
            margin-bottom: 20px;
            font-size: 0.85rem;
        }
        
        .footer-social {
            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;
            text-decoration: none;
            font-size: 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .social-fb { background: #1877f2; }
        .social-ig { background: linear-gradient(45deg, #f09433, #d62976, #962fbf); }
        .social-yt { background: #ff0000; }
        .social-tt { background: #010101; }
        
        .social-icon:hover {
            transform: translateY(-4px) scale(1.05);
            filter: brightness(1.15);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            border-color: rgba(255, 255, 255, 0.3);
        }
        
        .footer-col h3 {
            color: #f5c542;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
            padding-bottom: 10px;
        }
        
        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background: #f5c542;
            border-radius: 2px;
        }
        
        .footer-col h3 i {
            margin-right: 8px;
        }
        
        .footer-menu {
            list-style: none;
            padding: 0;
        }
        
        .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);
        }
        
        .footer-contact-item {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
            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.1);
            padding-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .footer-copyright p {
            font-size: 0.75rem;
            color: #94a3b8;
            margin-bottom: 5px;
        }
        
        .footer-copyright a {
            color: #94a3b8;
            text-decoration: none;
            transition: 0.3s;
        }
        
        .footer-copyright a:hover {
            color: #f5c542;
        }
        
        .footer-credit {
            text-align: right;
        }
        
        .footer-credit p {
            font-size: 0.7rem;
            color: #64748b;
            margin-bottom: 5px;
        }
        
        .visitor-stats {
            display: flex;
            gap: 15px;
            justify-content: flex-end;
            margin-top: 8px;
            flex-wrap: wrap;
        }
        
        .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;
        }
        
        .footer-dev {
            text-align: center;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 0.7rem;
            color: #64748b;
        }
        
        .footer-dev a {
            color: #f5c542;
            text-decoration: none;
        }
        
        /* ============================================================ */
        /* ===== RESPONSIVE ===== */
        /* ============================================================ */
        
        @media (max-width: 1200px) {
            .container {
                padding: 50px 20px;
            }
            .simpan-hero {
                padding: 40px 30px;
            }
        }
        
        @media (max-width: 992px) {
            .step-container {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 35px;
            }
            .hero h1 {
                font-size: 2rem;
            }
            .simpan-hero h2 {
                font-size: 1.6rem;
            }
            .simpan-hero::after {
                font-size: 80px;
                right: 20px;
            }
            .steps-akses {
                grid-template-columns: repeat(2, 1fr);
            }
            .step-akses-item .arrow-connector {
                display: none;
            }
        }
        
        @media (max-width: 768px) {
            .header {
                padding: 12px 20px;
                flex-wrap: wrap;
            }
            .logo-text h2 {
                font-size: 0.8rem;
            }
            .logo-icon {
                width: 40px;
                height: 40px;
            }
            .icon-btn {
                width: 38px;
                height: 38px;
                font-size: 1rem;
            }
            .hero {
                padding: 40px 20px;
            }
            .hero h1 {
                font-size: 1.6rem;
            }
            .hero p {
                font-size: 0.9rem;
            }
            .grid-2 {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .step-container {
                grid-template-columns: 1fr;
            }
            .card {
                padding: 25px;
            }
            .card h2 {
                font-size: 1.3rem;
            }
            
            .simpan-hero {
                padding: 30px 20px;
                text-align: center;
            }
            .simpan-hero::after {
                display: none;
            }
            .simpan-hero h2 {
                font-size: 1.4rem;
            }
            .simpan-hero p {
                font-size: 0.9rem;
            }
            .simpan-hero .btn-simpan-hero {
                padding: 12px 25px;
                font-size: 0.9rem;
            }
            
            .akses-simpan-card {
                padding: 25px;
            }
            .akses-simpan-card .card-header {
                flex-direction: column;
                text-align: center;
            }
            
            .info-grid-akses {
                grid-template-columns: 1fr;
            }
            .steps-akses {
                grid-template-columns: 1fr;
            }
            .step-akses-item .arrow-connector {
                display: none;
            }
            
            .cta-akses {
                padding: 25px 20px;
            }
            .cta-akses h4 {
                font-size: 1.1rem;
            }
            .cta-akses .btn-akses {
                padding: 12px 25px;
                font-size: 0.9rem;
            }
            
            .info-table th, .info-table td {
                padding: 10px 12px;
                font-size: 0.85rem;
                display: block;
                width: 100%;
            }
            .info-table tr {
                display: block;
                margin-bottom: 15px;
                border: 1px solid #e2e8f0;
            }
            .list-style li {
                flex-direction: column;
                gap: 5px;
            }
            .list-style li strong {
                min-width: auto;
            }
            
            .footer {
                padding: 45px 20px 25px;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 35px;
                text-align: center;
            }
            .footer-logo {
                justify-content: center;
            }
            .footer-logo-text {
                text-align: left;
            }
            .footer-logo-text h2 {
                font-size: 0.95rem;
            }
            .footer-logo-icon {
                width: 48px;
                height: 48px;
            }
            .footer-logo-icon i {
                font-size: 24px;
            }
            .footer-col h3::after {
                left: 50%;
                transform: translateX(-50%);
            }
            .footer-menu li a {
                justify-content: center;
            }
            .footer-social {
                justify-content: center;
            }
            .footer-contact-item {
                justify-content: center;
            }
            .footer-description {
                text-align: center;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
            .footer-credit {
                text-align: center;
            }
            .visitor-stats {
                justify-content: center;
            }
        }
        
        @media (max-width: 480px) {
            .header-actions {
                gap: 8px;
            }
            .icon-btn {
                width: 35px;
                height: 35px;
                font-size: 0.9rem;
            }
            .hero h1 {
                font-size: 1.4rem;
            }
            .card {
                padding: 20px;
            }
            .simpan-hero {
                padding: 25px 15px;
            }
            .simpan-hero h2 {
                font-size: 1.2rem;
            }
            .simpan-hero p {
                font-size: 0.85rem;
            }
            .simpan-hero .btn-simpan-hero {
                padding: 10px 20px;
                font-size: 0.85rem;
            }
            .akses-simpan-card {
                padding: 20px;
            }
            .akses-simpan-card .card-header h3 {
                font-size: 1.1rem;
            }
            .cta-akses {
                padding: 20px 15px;
            }
            .cta-akses h4 {
                font-size: 1rem;
            }
            .cta-akses .btn-akses {
                padding: 10px 20px;
                font-size: 0.85rem;
            }
            .cta-akses .note-akses {
                font-size: 0.65rem;
                gap: 10px;
            }
            
            .footer-logo-icon {
                width: 42px;
                height: 42px;
            }
            .footer-logo-icon i {
                font-size: 20px;
            }
            .footer-contact-item {
                font-size: 0.75rem;
            }
            .visitor-badge {
                font-size: 0.65rem;
            }
            .footer-logo-text h2 {
                font-size: 0.85rem;
            }
            .footer-logo-text p {
                font-size: 0.6rem;
            }
        }
    </style>
</head>
<body>

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

<!-- HERO SECTION -->
<section class="hero">
    <div class="hero-content" data-aos="fade-up">
        <h1>Digitalisasi Arsip</h1>
        <p>Transformasi pengelolaan arsip menuju era digital dengan Sistem Informasi Pengelolaan Arsip</p>
    </div>
</section>

<div class="container">
    
    <!-- PENGERTIAN DIGITALISASI ARSIP -->
    <div class="card" data-aos="fade-up">
        <h2>Apa itu Digitalisasi Arsip?</h2>
        <p><strong>Digitalisasi arsip</strong> adalah proses transformasi arsip fisik (kertas, foto, mikrofilm) menjadi format digital (file elektronik) melalui proses pemindaian (scanning) atau konversi digital lainnya. Tujuan utama digitalisasi adalah menciptakan salinan digital yang dapat disimpan, diakses, dan dikelola secara elektronik, sehingga arsip fisik asli dapat dilestarikan dan risiko kerusakan akibat penggunaan berulang dapat diminimalisir.</p>
        <p>Digitalisasi arsip merupakan bagian penting dari <strong>transformasi digital</strong> di bidang kearsipan yang mendukung terciptanya <strong>smart governance</strong> dan <strong>e-government</strong> di lingkungan pemerintahan.</p>
        
        <!-- Tujuan dan Manfaat Digitalisasi -->
        <h3 style="margin-top: 25px; color: #0f3b2c;">Tujuan Digitalisasi Arsip</h3>
        <div class="grid-2" style="margin-top: 10px;">
            <div class="feature-box">
                <h4><i class="fas fa-bullseye" style="color: #f5c542; margin-right: 8px;"></i> Tujuan Utama</h4>
                <ul>
                    <li><i class="fas fa-check-circle"></i> Melestarikan arsip bernilai sejarah dan informasi penting</li>
                    <li><i class="fas fa-check-circle"></i> Mempermudah dan mempercepat akses informasi</li>
                    <li><i class="fas fa-check-circle"></i> Mendukung terciptanya tata kelola pemerintahan yang baik</li>
                    <li><i class="fas fa-check-circle"></i> Mewujudkan arsip yang handal, akurat, dan terpercaya</li>
                </ul>
            </div>
            <div class="feature-box">
                <h4><i class="fas fa-gem" style="color: #f5c542; margin-right: 8px;"></i> Manfaat Digitalisasi</h4>
                <ul>
                    <li><i class="fas fa-check-circle"></i> Mengurangi risiko kerusakan fisik dan kehilangan arsip</li>
                    <li><i class="fas fa-check-circle"></i> Menghemat ruang penyimpanan fisik yang terbatas</li>
                    <li><i class="fas fa-check-circle"></i> Mendukung sistem pencarian dan temu kembali data yang efektif</li>
                    <li><i class="fas fa-check-circle"></i> Memudahkan proses berbagi informasi antar instansi</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- LANDASAN HUKUM DIGITALISASI -->
    <div class="card" data-aos="fade-up">
        <h2>Landasan Hukum Digitalisasi Arsip</h2>
        <div class="grid-2">
            <div>
                <ul class="list-style">
                    <li><strong>UU No. 43 Tahun 2009</strong><span>Tentang Kearsipan</span></li>
                    <li><strong>PP No. 28 Tahun 2012</strong><span>Tentang Pelaksanaan UU Kearsipan</span></li>
                    <li><strong>Perka ANRI No. 3 Tahun 2015</strong><span>Tentang Pedoman Digitalisasi Arsip Statis</span></li>
                </ul>
            </div>
            <div>
                <ul class="list-style">
                    <li><strong>Perka ANRI No. 5 Tahun 2015</strong><span>Tentang Sistem Klasifikasi Keamanan dan Akses Arsip</span></li>
                    <li><strong>Perda Solok Selatan</strong><span>Tentang Pengelolaan Arsip Daerah</span></li>
                    <li><strong>Inpres No. 3 Tahun 2003</strong><span>Tentang Kebijakan dan Strategi Pengembangan E-Government</span></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- PROSES DIGITALISASI ARSIP -->
    <div class="card" data-aos="fade-up">
        <h2>Tahapan Digitalisasi Arsip</h2>
        <div class="step-container">
            <div class="step-box">
                <div class="step-number">1</div>
                <h4>Seleksi & Persiapan</h4>
                <p>Memilih arsip yang akan didigitalisasi dan menyiapkan dokumen fisik</p>
            </div>
            <div class="step-box">
                <div class="step-number">2</div>
                <h4>Pemindaian (Scanning)</h4>
                <p>Proses scan arsip fisik menjadi file digital dengan scanner berkualitas</p>
            </div>
            <div class="step-box">
                <div class="step-number">3</div>
                <h4>Pengolahan Digital</h4>
                <p>Pengeditan, perbaikan kualitas, dan konversi format file</p>
            </div>
            <div class="step-box">
                <div class="step-number">4</div>
                <h4>Penyimpanan & Akses</h4>
                <p>Upload ke sistem dan penyediaan akses bagi pengguna</p>
            </div>
        </div>
    </div>

    <!-- SISTEM INFORMASI PENGELOLAAN ARSIP (SIMPAN) -->
    <div class="card" data-aos="fade-up">
        <h2>Sistem Informasi Pengelolaan Arsip (SIMPAN)</h2>
        <p><strong>SIMPAN (Sistem Informasi Pengelolaan Arsip)</strong> adalah platform digital yang dikembangkan oleh Pemerintah Kabupaten Solok Selatan untuk mengelola arsip secara terintegrasi. Aplikasi ini merupakan wujud implementasi digitalisasi arsip yang memudahkan pengelolaan arsip dinamis dan statis dalam satu ekosistem digital yang aman, efisien, dan terpercaya.</p>
        
        <h3 style="margin-top: 25px; color: #0f3b2c;">Fitur-Fitur SIMPAN</h3>
        <div class="simpan-box">
            <h4><i class="fas fa-cogs" style="color: #f5c542; margin-right: 8px;"></i> Fitur Utama Aplikasi SIMPAN</h4>
            <ul>
                <li><i class="fas fa-circle"></i> <strong>Pendaftaran & Penomoran Otomatis</strong> - Sistem memberikan nomor arsip secara otomatis</li>
                <li><i class="fas fa-circle"></i> <strong>Upload/Download Dokumen</strong> - Unggah dan unduh file arsip digital dengan mudah</li>
                <li><i class="fas fa-circle"></i> <strong>Pencarian Cerdas</strong> - Temukan arsip berdasarkan kata kunci, nomor, atau tahun</li>
                <li><i class="fas fa-circle"></i> <strong>Manajemen Retensi</strong> - Pengelolaan jadwal retensi dan pemusnahan arsip</li>
                <li><i class="fas fa-circle"></i> <strong>Laporan & Statistik</strong> - Monitoring dan evaluasi pengelolaan arsip</li>
                <li><i class="fas fa-circle"></i> <strong>Keamanan Data</strong> - Sistem keamanan berlapis untuk melindungi data arsip</li>
            </ul>
        </div>

        <h3 style="margin-top: 25px; color: #0f3b2c;">Manfaat Menggunakan SIMPAN</h3>
        <div class="grid-2">
            <div class="feature-box">
                <h4><i class="fas fa-user-check" style="color: #f5c542; margin-right: 8px;"></i> Bagi Pengguna</h4>
                <ul>
                    <li><i class="fas fa-check-circle"></i> Akses cepat dan mudah ke arsip yang dibutuhkan</li>
                    <li><i class="fas fa-check-circle"></i> Proses pencarian arsip menjadi lebih efisien</li>
                    <li><i class="fas fa-check-circle"></i> Dapat mengakses arsip dari mana saja dan kapan saja</li>
                </ul>
            </div>
            <div class="feature-box">
                <h4><i class="fas fa-building" style="color: #f5c542; margin-right: 8px;"></i> Bagi Instansi</h4>
                <ul>
                    <li><i class="fas fa-check-circle"></i> Pengelolaan arsip yang lebih terstruktur dan sistematis</li>
                    <li><i class="fas fa-check-circle"></i> Mengurangi biaya penyimpanan arsip fisik</li>
                    <li><i class="fas fa-check-circle"></i> Mendukung program e-government dan smart city</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- ===== AKSES SIMPAN - TAMPILAN DIPERBAIKI ===== -->
    <!-- ============================================================ -->
    
    <!-- Hero SIMPAN -->
    <div class="simpan-hero" data-aos="fade-up">
        <div class="badge-simpan">
            <i class="fas fa-rocket"></i> Platform Digital
        </div>
        <h2><i class="fas fa-database"></i> Akses SIMPAN</h2>
        <p>Kelola arsip secara digital melalui platform resmi Pemerintah Kabupaten Solok Selatan</p>
        <a href="https://simpan.solselkab.go.id/login" target="_blank" class="btn-simpan-hero">
            <i class="fas fa-arrow-right"></i> Kunjungi SIMPAN
        </a>
    </div>

    <!-- Card Informasi Akses -->
    <div class="akses-simpan-card" data-aos="fade-up" data-aos-delay="100">
        <div class="card-header">
            <div class="icon-box">
                <i class="fas fa-info-circle"></i>
            </div>
            <div>
                <h3>Informasi Akses SIMPAN</h3>
                <p>Detail lengkap untuk mengakses platform SIMPAN</p>
            </div>
        </div>

        <div class="info-grid-akses">
            <div class="info-item-akses">
                <div class="info-icon"><i class="fas fa-globe"></i></div>
                <div class="info-text">
                    <strong>Platform</strong>
                    <span>Web-Based</span>
                </div>
            </div>
            <div class="info-item-akses">
                <div class="info-icon"><i class="fas fa-link"></i></div>
                <div class="info-text">
                    <strong>Alamat Akses</strong>
                    <span>simpan.solselkab.go.id</span>
                </div>
            </div>
            <div class="info-item-akses">
                <div class="info-icon"><i class="fas fa-users"></i></div>
                <div class="info-text">
                    <strong>Pengguna</strong>
                    <span>Aparatur & Pengelola Arsip</span>
                </div>
            </div>
            <div class="info-item-akses">
                <div class="info-icon"><i class="fas fa-clock"></i></div>
                <div class="info-text">
                    <strong>Waktu Akses</strong>
                    <span>24 Jam Online</span>
                </div>
            </div>
        </div>

        <h3 style="margin-top: 25px; color: #0f3b2c; font-size: 1.1rem;">
            <i class="fas fa-list-ol" style="color: #f5c542;"></i> Langkah Akses SIMPAN
        </h3>

        <div class="steps-akses">
            <div class="step-akses-item">
                <span class="step-icon"><i class="fas fa-laptop"></i></span>
                <div class="step-num">1</div>
                <h4>Buka Browser</h4>
                <p>Akses alamat simpan.solselkab.go.id/login</p>
                <span class="arrow-connector"><i class="fas fa-chevron-right"></i></span>
            </div>
            <div class="step-akses-item">
                <span class="step-icon"><i class="fas fa-user-lock"></i></span>
                <div class="step-num">2</div>
                <h4>Masuk Login</h4>
                <p>Masukkan username dan password</p>
                <span class="arrow-connector"><i class="fas fa-chevron-right"></i></span>
            </div>
            <div class="step-akses-item">
                <span class="step-icon"><i class="fas fa-sign-in-alt"></i></span>
                <div class="step-num">3</div>
                <h4>Login</h4>
                <p>Klik tombol Login masuk dashboard</p>
                <span class="arrow-connector"><i class="fas fa-chevron-right"></i></span>
            </div>
            <div class="step-akses-item">
                <span class="step-icon"><i class="fas fa-search"></i></span>
                <div class="step-num">4</div>
                <h4>Kelola Arsip</h4>
                <p>Pilih menu dan cari arsip yang dibutuhkan</p>
            </div>
        </div>
    </div>
</div>

<!-- ======================================== -->
<!-- FOOTER PREMIUM -->
<!-- ======================================== -->
<footer class="footer">
    <div class="footer-container">
        <div class="footer-grid">
            
            <div class="footer-col">
                <div class="footer-logo">
                    <div class="footer-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="footer-logo-text">
                        <h2>Dinas Kearsipan</h2>
                        <h2>Solok Selatan</h2>
                        <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="footer-social">
                    <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">
                <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 Instansi</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">
                <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">
                <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>

        <!-- Footer Bottom -->
        <div class="footer-bottom">
            <div class="footer-copyright">
                <p>&copy; <?php echo date('Y'); ?> Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan</p>
                <p>All Rights Reserved | <a href="privacy.php">Kebijakan Privasi</a> | <a href="sitemap.php">Sitemap</a></p>
            </div>
            <div class="footer-credit">
                <p>Sistem Informasi Perpustakaan dan Arsip Daerah</p>
                <div class="visitor-stats">
                    <div class="visitor-badge"><i class="fas fa-globe"></i> <?php echo number_format($totalVisitor); ?> Total</div>
                    <div class="visitor-badge"><i class="fas fa-calendar-day"></i> <?php echo number_format($hariIni); ?> Hari ini</div>
                    <div class="visitor-badge"><i class="fas fa-circle" style="color: #4ade80; font-size: 0.6rem;"></i> <?php echo $online; ?> Online</div>
                </div>
            </div>
        </div>
        
        <div class="footer-dev">
            <p>Developed by <a href="https://www.pnp.ac.id/download/psdku-solok-selatan/">PSDKU Solok Selatan</a></p>
        </div>
    </div>
</footer>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 800,
        once: true,
        offset: 50
    });
</script>
</body>
</html>