<?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>Bimbingan Teknis Kearsipan | 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 ========== */
        .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 */
        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .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);
        }
        
        .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;
        }
        
        .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::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.05)" 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::after {
            content: "🎓";
            position: absolute;
            right: -30px;
            top: -30px;
            font-size: 180px;
            opacity: 0.08;
            transform: rotate(15deg);
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            padding: 6px 18px;
            border-radius: 40px;
            font-size: 0.8rem;
            margin-bottom: 20px;
            color: #ffd966;
        }
        
        .hero h1 {
            font-size: 2.5rem;
            font-weight: 800;
            color: white;
            margin-bottom: 15px;
        }
        
        .hero h1 i {
            color: #f5c542;
            margin-right: 10px;
        }
        
        .hero p {
            max-width: 700px;
            margin: 0 auto;
            font-size: 1rem;
            color: rgba(255,255,255,0.9);
            line-height: 1.6;
        }
        
        /* ========== BREADCRUMB ========== */
        .breadcrumb {
            max-width: 1280px;
            margin: 20px auto;
            padding: 0 20px;
            font-size: 0.85rem;
            color: #64748b;
        }

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

        .breadcrumb a:hover {
            text-decoration: underline;
        }

        .breadcrumb .separator {
            margin: 0 8px;
            color: #94a3b8;
        }

        .breadcrumb .current {
            color: #1e293b;
            font-weight: 600;
        }
        
        /* ========== 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 .card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #f5c542;
        }
        
        .card .card-header i {
            font-size: 1.8rem;
            color: #1a5f4b;
            background: #dcfce7;
            padding: 12px;
            border-radius: 14px;
            min-width: 50px;
            text-align: center;
        }
        
        .card h2 {
            font-size: 1.5rem;
            color: #0f3b2c;
        }
        
        .card h3 {
            font-size: 1.2rem;
            color: #1a5f4b;
            margin: 20px 0 12px;
        }
        
        .card p {
            color: #475569;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        
        /* ========== GRID 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 .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:last-child {
            border-bottom: none;
        }
        
        .list-style li i {
            color: #f5c542;
            margin-top: 3px;
            min-width: 18px;
        }
        
        .list-style li strong {
            color: #0f3b2c;
            min-width: 180px;
        }
        
        .list-style li span {
            color: #475569;
        }
        
        /* ========== GRID 3 KOLOM ========== */
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            margin: 20px 0;
        }
        
        .benefit-box {
            background: #f8fafc;
            border-radius: 16px;
            padding: 25px;
            text-align: center;
            transition: 0.3s;
            border: 1px solid #e2e8f0;
        }
        
        .benefit-box:hover {
            transform: translateY(-5px);
            border-color: #f5c542;
            background: white;
        }
        
        .benefit-box .icon {
            width: 60px;
            height: 60px;
            background: #1a5f4b;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
        }
        
        .benefit-box .icon i {
            font-size: 28px;
            color: white;
        }
        
        .benefit-box h4 {
            font-size: 1rem;
            color: #0f3b2c;
            margin-bottom: 8px;
        }
        
        .benefit-box p {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.5;
        }
        
        /* ========== TABEL INFORMASI ========== */
        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .info-table tr {
            border-bottom: 1px solid #e2e8f0;
        }
        
        .info-table tr:last-child {
            border-bottom: none;
        }
        
        .info-table th {
            background: #f1f5f9;
            padding: 14px 18px;
            text-align: left;
            font-weight: 600;
            color: #0f3b2c;
            width: 30%;
        }
        
        .info-table td {
            padding: 14px 18px;
            color: #475569;
        }
        
        /* ========== FORM PENDAFTARAN ========== */
        .form-section {
            background: linear-gradient(135deg, #f0fdf4, #e8f5e9);
            border-radius: 24px;
            padding: 40px;
            margin-top: 30px;
        }
        
        .form-section h3 {
            font-size: 1.3rem;
            color: #0f3b2c;
            margin-bottom: 10px;
        }
        
        .form-section .subtitle {
            color: #64748b;
            margin-bottom: 25px;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .form-group.full {
            grid-column: 1 / -1;
        }
        
        .form-group label {
            font-weight: 600;
            color: #1e293b;
            font-size: 0.85rem;
        }
        
        .form-group label .required {
            color: #ef4444;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 12px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 0.95rem;
            font-family: 'Inter', sans-serif;
            transition: all 0.3s;
            background: white;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #1a5f4b;
            box-shadow: 0 0 0 4px rgba(26,95,75,0.1);
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }
        
        .btn-submit {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            color: white;
            padding: 14px 40px;
            border: none;
            border-radius: 40px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
        }
        
        .btn-submit:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 25px rgba(26,95,75,0.3);
            background: #f5c542;
            color: #0f3b2c;
        }
        
        /* ========== STATISTIK ========== */
        .stats-wrapper {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            border-radius: 24px;
            padding: 40px;
            margin-top: 40px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            text-align: center;
        }
        
        .stats-item h3 {
            font-size: 2rem;
            font-weight: 800;
            color: #f5c542;
            margin-bottom: 5px;
        }
        
        .stats-item p {
            color: rgba(255,255,255,0.8);
            font-size: 0.85rem;
        }
        
        /* ======================================== */
        /* 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;
        }
        
        /* ========== LOGO FOOTER ========== */
        .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;
        }
        
        /* Social Media */
        .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);
        }
        
        /* Kolom Menu */
        .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);
        }
        
        /* Kolom Kontak */
        .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;
        }
        
        /* Bottom Footer */
        .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;
            }
            .card {
                padding: 30px;
            }
        }
        
        @media (max-width: 992px) {
            .grid-3 {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 35px;
            }
            .hero h1 {
                font-size: 2rem;
            }
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @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;
            }
            .container {
                padding: 30px 15px;
            }
            .grid-2 {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .grid-3 {
                grid-template-columns: 1fr;
            }
            .stats-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .card {
                padding: 25px;
            }
            .card .card-header {
                flex-wrap: wrap;
            }
            .card .card-header h2 {
                font-size: 1.2rem;
            }
            .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;
                border-radius: 8px;
                overflow: hidden;
            }
            .list-style li {
                flex-direction: column;
                gap: 5px;
            }
            .list-style li strong {
                min-width: auto;
            }
            .form-grid {
                grid-template-columns: 1fr;
            }
            .form-group.full {
                grid-column: 1;
            }
            .btn-submit {
                width: 100%;
                justify-content: center;
            }
            
            /* Footer Responsive */
            .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;
            }
            .icon-btn .tooltip {
                display: none;
            }
        }
        
        @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;
            }
            .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 -->
<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">
        <div class="hero-badge">
            <i class="fas fa-chalkboard-teacher"></i> Layanan Bimbingan Teknis
        </div>
        <h1><i class="fas fa-graduation-cap"></i> Bimbingan Teknis Kearsipan</h1>
        <p>Pelatihan dan pendampingan pengelolaan arsip bagi aparatur pemerintah daerah untuk mewujudkan tata kelola arsip yang profesional dan sesuai standar</p>
    </div>
</section>

<!-- BREADCRUMB -->
<div class="breadcrumb">
    <a href="dashboard.php">Beranda</a>
    <span class="separator">/</span>
    <span class="current">Bimbingan Teknis Kearsipan</span>
</div>

<div class="container">
    
    <!-- DESKRIPSI LAYANAN -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-info-circle"></i>
            <h2>Tentang Bimbingan Teknis Kearsipan</h2>
        </div>
        <p><strong>Bimbingan Teknis Kearsipan</strong> adalah layanan pelatihan dan pendampingan yang diberikan oleh Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan kepada aparatur pemerintah daerah dalam pengelolaan arsip yang baik dan benar sesuai dengan peraturan perundang-undangan yang berlaku.</p>
        <p>Program ini bertujuan untuk meningkatkan kompetensi sumber daya manusia di bidang kearsipan, sehingga tercipta pengelolaan arsip yang tertib, teratur, dan akuntabel di lingkungan pemerintah daerah.</p>
    </div>

    <!-- TUJUAN BIMTEK -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-bullseye"></i>
            <h2>Tujuan Bimbingan Teknis</h2>
        </div>
        <div class="grid-3">
            <div class="benefit-box">
                <div class="icon"><i class="fas fa-user-graduate"></i></div>
                <h4>Meningkatkan Kompetensi</h4>
                <p>Meningkatkan pengetahuan dan keterampilan aparatur dalam pengelolaan arsip yang profesional</p>
            </div>
            <div class="benefit-box">
                <div class="icon"><i class="fas fa-file-alt"></i></div>
                <h4>Standarisasi Pengelolaan</h4>
                <p>Mewujudkan pengelolaan arsip yang terstandar sesuai peraturan yang berlaku</p>
            </div>
            <div class="benefit-box">
                <div class="icon"><i class="fas fa-shield-alt"></i></div>
                <h4>Pelestarian Arsip</h4>
                <p>Menjaga keutuhan dan kelestarian arsip sebagai memori kolektif bangsa</p>
            </div>
        </div>
    </div>

    <!-- MATERI BIMTEK -->
    <div class="card" data-aos="fade-up">
        <div class="card-header">
            <i class="fas fa-book-open"></i>
            <h2>Materi Bimbingan Teknis</h2>
        </div>
        <div class="grid-2">
            <div>
                <ul class="list-style">
                    <li><i class="fas fa-check-circle"></i> <strong>Dasar-Dasar Kearsipan</strong> <span>Pengenalan konsep dasar, jenis-jenis arsip, dan prinsip pengelolaan arsip</span></li>
                    <li><i class="fas fa-check-circle"></i> <strong>Klasifikasi dan Kode Arsip</strong> <span>Sistem klasifikasi arsip dan pemberian kode untuk memudahkan penemuan kembali</span></li>
                    <li><i class="fas fa-check-circle"></i> <strong>Jadwal Retensi Arsip</strong> <span>Penyusunan dan penerapan jadwal retensi untuk menentukan masa simpan arsip</span></li>
                </ul>
            </div>
            <div>
                <ul class="list-style">
                    <li><i class="fas fa-check-circle"></i> <strong>Digitalisasi Arsip</strong> <span>Teknik alih media arsip dari fisik ke digital untuk mendukung SPPBE</span></li>
                    <li><i class="fas fa-check-circle"></i> <strong>Pengamanan Arsip</strong> <span>Strategi pengamanan arsip dari kerusakan, kehilangan, dan bencana</span></li>
                    <li><i class="fas fa-check-circle"></i> <strong>Evaluasi dan Pelaporan</strong> <span>Teknik evaluasi kinerja kearsipan dan penyusunan laporan kegiatan</span></li>
                </ul>
            </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: 600,
        once: true,
        offset: 50
    });
</script>

</body>
</html>