<?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'];
}
?>

<!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>Konsultasi Kearsipan | DPAD Solok Selatan</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

    <!-- AOS Animation -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

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

        body {
            font-family: 'Inter', sans-serif;
            background: #f4f6f9;
            color: #1a2634;
            overflow-x: hidden;
        }

        /* ========== HEADER PREMIUM ========== */
        .header {
            background: linear-gradient(135deg, #0a3d32, #1a5f4b);
            padding: 12px 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 15px rgba(0,0,0,0.08);
        }
        
        .logo-area {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .logo-icon {
            width: 46px;
            height: 46px;
            background: rgba(255,255,255,0.12);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
            overflow: hidden;
        }
        
        .logo-icon:hover {
            transform: scale(1.05);
            background: rgba(255,255,255,0.2);
        }
        
        .logo-icon i {
            font-size: 24px;
            color: #f5c542;
        }
        
        .logo-text h2 {
            color: white;
            font-size: 0.95rem;
            font-weight: 700;
            line-height: 1.3;
        }
        
        .logo-text p {
            color: rgba(255,255,255,0.7);
            font-size: 0.6rem;
            margin-top: 2px;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .icon-btn {
            position: relative;
            background: rgba(255,255,255,0.1);
            color: white;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .icon-btn:hover {
            background: white;
            color: #1a5f4b;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }
        
        .icon-btn .tooltip {
            position: absolute;
            bottom: -35px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            color: white;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 0.6rem;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            z-index: 100;
            pointer-events: none;
        }
        
        .icon-btn .tooltip::before {
            content: '';
            position: absolute;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-bottom: 4px solid #1e293b;
        }
        
        .icon-btn:hover .tooltip {
            opacity: 1;
            visibility: visible;
            bottom: -32px;
        }

        /* ========== HERO SECTION ========== */
        .hero {
            background: linear-gradient(135deg, #1a5f4b 0%, #0f3b2c 100%);
            padding: 50px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(255,255,255,0.04)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') repeat-x bottom;
            background-size: cover;
            opacity: 0.15;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: rgba(255,255,255,0.12);
            padding: 5px 16px;
            border-radius: 30px;
            font-size: 0.75rem;
            margin-bottom: 16px;
            color: #ffd966;
            backdrop-filter: blur(10px);
        }
        
        .hero h1 {
            font-size: 2.2rem;
            font-weight: 800;
            color: white;
            margin-bottom: 12px;
        }
        
        .hero h1 i {
            color: #f5c542;
            margin-right: 8px;
        }
        
        .hero p {
            max-width: 650px;
            margin: 0 auto;
            font-size: 0.95rem;
            color: rgba(255,255,255,0.85);
            line-height: 1.6;
        }

        /* ========== BREADCRUMB ========== */
        .breadcrumb {
            max-width: 1200px;
            margin: 20px auto;
            padding: 10px 20px;
            background: transparent;
            font-size: 0.8rem;
            color: #64748b;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px;
        }

        .breadcrumb a {
            color: #1a5f4b;
            text-decoration: none;
            transition: 0.3s;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .breadcrumb a:hover {
            background: #dcfce7;
            color: #0a3d32;
        }

        .breadcrumb .separator {
            margin: 0 2px;
            color: #94a3b8;
            font-size: 8px;
        }

        .breadcrumb .current {
            color: #1e293b;
            font-weight: 500;
            padding: 3px 8px;
            background: #f0fdf4;
            border-radius: 4px;
        }

        /* ========== CONTAINER ========== */
        .container {
            max-width: 1200px;
            margin: 40px auto 60px;
            padding: 0 20px;
        }

        /* ========== CARD STYLE ========== */
        .card {
            background: white;
            border-radius: 16px;
            padding: 30px 35px;
            margin-bottom: 24px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            border: 1px solid #eef2f5;
            transition: 0.3s;
        }

        .card:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        .card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
            padding-bottom: 12px;
            border-bottom: 1px solid #f0f2f4;
        }

        .card-header i {
            font-size: 1.4rem;
            color: #1a5f4b;
            width: 38px;
            height: 38px;
            background: #f0fdf4;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .card-header h2 {
            font-size: 1.2rem;
            font-weight: 600;
            color: #0f3b2c;
            letter-spacing: -0.3px;
        }

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

        .card ul {
            list-style: none;
            padding: 0;
        }

        .card ul li {
            padding: 8px 0;
            display: flex;
            align-items: flex-start;
            gap: 10px;
            border-bottom: 1px solid #f5f7fa;
            color: #475569;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .card ul li:last-child {
            border-bottom: none;
        }

        .card ul li i {
            color: #1a5f4b;
            margin-top: 2px;
            min-width: 16px;
            font-size: 0.85rem;
        }

        .card ul li strong {
            color: #0f3b2c;
            min-width: 180px;
            font-weight: 600;
        }

        .card ul li span {
            color: #475569;
        }

        /* ========== GRID 2 KOLOM ========== */
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin: 0;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 0;
        }

        /* ========== FEATURE BOX ========== */
        .feature-box {
            background: #f8fafc;
            border-radius: 12px;
            padding: 20px 22px;
            transition: 0.3s;
            border: 1px solid #eef2f5;
        }

        .feature-box:hover {
            transform: translateY(-3px);
            border-color: #dce7e2;
            background: white;
        }

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

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

        .feature-box .contoh {
            margin-top: 8px;
            font-size: 0.75rem;
            color: #1a5f4b;
            font-style: italic;
            background: #f0fdf4;
            padding: 4px 12px;
            border-radius: 6px;
            display: inline-block;
        }

        /* ========== BENEFIT BOX ========== */
        .benefit-box {
            text-align: center;
            padding: 22px 18px;
            background: #f8fafc;
            border-radius: 12px;
            transition: 0.3s;
            border: 1px solid #eef2f5;
        }

        .benefit-box:hover {
            transform: translateY(-3px);
            border-color: #dce7e2;
            background: white;
        }

        .benefit-box .icon {
            width: 50px;
            height: 50px;
            background: #1a5f4b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
        }

        .benefit-box .icon i {
            font-size: 22px;
            color: white;
        }

        .benefit-box h4 {
            font-size: 0.95rem;
            color: #0f3b2c;
            margin-bottom: 6px;
            font-weight: 600;
        }

        .benefit-box p {
            font-size: 0.8rem;
            color: #64748b;
            line-height: 1.4;
            margin-bottom: 0;
        }

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

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

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

        .info-table th {
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #0f3b2c;
            width: 28%;
            font-size: 0.85rem;
            background: #f8fafc;
        }

        .info-table td {
            padding: 12px 16px;
            color: #475569;
            font-size: 0.85rem;
            line-height: 1.5;
        }

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

        .alur-item {
            text-align: center;
            padding: 18px 14px;
            background: #f8fafc;
            border-radius: 12px;
            transition: 0.3s;
            border: 1px solid #eef2f5;
        }

        .alur-item:hover {
            transform: translateY(-3px);
            border-color: #dce7e2;
            background: white;
        }

        .alur-number {
            width: 36px;
            height: 36px;
            background: #1a5f4b;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: 700;
            font-size: 1rem;
        }

        .alur-item h4 {
            font-size: 0.9rem;
            font-weight: 600;
            color: #0f3b2c;
            margin-bottom: 4px;
        }

        .alur-item p {
            font-size: 0.75rem;
            color: #64748b;
            line-height: 1.4;
            margin-bottom: 0;
        }

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

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

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

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

        .kontak-section p {
            opacity: 0.85;
            margin-bottom: 4px;
            font-size: 0.9rem;
        }

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

        .kontak-info span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.08);
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.8rem;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.06);
        }

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

        .kontak-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #f5c542;
            color: #0f3b2c;
            padding: 10px 28px;
            border-radius: 40px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 16px;
            transition: 0.4s;
            border: 2px solid transparent;
            font-size: 0.9rem;
        }

        .kontak-btn:hover {
            background: transparent;
            color: white;
            border-color: #f5c542;
            transform: translateY(-2px);
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        /* ========== RESPONSIVE ========== */
        
        /* Tablet & Laptop kecil (max-width: 1024px) */
        @media (max-width: 1024px) {
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
        }

        @media (max-width: 992px) {
            .grid-2 {
                grid-template-columns: 1fr;
            }
            .grid-3 {
                grid-template-columns: repeat(2, 1fr);
            }
            .alur-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
            .hero h1 {
                font-size: 1.9rem;
            }
            .container {
                margin: 30px auto 50px;
                padding: 0 16px;
            }
        }

        @media (max-width: 768px) {
            /* Header */
            .header {
                padding: 10px 20px;
                flex-wrap: wrap;
                gap: 8px;
            }
            .logo-text h2 {
                font-size: 0.8rem;
            }
            .logo-text p {
                font-size: 0.55rem;
            }
            .logo-icon {
                width: 38px;
                height: 38px;
            }
            .logo-icon i {
                font-size: 20px;
            }
            .icon-btn {
                width: 34px;
                height: 34px;
                font-size: 0.95rem;
            }
            .header-actions {
                gap: 6px;
            }
            .icon-btn .tooltip {
                display: none;
            }
            
            /* Hero */
            .hero {
                padding: 35px 20px;
            }
            .hero h1 {
                font-size: 1.5rem;
            }
            .hero p {
                font-size: 0.85rem;
            }
            .hero-badge {
                font-size: 0.65rem;
                padding: 4px 14px;
            }
            
            /* Breadcrumb */
            .breadcrumb {
                padding: 8px 16px;
                font-size: 0.7rem;
                margin: 14px auto;
            }
            .breadcrumb a {
                padding: 2px 6px;
            }
            .breadcrumb .current {
                padding: 2px 6px;
            }
            
            /* Container */
            .container {
                margin: 25px auto 35px;
                padding: 0 14px;
            }
            
            /* Card */
            .card {
                padding: 22px 20px;
                margin-bottom: 18px;
                border-radius: 14px;
            }
            .card-header {
                gap: 10px;
                margin-bottom: 14px;
                padding-bottom: 10px;
            }
            .card-header h2 {
                font-size: 1.05rem;
            }
            .card-header i {
                font-size: 1.2rem;
                width: 34px;
                height: 34px;
                border-radius: 8px;
            }
            .card p {
                font-size: 0.9rem;
                line-height: 1.6;
            }
            .card ul li {
                flex-direction: column;
                gap: 4px;
                padding: 6px 0;
                font-size: 0.85rem;
            }
            .card ul li strong {
                min-width: auto;
            }
            
            /* Grid */
            .grid-3 {
                grid-template-columns: 1fr;
            }
            .alur-grid {
                grid-template-columns: 1fr;
            }
            .grid-2 {
                gap: 18px;
            }
            
            /* Feature Box */
            .feature-box {
                padding: 16px 18px;
            }
            .feature-box h4 {
                font-size: 0.95rem;
            }
            .feature-box p {
                font-size: 0.8rem;
            }
            
            /* Benefit Box */
            .benefit-box {
                padding: 18px 14px;
            }
            .benefit-box .icon {
                width: 44px;
                height: 44px;
            }
            .benefit-box .icon i {
                font-size: 18px;
            }
            
            /* Tabel */
            .info-table th, .info-table td {
                padding: 10px 14px;
                font-size: 0.8rem;
                display: block;
                width: 100%;
            }
            .info-table tr {
                display: block;
                margin-bottom: 10px;
                border: 1px solid #eef2f5;
                border-radius: 8px;
                overflow: hidden;
            }
            .info-table th {
                border-bottom: 1px solid #eef2f5;
            }
            
            /* Kontak */
            .kontak-section {
                padding: 30px 16px;
                border-radius: 14px;
                margin-top: 30px;
            }
            .kontak-section h3 {
                font-size: 1.1rem;
            }
            .kontak-section p {
                font-size: 0.85rem;
            }
            .kontak-info {
                gap: 12px;
                flex-direction: column;
                align-items: center;
            }
            .kontak-info span {
                font-size: 0.75rem;
                padding: 5px 14px;
            }
            .kontak-btn {
                padding: 8px 24px;
                font-size: 0.85rem;
                margin-top: 12px;
            }
            
            /* Footer */
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            .footer-premium {
                padding-top: 40px;
                margin-top: 40px;
            }
            .footer-premium::after {
                font-size: 60px;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 10px;
            }
            .footer-col h3::after {
                left: 50%;
                transform: translateX(-50%);
            }
            .footer-logo {
                justify-content: center;
            }
            .footer-contact-item {
                justify-content: center;
            }
            .social-links {
                justify-content: center;
            }
            .footer-description {
                text-align: center;
            }
            .footer-menu li a {
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            /* Header */
            .header {
                padding: 8px 14px;
            }
            .logo-text h2 {
                font-size: 0.7rem;
            }
            .logo-text p {
                font-size: 0.5rem;
            }
            .logo-icon {
                width: 32px;
                height: 32px;
            }
            .logo-icon i {
                font-size: 16px;
            }
            .icon-btn {
                width: 30px;
                height: 30px;
                font-size: 0.85rem;
            }
            .header-actions {
                gap: 4px;
            }
            
            /* Hero */
            .hero {
                padding: 25px 16px;
            }
            .hero h1 {
                font-size: 1.2rem;
            }
            .hero p {
                font-size: 0.8rem;
            }
            .hero-badge {
                font-size: 0.6rem;
                padding: 3px 12px;
            }
            
            /* Breadcrumb */
            .breadcrumb {
                padding: 6px 12px;
                font-size: 0.65rem;
                margin: 10px auto;
            }
            
            /* Container */
            .container {
                margin: 20px auto 30px;
                padding: 0 10px;
            }
            
            /* Card */
            .card {
                padding: 16px 14px;
                margin-bottom: 14px;
                border-radius: 12px;
            }
            .card-header {
                gap: 8px;
                margin-bottom: 10px;
                padding-bottom: 8px;
            }
            .card-header h2 {
                font-size: 0.95rem;
            }
            .card-header i {
                font-size: 1rem;
                width: 30px;
                height: 30px;
                border-radius: 6px;
            }
            .card p {
                font-size: 0.85rem;
            }
            .card ul li {
                font-size: 0.8rem;
                padding: 5px 0;
            }
            .card ul li i {
                font-size: 0.7rem;
            }
            
            /* Feature Box */
            .feature-box {
                padding: 14px;
            }
            .feature-box h4 {
                font-size: 0.9rem;
            }
            .feature-box p {
                font-size: 0.75rem;
            }
            .feature-box .contoh {
                font-size: 0.65rem;
                padding: 3px 10px;
            }
            
            /* Benefit Box */
            .benefit-box {
                padding: 14px 12px;
            }
            .benefit-box .icon {
                width: 38px;
                height: 38px;
            }
            .benefit-box .icon i {
                font-size: 16px;
            }
            .benefit-box h4 {
                font-size: 0.85rem;
            }
            .benefit-box p {
                font-size: 0.7rem;
            }
            
            /* Alur */
            .alur-item {
                padding: 14px 10px;
            }
            .alur-number {
                width: 30px;
                height: 30px;
                font-size: 0.85rem;
            }
            .alur-item h4 {
                font-size: 0.8rem;
            }
            .alur-item p {
                font-size: 0.7rem;
            }
            
            /* Kontak */
            .kontak-section {
                padding: 24px 14px;
                border-radius: 12px;
                margin-top: 24px;
            }
            .kontak-section h3 {
                font-size: 1rem;
            }
            .kontak-info span {
                font-size: 0.7rem;
                padding: 4px 12px;
                width: 100%;
                justify-content: center;
            }
            .kontak-btn {
                width: 100%;
                justify-content: center;
                padding: 10px 16px;
                font-size: 0.85rem;
            }
            
            /* Footer */
            .footer-premium {
                padding-top: 30px;
                margin-top: 30px;
            }
            .footer-grid {
                gap: 20px;
                margin-bottom: 30px;
            }
            .footer-col h3 {
                font-size: 0.95rem;
                margin-bottom: 15px;
            }
            .footer-description {
                font-size: 0.75rem;
            }
            .footer-menu li a {
                font-size: 0.75rem;
            }
            .footer-contact-item {
                font-size: 0.75rem;
            }
            .footer-bottom p {
                font-size: 0.65rem;
            }
            .visitor-badge {
                font-size: 0.6rem;
                padding: 3px 10px;
            }
            .dev-credit {
                font-size: 0.6rem;
            }
            .footer-premium::after {
                font-size: 40px;
            }
        }

        @media (max-width: 360px) {
            /* Extra small devices */
            .hero h1 {
                font-size: 1rem;
            }
            .card-header h2 {
                font-size: 0.85rem;
            }
            .card p {
                font-size: 0.8rem;
            }
            .card ul li {
                font-size: 0.75rem;
            }
            .kontak-section h3 {
                font-size: 0.9rem;
            }
            .kontak-section p {
                font-size: 0.75rem;
            }
        }
    </style>
</head>
<body>

<!-- HEADER PREMIUM -->
<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:30px; height:30px; 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">Beranda</span>
        </a>
        <a href="layanan_arsip.php" class="icon-btn">
            <i class="fas fa-th-list"></i>
            <span class="tooltip">Layanan</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">
        <div class="hero-badge">
            <i class="fas fa-comments"></i> Konsultasi Kearsipan
        </div>
        <h1><i></i> Konsultasi Kearsipan</h1>
        <p>Layanan konsultasi dan pendampingan pengelolaan arsip bagi instansi pemerintah, swasta, dan masyarakat</p>
    </div>
</section>

<!-- BREADCRUMB -->
<div class="breadcrumb">
    <a href="dashboard.php"><i class="fas fa-home"></i> Beranda</a>
    <span class="separator"><i class="fas fa-chevron-right" style="font-size:8px;"></i></span>
    <span class="current">Konsultasi Kearsipan</span>
</div>

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

    <!-- 1. PENGERTIAN -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-info-circle"></i>
            <h2>Apa itu Konsultasi Kearsipan?</h2>
        </div>
        <p><strong>Konsultasi Kearsipan</strong> adalah layanan yang diberikan oleh Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan kepada instansi pemerintah, perusahaan swasta, organisasi, dan masyarakat umum dalam hal pengelolaan arsip yang baik dan benar sesuai dengan peraturan perundang-undangan yang berlaku.</p>
        <p>Layanan ini bertujuan untuk memberikan pendampingan, bimbingan, dan solusi atas permasalahan kearsipan yang dihadapi oleh pengelola arsip, sehingga tercipta pengelolaan arsip yang tertib, teratur, dan akuntabel.</p>
    </div>

    <!-- 2. TUJUAN KONSULTASI -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-bullseye"></i>
            <h2>Tujuan Konsultasi Kearsipan</h2>
        </div>
        <div class="grid-3">
            <div class="benefit-box">
                <div class="icon"><i class="fas fa-user-graduate"></i></div>
                <h4>Peningkatan Kompetensi</h4>
                <p>Meningkatkan pemahaman dan keterampilan pengelola arsip dalam melaksanakan tugas kearsipan</p>
            </div>
            <div class="benefit-box">
                <div class="icon"><i class="fas fa-file-alt"></i></div>
                <h4>Standarisasi Pengelolaan</h4>
                <p>Membantu mewujudkan pengelolaan arsip yang sesuai dengan standar dan peraturan yang berlaku</p>
            </div>
            <div class="benefit-box">
                <div class="icon"><i class="fas fa-shield-alt"></i></div>
                <h4>Solusi Permasalahan</h4>
                <p>Memberikan solusi atas berbagai permasalahan teknis dalam pengelolaan arsip</p>
            </div>
        </div>
    </div>

    <!-- 3. RUANG LINGKUP KONSULTASI -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-list-ul"></i>
            <h2>Ruang Lingkup Konsultasi</h2>
        </div>
        <div class="grid-2">
            <div class="feature-box">
                <h4>📋 Pengelolaan Arsip Dinamis</h4>
                <p>Konsultasi mengenai pengelolaan arsip aktif dan inaktif di lingkungan instansi</p>
                <div class="contoh">Klasifikasi arsip, jadwal retensi, sistem penyimpanan</div>
            </div>
            <div class="feature-box">
                <h4>🏛️ Pengelolaan Arsip Statis</h4>
                <p>Konsultasi mengenai pengelolaan arsip permanen yang memiliki nilai sejarah</p>
                <div class="contoh">Preservasi, digitalisasi, pelayanan akses</div>
            </div>
            <div class="feature-box">
                <h4>💻 Digitalisasi Arsip</h4>
                <p>Konsultasi mengenai alih media arsip dari fisik ke digital</p>
                <div class="contoh">Teknik scanning, metadata, sistem manajemen arsip digital</div>
            </div>
            <div class="feature-box">
                <h4>📜 Penyusunan Jadwal Retensi</h4>
                <p>Konsultasi mengenai penyusunan dan penerapan jadwal retensi arsip</p>
                <div class="contoh">Identifikasi jenis arsip, masa simpan, prosedur pemusnahan</div>
            </div>
        </div>
    </div>

    <!-- 4. MANFAAT KONSULTASI -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-heart"></i>
            <h2>Manfaat Konsultasi Kearsipan</h2>
        </div>
        <ul>
            <li><i class="fas fa-check"></i> <strong>Pemahaman yang Lebih Baik</strong> <span>- Mendapatkan pemahaman yang mendalam tentang pengelolaan arsip yang sesuai dengan peraturan</span></li>
            <li><i class="fas fa-check"></i> <strong>Solusi Tepat Guna</strong> <span>- Mendapatkan solusi yang tepat untuk permasalahan kearsipan yang dihadapi</span></li>
            <li><i class="fas fa-check"></i> <strong>Pendampingan Profesional</strong> <span>- Didampingi oleh tenaga arsiparis yang berpengalaman dan kompeten</span></li>
            <li><i class="fas fa-check"></i> <strong>Peningkatan Efisiensi</strong> <span>- Meningkatkan efisiensi dan efektivitas pengelolaan arsip di instansi</span></li>
            <li><i class="fas fa-check"></i> <strong>Kepatuhan Regulasi</strong> <span>- Memastikan kepatuhan terhadap peraturan perundang-undangan di bidang kearsipan</span></li>
        </ul>
    </div>

    <!-- 5. WAKTU & KONTAK LAYANAN -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-clock"></i>
            <h2>Waktu & Kontak Layanan</h2>
        </div>
        <table class="info-table">
            <tr>
                <th>Jadwal Pelayanan</th>
                <td>
                    <strong>Senin – Kamis</strong> : 09.00 – 15.00 WIB<br>
                    <span style="font-size:0.8rem; color:#94a3b8;">(Istirahat 12.30 – 13.30)</span><br>
                    <strong>Jumat</strong> : 09.00 – 15.30 WIB<br>
                    <span style="font-size:0.8rem; color:#94a3b8;">(Istirahat 12.00 – 13.30)</span><br>
                    <strong>Sabtu – Minggu & Libur</strong> : Libur
                </td>
            </tr>
            <tr>
                <th>Biaya Layanan</th>
                <td><span style="color:#1a5f4b; font-weight:600;">GRATIS</span> (Tidak dipungut biaya)</td>
            </tr>
            <tr>
                <th>Kontak</th>
                <td>
                    <strong>Telepon</strong> : 0812-0000-0000<br>
                    <strong>Email</strong> : dpad@solokselatankab.go.id<br>
                    <strong>Alamat</strong> : Jl. Lubuk Gadang, Sangir, Solok Selatan
                </td>
            </tr>
        </table>
    </div>

    <!-- 6. ALUR KONSULTASI -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-route"></i>
            <h2>Alur Konsultasi Kearsipan</h2>
        </div>
        <div class="alur-grid">
            <div class="alur-item">
                <div class="alur-number">1</div>
                <h4>Pengajuan</h4>
                <p>Mengajukan permohonan konsultasi secara tertulis</p>
            </div>
            <div class="alur-item">
                <div class="alur-number">2</div>
                <h4>Verifikasi</h4>
                <p>Verifikasi kelengkapan data dan persyaratan</p>
            </div>
            <div class="alur-item">
                <div class="alur-number">3</div>
                <h4>Konsultasi</h4>
                <p>Pelaksanaan konsultasi dengan tim arsiparis</p>
            </div>
            <div class="alur-item">
                <div class="alur-number">4</div>
                <h4>Rekomendasi</h4>
                <p>Pemberian rekomendasi dan solusi</p>
            </div>
        </div>
    </div>

    <!-- 7. DASAR HUKUM -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-gavel"></i>
            <h2>Dasar Hukum</h2>
        </div>
        <ul>
            <li><i class="fas fa-check"></i> <strong>UU No. 43 Tahun 2009</strong> <span>- Tentang Kearsipan</span></li>
            <li><i class="fas fa-check"></i> <strong>PP No. 28 Tahun 2012</strong> <span>- Tentang Pelaksanaan UU Kearsipan</span></li>
            <li><i class="fas fa-check"></i> <strong>Peraturan Kepala ANRI No. 1 Tahun 2010</strong> <span>- Tentang Pedoman Pengelolaan Arsip Statis</span></li>
            <li><i class="fas fa-check"></i> <strong>Peraturan Daerah Solok Selatan</strong> <span>- Tentang Pengelolaan Arsip Daerah</span></li>
            <li><i class="fas fa-check"></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>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
    AOS.init({
        duration: 500,
        once: true,
        offset: 30,
        easing: 'ease-out'
    });
</script>

</body>
</html>