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

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

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

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

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

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

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tentang Kami | 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">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@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', 'Plus Jakarta Sans', sans-serif;
            background: #ffffff;
            color: #1e293b;
            overflow-x: hidden;
        }

        /* ========== HEADER PREMIUM DENGAN TOOLTIP ========== */
        .header {
            background: linear-gradient(135deg, #0a3d32, #1a5f4b);
            padding: 12px 40px;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            overflow: visible;
        }

        .header-content {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

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

        .logo-icon {
            width: 45px;
            height: 45px;
            background: rgba(255,255,255,0.15);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

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

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

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

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

        .header-icon {
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(10px);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

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

        .back-btn {
            background: rgba(255,255,255,0.12);
            backdrop-filter: blur(10px);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-decoration: none;
            font-size: 1.1rem;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

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

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

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

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

        /* ========== WAJAH INSTANSI ========== */
        .hero-section {
            background: linear-gradient(135deg, #f0fdf4, #e8f5e9);
            padding: 80px 20px;
        }

        .hero-container {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 50px;
            flex-wrap: wrap;
        }

        .hero-text {
            flex: 1;
        }

        .hero-text .badge {
            color: #1a5f4b;
            font-weight: 600;
            letter-spacing: 2px;
            margin-bottom: 15px;
        }

        .hero-text h1 {
            font-size: 3rem;
            font-weight: 800;
            color: #0f3b2c;
            line-height: 1.2;
        }

        .hero-text h1 span {
            color: #1a5f4b;
        }

        .hero-text .visi-statement {
            font-size: 1.1rem;
            color: #475569;
            margin-top: 25px;
            line-height: 1.6;
            font-style: italic;
        }

        .hero-image img{
            width: 240px;
            height: 320px;
            object-fit: cover;
            object-position: center top;
            border-radius: 28px;
            border: 5px solid #f5c542;
            box-shadow: 0 18px 35px rgba(0,0,0,.12);
            transition: .3s ease;
        }

        .hero-image img:hover{
            transform: translateY(-5px);
        }

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

        /* ========== TENTANG KAMI ========== */
        .tentang-card {
            background: white;
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            margin-bottom: 50px;
        }

        .tentang-card h3 {
            font-size: 1.5rem;
            color: #0f3b2c;
            margin-bottom: 20px;
        }

        .tentang-card p {
            color: #475569;
            line-height: 1.8;
            margin-bottom: 20px;
        }

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

        .stat-item {
            background: #f0fdf4;
            border-radius: 20px;
            padding: 25px;
            text-align: center;
        }

        .stat-item h4 {
            font-size: 2rem;
            font-weight: 800;
            color: #1a5f4b;
        }

        .stat-item p {
            color: #64748b;
            font-size: 0.85rem;
        }

        /* ========== STRUKTUR BIDANG KEARSIPAN ========== */
        .struktur-section {
            background: white;
            border-radius: 24px;
            padding: 40px;
            margin-bottom: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .section-title {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-title h2 {
            font-size: 1.8rem;
            color: #0f3b2c;
            font-weight: 700;
        }

        .section-title .line {
            width: 80px;
            height: 4px;
            background: #f5c542;
            margin: 15px auto 0;
            border-radius: 2px;
        }

        .section-title .subtitle {
            color: #64748b;
            margin-top: 10px;
        }

        /* Struktur Manual */
        .struktur-manual {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
        }

        .org-node {
            text-align: center;
            margin-bottom: 20px;
        }

        .org-node.top {
            margin-bottom: 10px;
        }

        .org-card {
            background: white;
            border-radius: 20px;
            padding: 18px 20px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: all 0.3s;
            min-width: 200px;
            max-width: 220px;
            border-bottom: 4px solid #f5c542;
        }

        .org-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 35px rgba(0,0,0,0.12);
        }

        .org-card.kepala-bidang {
            background: linear-gradient(135deg, #1a5f4b, #0f3b2c);
            color: white;
            border-bottom-color: #f5c542;
        }

        .org-card.kepala-bidang .jabatan,
        .org-card.kepala-bidang .nip {
            color: rgba(255,255,255,0.8);
        }

        .org-card.kepala-bidang h4 {
            color: white;
        }

        .org-avatar {
            width: 100px;
            height: 100px;
            margin: 0 auto 15px;
            background: #dcfce7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 3px solid #f5c542;
        }

        .org-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .org-avatar i {
            font-size: 45px;
            color: #1a5f4b;
        }

        .org-card h4 {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: #0f3b2c;
        }

        .org-card .jabatan {
            font-size: 0.75rem;
            font-weight: 700;
            color: #c62828;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .org-card .nip {
            font-size: 0.7rem;
            color: #64748b;
        }

        .org-line-vertical {
            width: 2px;
            height: 35px;
            background: linear-gradient(to bottom, #1a5f4b, #cbd5e1);
            margin: 5px auto;
        }

        .org-line-horizontal {
            width: 100%;
            margin: 20px 0;
            position: relative;
        }

        .line-h {
            width: 60%;
            height: 2px;
            background: linear-gradient(to right, transparent, #1a5f4b, #1a5f4b, transparent);
            margin: 0 auto;
        }

        .org-row {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 30px;
            margin: 20px 0;
            width: 100%;
        }

        /* ========== TUPOKSI ========== */
        .tupoksi-section {
            background: #f1f5f9;
            border-radius: 24px;
            padding: 40px;
            margin-bottom: 50px;
        }

        .tupoksi-section h3 {
            font-size: 1.3rem;
            color: #0f3b2c;
            margin-bottom: 20px;
        }

        .tupoksi-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .tugas-box, .fungsi-box {
            background: white;
            border-radius: 20px;
            padding: 25px;
        }

        .tugas-box h4, .fungsi-box h4 {
            color: #1a5f4b;
            margin-bottom: 15px;
        }

        .fungsi-list {
            list-style: none;
        }

        .fungsi-list li {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
            color: #475569;
        }

        .fungsi-list li i {
            color: #1a5f4b;
            margin-top: 3px;
        }

        /* ========== 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 ========== */
        @media (max-width: 1024px) {
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }
        }

        @media (max-width: 768px) {
            .header {
                padding: 12px 20px;
            }
            .header-content {
                flex-direction: column;
                text-align: center;
            }
            .header-actions {
                justify-content: center;
            }
            .hero-text h1 {
                font-size: 2rem;
            }
            .hero-container {
                flex-direction: column;
                text-align: center;
            }
            .hero-image img {
                width: 180px;
                height: 240px;
            }
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .tupoksi-grid {
                grid-template-columns: 1fr;
            }
            .org-row {
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }
            .org-card {
                min-width: 260px;
                max-width: 280px;
            }
            .org-avatar {
                width: 80px;
                height: 80px;
            }
            .org-avatar i {
                font-size: 35px;
            }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
            .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-premium::after {
                font-size: 60px;
            }
            .menu-item .tooltip {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .header {
                padding: 10px 15px;
            }
            .logo-text h2 {
                font-size: 0.8rem;
            }
            .logo-icon {
                width: 38px;
                height: 38px;
            }
            .header-icon, .back-btn {
                width: 34px;
                height: 34px;
                font-size: 0.9rem;
            }
            .hero-text h1 {
                font-size: 1.5rem;
            }
            .hero-image img {
                width: 150px;
                height: 200px;
            }
            .hero-section {
                padding: 40px 15px;
            }
            .container {
                padding: 30px 15px;
            }
            .tentang-card {
                padding: 20px;
            }
            .struktur-section {
                padding: 20px;
            }
            .tupoksi-section {
                padding: 20px;
            }
            .org-card {
                min-width: 220px;
                padding: 15px;
            }
            .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;
            }
        }

        /* ===== PENGERTIAN STRUKTUR ===== */
.pengertian-struktur {
    background: #f8fafc;
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 30px;
    border: 1px solid #eef2f5;
    transition: all 0.3s ease;
}

.pengertian-struktur:hover {
    border-color: #1a5f4b;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.pengertian-struktur h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f3b2c;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pengertian-struktur h4 i {
    color: #f5c542;
    font-size: 1.3rem;
}

.pengertian-struktur p {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.pengertian-struktur p strong {
    color: #0f3b2c;
}

.pengertian-struktur .tahun-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a5f4b;
    color: white;
    padding: 5px 18px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
    transition: all 0.3s ease;
}

.pengertian-struktur .tahun-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26,95,75,0.2);
}

.pengertian-struktur .tahun-info i {
    font-size: 0.8rem;
}

.pengertian-struktur .tahun-info:last-child {
    background: #f5c542;
    color: #0f3b2c;
}

.pengertian-struktur .tahun-info:last-child:hover {
    background: #eab308;
    box-shadow: 0 4px 12px rgba(245,197,66,0.3);
}

/* ===== RESPONSIVE PENGERTIAN STRUKTUR ===== */
@media (max-width: 768px) {
    .pengertian-struktur {
        padding: 20px 18px;
    }

    .pengertian-struktur h4 {
        font-size: 1.05rem;
    }

    .pengertian-struktur p {
        font-size: 0.88rem;
    }

    .pengertian-struktur .tahun-info {
        font-size: 0.65rem;
        padding: 4px 14px;
        margin-top: 5px;
    }
}

@media (max-width: 480px) {
    .pengertian-struktur {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .pengertian-struktur h4 {
        font-size: 0.95rem;
    }

    .pengertian-struktur p {
        font-size: 0.82rem;
        line-height: 1.6;
    }

    .pengertian-struktur .tahun-info {
        font-size: 0.6rem;
        padding: 3px 12px;
    }
}

/* ===== PENJELASAN STRUKTUR ===== */
.penjelasan-struktur {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #eef2f5;
}

.penjelasan-struktur h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f3b2c;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.penjelasan-struktur h4 i {
    color: #f5c542;
    font-size: 1.2rem;
}

.penjelasan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.penjelasan-item {
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 20px;
    border: 1px solid #eef2f5;
    transition: all 0.3s ease;
}

.penjelasan-item:hover {
    border-color: #1a5f4b;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.penjelasan-item .icon-box {
    width: 42px;
    height: 42px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.penjelasan-item:hover .icon-box {
    background: #1a5f4b;
}

.penjelasan-item:hover .icon-box i {
    color: white;
}

.penjelasan-item .icon-box i {
    color: #1a5f4b;
    font-size: 18px;
    transition: all 0.3s ease;
}

.penjelasan-item h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f3b2c;
    margin-bottom: 5px;
}

.penjelasan-item p {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ===== TUPOKSI ===== */
.tupoksi-section {
    background: white;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #e8edf2;
}

.tupoksi-section h3 {
    font-size: 1.3rem;
    color: #0f3b2c;
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

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

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

.tugas-box, .fungsi-box {
    background: #f8fafc;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #eef2f5;
    transition: all 0.3s ease;
}

.tugas-box:hover, .fungsi-box:hover {
    border-color: #1a5f4b;
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.tugas-box h4, .fungsi-box h4 {
    color: #1a5f4b;
    margin-bottom: 12px;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tugas-box p {
    color: #475569;
    line-height: 1.7;
    font-size: 0.92rem;
    margin-bottom: 0;
}

.fungsi-list {
    list-style: none;
    padding: 0;
}

.fungsi-list li {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.5;
}

.fungsi-list li:last-child {
    margin-bottom: 0;
}

.fungsi-list li i {
    color: #1a5f4b;
    margin-top: 3px;
    flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .penjelasan-grid {
        grid-template-columns: 1fr;
    }
    .tupoksi-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .penjelasan-struktur {
        margin-top: 20px;
        padding-top: 18px;
    }

    .penjelasan-struktur h4 {
        font-size: 1rem;
    }

    .penjelasan-item {
        padding: 15px 16px;
    }

    .penjelasan-item h5 {
        font-size: 0.88rem;
    }

    .penjelasan-item p {
        font-size: 0.78rem;
    }

    .penjelasan-item .icon-box {
        width: 36px;
        height: 36px;
    }

    .penjelasan-item .icon-box i {
        font-size: 16px;
    }

    .tupoksi-section {
        padding: 25px 20px;
    }

    .tupoksi-section h3 {
        font-size: 1.1rem;
    }

    .tugas-box, .fungsi-box {
        padding: 18px 16px;
    }

    .tugas-box h4, .fungsi-box h4 {
        font-size: 0.95rem;
    }

    .tugas-box p {
        font-size: 0.85rem;
    }

    .fungsi-list li {
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .penjelasan-item {
        padding: 12px 14px;
        border-radius: 10px;
    }

    .penjelasan-item .icon-box {
        width: 32px;
        height: 32px;
    }

    .penjelasan-item .icon-box i {
        font-size: 14px;
    }

    .penjelasan-item h5 {
        font-size: 0.82rem;
    }

    .penjelasan-item p {
        font-size: 0.75rem;
    }

    .tupoksi-section {
        padding: 18px 15px;
        border-radius: 16px;
    }

    .tupoksi-section h3 {
        font-size: 1rem;
    }

    .tugas-box, .fungsi-box {
        padding: 15px 12px;
        border-radius: 12px;
    }

    .tugas-box h4, .fungsi-box h4 {
        font-size: 0.85rem;
    }

    .tugas-box p {
        font-size: 0.8rem;
    }

    .fungsi-list li {
        font-size: 0.78rem;
    }
}
    </style>
</head>
<body>

<!-- HEADER PREMIUM DENGAN TOOLTIP -->
<div class="header">
    <div class="header-content">
        <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">
            <!-- Struktur -->
            <div class="menu-item">
                <a href="#struktur-kearsipan" class="header-icon">
                    <i class="fas fa-user-circle"></i>
                </a>
                <span class="tooltip">Struktur</span>
                
            </div>
            <!-- Kembali -->
            <div class="menu-item">
                <a href="dashboard.php" class="back-btn">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <span class="tooltip">Kembali</span>
            </div>
        </div>
    </div>
</div>

<!-- WAJAH INSTANSI (HERO) -->
<section class="hero-section">
    <div class="hero-container">
        <div class="hero-text" data-aos="fade-right">
            <div class="badge">PROFIL INSTANSI</div>
            <h1>Dinas <span>Kearsipan</span><br>Solok<span>Selatan</span></h1>
            <p class="visi-statement">"Menjadi pusat literasi modern dan pelestari memori kolektif yang inklusif, inovatif, dan berdaya guna bagi seluruh masyarakat Solok Selatan."</p>
        </div>
        <div class="hero-image" data-aos="fade-left">
            <div class="portrait-card">
                <?php if(file_exists("img/kepala.png")): ?>
                    <img src="img/kepala.png" alt="Kepala Dinas" class="portrait-image">
                <?php else: ?>
                    <div class="portrait-empty">
                        <i class="fas fa-user-tie"></i>
                    </div>
                <?php endif; ?>
                <div class="portrait-info">
                    <div class="instansi">DINAS KEARSIPAN DAN PERPUSTAKAAN</div>
                    <h3>SYAMSURIA, S.Pd., MM</h3>
                    <p class="jabatan">Kepala Dinas</p>
                    <p class="nip">NIP. 19700101 199001 1 001</p>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="container">
    
        <!-- ===== PENGERTIAN STRUKTUR ===== -->
        <div class="pengertian-struktur">
            <h4><i class="fas fa-sitemap"></i> Pengertian Struktur Organisasi</h4>
            <p><strong>Struktur Organisasi</strong> adalah susunan komponen-komponen (unit-unit kerja) dalam organisasi yang menunjukkan adanya pembagian tugas dan fungsi, serta hubungan kerja antar unit dalam mencapai tujuan organisasi. Struktur organisasi menggambarkan hierarki, wewenang, tanggung jawab, dan koordinasi antar bagian dalam suatu instansi.</p>
            <p>Dinas Perpustakaan dan Arsip Daerah Kabupaten Solok Selatan memiliki struktur organisasi yang terdiri dari:</p>
            <div style="margin-top:10px;">
                <span class="tahun-info"><i class="fas fa-calendar-alt"></i> Ditetapkan Tahun 2026 dan Masa Jabatan </span>
                <span class="tahun-info" style="background:#f5c542; color:#0f3b2c; margin-left:8px;"><i class="fas fa-file-alt"></i> Perda No. 7 Tahun 2016</span>
            </div>
        </div>

    <!-- STRUKTUR BIDANG KEARSIPAN -->
    <div id="struktur-kearsipan" class="struktur-section" data-aos="fade-up">
        <div class="section-title">
            <h2>Struktur Bidang Kearsipan</h2>
            <div class="line"></div>
            <p class="subtitle">Bagan Organisasi Bidang Kearsipan Kabupaten Solok Selatan</p>
        </div>

        <div class="struktur-manual">
            <!-- KEPALA BIDANG KEARSIPAN -->
            <div class="org-node top">
                <div class="org-card kepala-bidang">
                    <div class="org-avatar">
                        <?php if(file_exists("img/pak_ridwan.jpeg")): ?>
                            <img src="img/pak_ridwan.jpeg" alt="Kepala Bidang Kearsipan">
                        <?php else: ?>
                            <i class="fas fa-user-tie"></i>
                        <?php endif; ?>
                    </div>
                    <h4>RIDWAN, S.Pd., MM</h4>
                    <p class="jabatan">KEPALA BIDANG KEARSIPAN</p>
                    <p class="nip">NIP. 19711021 199501 1 001</p>
                </div>
            </div>

            <div class="org-line-vertical"></div>

            <!-- ARSIPARIS AHLI MUDA -->
            <div class="org-node">
                <div class="org-card">
                    <div class="org-avatar">
                        <?php if(file_exists("img/if.png")): ?>
                            <img src="img/if.png" alt="Arsiparis Ahli Muda">
                        <?php else: ?>
                            <i class="fas fa-user-circle"></i>
                        <?php endif; ?>
                    </div>
                    <h4>GUS IFRIANI, SP</h4>
                    <p class="jabatan">ARSIPARIS AHLI MUDA</p>
                    <p class="nip">NIP. 19760804 200501 2 004</p>
                </div>
            </div>

            <div class="org-line-vertical"></div>

            <div class="org-line-horizontal">
                <div class="line-h"></div>
            </div>

            <!-- PENELAAH TEKNIS (3 Kolom) -->
            <div class="org-row">
                <div class="org-card">
                    <div class="org-avatar">
                        <?php if(file_exists("img/bunda.png")): ?>
                            <img src="img/bunda.png" alt="Penelaah Teknis Kebijakan">
                        <?php else: ?>
                            <i class="fas fa-user-check"></i>
                        <?php endif; ?>
                    </div>
                    <h4>HIJRI SYAFRI, S.Kom</h4>
                    <p class="jabatan">PENELAAH TEKNIS KEBIJAKAN</p>
                    <p class="nip">NIP. 19780228 201101 2 004</p>
                </div>

                <div class="org-card">
                    <div class="org-avatar">
                        <?php if(file_exists("img/peri.png")): ?>
                            <img src="img/peri.png" alt="Penelaah Teknis Kebijakan">
                        <?php else: ?>
                            <i class="fas fa-user-check"></i>
                        <?php endif; ?>
                    </div>
                    <h4>PERI INDRA, SE</h4>
                    <p class="jabatan">PENELAAH TEKNIS KEBIJAKAN</p>
                    <p class="nip">NIP. 19830322 201101 1 003</p>
                </div>

                <div class="org-card">
                    <div class="org-avatar">
                        <?php if(file_exists("img/peri.jpg")): ?>
                            <img src="img/peri.jpg" alt="Pengelola Data">
                        <?php else: ?>
                            <i class="fas fa-user-check"></i>
                        <?php endif; ?>
                    </div>
                    <h4>YESINILA YUNARA, A.Md</h4>
                    <p class="jabatan">PENGELOLA DATA DAN INFORMASI</p>
                    <p class="nip">NIP. 19861119 202521 2 051</p>
                </div>
            </div>
        </div>
    </div>

         <!-- ===== PENJELASAN STRUKTUR ===== -->
        <div class="penjelasan-struktur">
            <h4><i class="fas fa-list-ul"></i> Penjelasan Struktur Organisasi</h4>
            <div class="penjelasan-grid">
                <div class="penjelasan-item">
                    <div class="icon-box"><i class="fas fa-user-tie"></i></div>
                    <h5>Kepala Dinas</h5>
                    <p>Pemimpin tertinggi Dinas yang bertanggung jawab atas keseluruhan pelaksanaan tugas dan fungsi Dinas Perpustakaan dan Arsip Daerah.</p>
                </div>
                <div class="penjelasan-item">
                    <div class="icon-box"><i class="fas fa-user-circle"></i></div>
                    <h5>Sekretaris</h5>
                    <p>Bertanggung jawab atas koordinasi, administrasi, dan pengelolaan kepegawaian serta urusan umum di lingkungan Dinas.</p>
                </div>
                <div class="penjelasan-item">
                    <div class="icon-box"><i class="fas fa-archive"></i></div>
                    <h5>Bidang Kearsipan</h5>
                    <p>Bertanggung jawab atas pengelolaan, pembinaan, dan pengawasan kearsipan di Kabupaten Solok Selatan.</p>
                </div>
                <div class="penjelasan-item">
                    <div class="icon-box"><i class="fas fa-book"></i></div>
                    <h5>Bidang Perpustakaan</h5>
                    <p>Bertanggung jawab atas pengembangan, pembinaan, dan pengelolaan perpustakaan di Kabupaten Solok Selatan.</p>
                </div>
                <div class="penjelasan-item">
                    <div class="icon-box"><i class="fas fa-users-cog"></i></div>
                    <h5>Subbagian Umum & Kepegawaian</h5>
                    <p>Mengelola administrasi umum, kepegawaian, dan mendukung kelancaran operasional Dinas.</p>
                </div>
                <div class="penjelasan-item">
                    <div class="icon-box"><i class="fas fa-chart-line"></i></div>
                    <h5>Kelompok Jabatan Fungsional</h5>
                    <p>Tenaga fungsional yang melaksanakan tugas teknis di bidang perpustakaan dan kearsipan.</p>
                </div>
                <div class="penjelasan-item">
                    <div class="icon-box"><i class="fas fa-building"></i></div>
                    <h5>UPTD</h5>
                    <p>Unit Pelaksana Teknis Daerah yang melaksanakan pelayanan teknis operasional di lapangan.</p>
                </div>
                <div class="penjelasan-item">
                    <div class="icon-box"><i class="fas fa-users"></i></div>
                    <h5>Staf Pelaksana</h5>
                    <p>Tenaga pelaksana yang mendukung kelancaran tugas dan fungsi setiap bidang di Dinas.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- ========== TUPOKSI ========== -->
    <div class="tupoksi-section" data-aos="fade-up">
        <h3><i class="fas fa-tasks"></i> Tugas Pokok dan Fungsi</h3>
        <div class="tupoksi-grid">
            <div class="tugas-box">
                <h4><i class="fas fa-bullseye"></i> Tugas Pokok</h4>
                <p>Membantu Bupati dalam melaksanakan fungsi penunjang urusan pemerintah bidang perpustakaan dan kearsipan serta tugas pembantuan yang diberikan kepada daerah.</p>
            </div>
            <div class="fungsi-box">
                <h4><i class="fas fa-cogs"></i> Penyelenggaraan Fungsi</h4>
                <ul class="fungsi-list">
                    <li><i class="fas fa-check-circle"></i> Perumusan kebijakan bidang perpustakaan dan bidang kearsipan;</li>
                    <li><i class="fas fa-check-circle"></i> Pelaksanaan kebijakan bidang perpustakaan dan kearsipan;</li>
                    <li><i class="fas fa-check-circle"></i> Pelaksanaan evaluasi dan pelaporan bidang perpustakaan dan kearsipan;</li>
                    <li><i class="fas fa-check-circle"></i> Pelaksanaan administrasi dinas bidang perpustakaan dan kearsipan;</li>
                    <li><i class="fas fa-check-circle"></i> Pelaksanaan fungsi lain yang diberikan oleh Bupati terkait tugas dan fungsi lainnya.</li>
                </ul>
            </div>
        </div>
    </div>

</div>


<!-- ========== FOOTER PREMIUM ========== -->
<footer class="footer-premium">
    <div class="footer-container">
        <div class="footer-grid">
            <div class="footer-col" data-aos="fade-up">
                <div class="footer-logo">
                    <div class="logo-icon">
                        <?php if(file_exists("img/logo.png")): ?>
                            <img src="img/logo.png" 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"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://www.instagram.com/arsip_solsel/" class="social-icon social-ig" target="_blank"><i class="fab fa-instagram"></i></a>
                    <a href="https://www.youtube.com/@pustakadpksolsel" class="social-icon social-yt"><i class="fab fa-youtube"></i></a>
                    <a href="https://www.tiktok.com/@solselnews" class="social-icon social-tt"><i class="fab fa-tiktok"></i></a>
                </div>
            </div>

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

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

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

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

<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>