<?php $__env->startSection('title', 'Beranda'); ?>

<?php $__env->startSection('style'); ?>
    <style>
        body {
            background: #e8e4d9;
            color: #4a3728;

        .container-main {
            display: block;
            padding: 0;
        }

        /* Hero Section */
        .landing-hero {
            position: relative;
            min-height: 80vh;
            display: flex;
            align-items: center;
            padding: 5rem 0;
            background: radial-gradient(circle at 10% 20%, rgba(253, 246, 227, 0.4) 0%, rgba(250, 248, 244, 0.9) 100%),
                linear-gradient(135deg, #e8e4d9 0%, #e6ddc5 100%);
            overflow: hidden;
        }

        /* Decorative Glowing Blobs */
        .hero-blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.15;
            z-index: 1;
        }

        .blob-1 {
            top: -10%;
            left: -10%;
            width: 500px;
            height: 500px;
            background: #f0c040;
            /* Sky 400 */
        }

        .blob-2 {
            bottom: -20%;
            right: -10%;
            width: 600px;
            height: 600px;
            background: #c9930a;
            /* Indigo 500 */
        }

        .hero-container {
            position: relative;
            z-index: 2;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(212, 160, 23, 0.1);
            border: 1px solid rgba(212, 160, 23, 0.2);
            color: #b8860b;
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 0.875rem;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .hero-title {
            font-size: 3.25rem;
            font-weight: 800;
            line-height: 1.15;
            color: #4a3728;
            margin-bottom: 1.5rem;
            letter-spacing: -0.02em;
        }

        .hero-title span {
            background: linear-gradient(to right, #f0c040, #e0b030);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-lead {
            font-size: 1.125rem;
            color: #4a3728;
            margin-bottom: 2.5rem;
            line-height: 1.75;
            max-width: 640px;
        }

        /* Glassmorphic Portal Card */
        .hero-portal-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(212, 160, 23, 0.2);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .hero-portal-card:hover {
            border-color: rgba(14, 165, 233, 0.25);
        }

        .portal-avatar-wrapper {
            position: relative;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .portal-avatar {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, #d4a017, #c9930a);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: #f4f1e9;
            font-weight: 700;
        }

        .portal-status-dot {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 14px;
            height: 14px;
            background-color: #10b981;
            border: 2px solid #f4f1e9;
            border-radius: 50%;
        }

        .portal-btn {
            padding: 0.875rem 1.5rem;
            border-radius: 12px;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
        }

        .portal-btn-primary {
            background: linear-gradient(135deg, #d4a017 0%, #b8860b 100%);
            border: none;
            color: #f4f1e9;
            box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
        }

        .portal-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(14, 165, 233, 0.55);
            color: #f4f1e9;
        }

        .portal-btn-secondary {
            background: #f4f1e9;
            border: 1px solid rgba(0, 0, 0, 0.1);
            color: #4a3728;
        }

        .portal-btn-secondary:hover {
            background: #e8e4d9;
            border-color: rgba(0, 0, 0, 0.2);
            color: #d4a017;
            transform: translateY(-2px);
        }

        /* Statistics Section */
        .stats-section {
            position: relative;
            margin-top: -4rem;
            margin-bottom: 4rem;
            z-index: 10;
        }

        .stats-card {
            background: #f4f1e9;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 16px;
            padding: 1.75rem 2rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            gap: 1.25rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(14, 165, 233, 0.15);
            border-color: rgba(14, 165, 233, 0.15);
        }

        .stats-icon-box {
            width: 56px;
            height: 56px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .stats-icon-1 {
            background: rgba(212, 160, 23, 0.1);
            color: #b8860b;
        }

        .stats-icon-2 {
            background: rgba(168, 85, 247, 0.1);
            color: #9333ea;
        }

        .stats-icon-3 {
            background: rgba(236, 72, 153, 0.1);
            color: #db2777;
        }

        .stats-num {
            font-size: 2rem;
            font-weight: 800;
            color: #4a3728;
            line-height: 1.2;
        }

        .stats-label {
            font-size: 0.875rem;
            color: #6c757d;
            font-weight: 500;
        }

        /* Common Section Styles */
        .landing-section {
            padding: 6rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .section-title-wrap {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 4rem;
        }

        .section-pretitle {
            color: #b8860b;
            font-weight: 700;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.75rem;
            display: block;
        }

        .section-title-text {
            font-size: 2.25rem;
            font-weight: 800;
            color: #4a3728;
            margin-bottom: 1rem;
        }

        .section-subtitle-text {
            color: #6c757d;
            font-size: 1.05rem;
            line-height: 1.6;
        }

        /* Features Cards */
        .feature-card {
            background: #f4f1e9;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 16px;
            padding: 2.25rem;
            height: 100%;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .feature-card:hover {
            transform: translateY(-5px);
            background: #e8e4d9;
            border-color: rgba(212, 160, 23, 0.2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .feature-icon-box {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            margin-bottom: 1.5rem;
        }

        .feature-icon-1 {
            background: rgba(212, 160, 23, 0.1);
            color: #b8860b;
        }

        .feature-icon-2 {
            background: rgba(16, 185, 129, 0.1);
            color: #059669;
        }

        .feature-icon-3 {
            background: rgba(245, 158, 11, 0.1);
            color: #d97706;
        }

        .feature-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #4a3728;
            margin-bottom: 0.75rem;
        }

        .feature-desc {
            color: #6c757d;
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 0;
        }

        /* Workflow step styles */
        .workflow-timeline {
            position: relative;
        }

        .workflow-item {
            position: relative;
            background: #f4f1e9;
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 16px;
            padding: 1.75rem;
            display: flex;
            gap: 1.25rem;
            transition: border-color 0.3s ease;
        }

        .workflow-item:hover {
            border-color: rgba(212, 160, 23, 0.2);
        }

        .workflow-num {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #d4a017, #b8860b);
            color: #f4f1e9;
            font-weight: 800;
            font-size: 1.15rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 40px;
            box-shadow: 0 0 15px rgba(212, 160, 23, 0.4);
        }

        .workflow-info h5 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #4a3728;
            margin-bottom: 0.35rem;
        }

        .workflow-info p {
            color: #6c757d;
            font-size: 0.925rem;
            line-height: 1.5;
            margin-bottom: 0;
        }

        /* FAQ Section */
        .faq-accordion .accordion-item {
            background-color: #f4f1e9;
            border: 1px solid rgba(0, 0, 0, 0.05);
            margin-bottom: 1rem;
            border-radius: 12px !important;
            overflow: hidden;
        }

        .faq-accordion .accordion-button {
            background-color: transparent;
            color: #4a3728;
            font-weight: 600;
            padding: 1.25rem 1.5rem;
            box-shadow: none;
            border: none;
            text-align: left;
        }

        .faq-accordion .accordion-button:not(.collapsed) {
            background-color: #e6ddc5;
            color: #d4a017;
        }

        .faq-accordion .accordion-button::after {
            filter: none;
        }

        .faq-accordion .accordion-body {
            color: #6c757d;
            line-height: 1.6;
            padding: 1.25rem 1.5rem;
            font-size: 0.95rem;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            background-color: #e8e4d9;
        }

        @media (max-width: 991px) {
            .landing-hero {
                padding: 3rem 0;
                text-align: center;
            }

            .hero-title {
                font-size: 2.5rem;
            }

            .hero-lead {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-portal-card {
                margin-top: 2rem;
                text-align: left;
            }

            .stats-section {
                margin-top: -2rem;
            }
        }
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <!-- Hero Section -->
    <section class="landing-hero">
        <div class="hero-blob blob-1"></div>
        <div class="hero-blob blob-2"></div>

        <div class="container hero-container">
            <div class="row align-items-center">
                <!-- Hero Copy -->
                <div class="col-lg-7 text-start">
                    <div class="hero-badge animate__animated animate__fadeInDown">
                        <i class="fas fa-map-marker-alt text-info"></i> BKPSDM Kabupaten Sukabumi
                    </div>
                    <h1 class="hero-title animate__animated animate__fadeInUp">
                        Sistem Informasi Pendataan Pegawai <br>
                        <span>Jabatan Fungsional</span>
                    </h1>
                    <p class="hero-lead animate__animated animate__fadeInUp" style="animation-delay: 0.1s">
                        Platform kepegawaian modern terpusat untuk memetakan, mengumpulkan, memverifikasi,
                        serta melakukan penilaian mandiri kompetensi pegawai jabatan fungsional guna perencanaan
                        suksesi yang lebih terukur.
                    </p>
                </div>

                <!-- Hero Panel Portal -->
                <div class="col-lg-5 animate__animated animate__fadeInRight" style="animation-delay: 0.2s">
                    <div class="hero-portal-card">
                        <?php if(auth()->guard()->check()): ?>
                            <div class="text-center mb-4">
                                <div class="portal-avatar-wrapper">
                                    <div class="portal-avatar">
                                        <?php echo e(strtoupper(substr(auth()->user()->name, 0, 1))); ?>

                                    </div>
                                    <span class="portal-status-dot"></span>
                                </div>
                                <h4 class="text-dark fw-bold mb-1">Selamat Datang Kembali</h4>
                                <p class="text-secondary small mb-2"><?php echo e(auth()->user()->name); ?></p>
                                <span class="badge bg-info text-white fw-bold px-3 py-1.5 rounded-pill">
                                    <?php echo e(auth()->user()->role_label); ?>

                                </span>
                            </div>

                            <div class="d-grid gap-2">
                                <?php if(auth()->user()->isAdmin() || auth()->user()->isSuperAdmin()): ?>
                                    <a href="<?php echo e(route('admin.dashboard')); ?>" class="portal-btn portal-btn-primary">
                                        <i class="fas fa-chart-line"></i> Dashboard Admin
                                    </a>
                                <?php elseif(auth()->user()->isPegawai()): ?>
                                    <a href="<?php echo e(route('pegawai.dashboard')); ?>" class="portal-btn portal-btn-primary">
                                        <i class="fas fa-user-shield"></i> Portal Pegawai
                                    </a>
                                <?php endif; ?>
                                <form action="<?php echo e(route('logout')); ?>" method="POST" class="w-100 mt-2">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit" class="portal-btn portal-btn-secondary">
                                        <i class="fas fa-sign-out-alt text-danger"></i> Keluar dari Sesi
                                    </button>
                                </form>
                            </div>
                        <?php else: ?>
                            <h4 class="text-dark fw-bold mb-3"><i class="fas fa-fingerprint text-info me-2"></i>Akses Layanan
                            </h4>
                            <p class="text-secondary small mb-4">Silakan pilih menu di bawah ini untuk memulai pengisian
                                pendataan mandiri Anda.</p>

                            <div class="d-grid gap-3">
                                <a href="<?php echo e(route('pegawai.form')); ?>" class="portal-btn portal-btn-primary py-3">
                                    <i class="fas fa-file-signature"></i> Isi Form Pendataan Baru
                                </a>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Live Statistics Section -->
    <section class="container stats-section">
        <div class="row g-4">
            <!-- Stat 1 -->
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-icon-box stats-icon-1">
                        <i class="fas fa-users-cog"></i>
                    </div>
                    <div>
                        <div class="stats-num"><?php echo e(number_format($stats['pegawai'] ?? 0, 0, ',', '.')); ?></div>
                        <div class="stats-label">Pegawai Terdaftar</div>
                    </div>
                </div>
            </div>
            <!-- Stat 2 -->
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-icon-box stats-icon-2">
                        <i class="fas fa-sitemap"></i>
                    </div>
                    <div>
                        <div class="stats-num"><?php echo e(number_format($stats['unit_kerja'] ?? 0, 0, ',', '.')); ?></div>
                        <div class="stats-label">Unit Kerja Aktif</div>
                    </div>
                </div>
            </div>
            <!-- Stat 3 -->
            <div class="col-md-4">
                <div class="stats-card">
                    <div class="stats-icon-box stats-icon-3">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <div>
                        <div class="stats-num"><?php echo e(number_format($stats['jabatan'] ?? 0, 0, ',', '.')); ?></div>
                        <div class="stats-label">Jabatan Fungsional</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="landing-section">
        <div class="container">
            <div class="section-title-wrap">
                <span class="section-pretitle">Fitur Unggulan</span>
                <h2 class="section-title-text">Layanan Manajemen Terintegrasi</h2>
                <p class="section-subtitle-text">
                    Sistem dirancang dengan arsitektur modern untuk mendukung pelayanan administrasi yang cepat,
                    akurat, dan aman bagi pegawai jabatan fungsional.
                </p>
            </div>

            <div class="row g-4">
                <!-- Feature 1 -->
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon-box feature-icon-1">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h4 class="feature-title">Validasi Data Berjenjang</h4>
                        <p class="feature-desc">
                            Setiap data dan berkas yang dikirimkan melewati proses peninjauan ketat oleh Admin BKPSDM.
                            Pegawai menerima catatan rinci jika memerlukan perbaikan data.
                        </p>
                    </div>
                </div>
                <!-- Feature 2 -->
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon-box feature-icon-2">
                            <i class="fas fa-clipboard-check"></i>
                        </div>
                        <h4 class="feature-title">Penilaian Mandiri Kompetensi</h4>
                        <p class="feature-desc">
                            Akses mandiri bagi pegawai untuk mengisi penilaian kompetensi fungsional per tahun guna
                            melihat persentase kelayakan pengembangan karier serta rekomendasi diklat.
                        </p>
                    </div>
                </div>
                <!-- Feature 3 -->
                <div class="col-md-4">
                    <div class="feature-card">
                        <div class="feature-icon-box feature-icon-3">
                            <i class="fas fa-envelope-open-text"></i>
                        </div>
                        <h4 class="feature-title">Notifikasi Email Otomatis</h4>
                        <p class="feature-desc">
                            Informasi tanda bukti pengiriman formulir serta hasil persetujuan atau penolakan dikirimkan
                            secara realtime langsung ke alamat email pegawai yang bersangkutan.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Workflow Section -->
    <section class="landing-section" style="background-color: #e6ddc5;">
        <div class="container">
            <div class="section-title-wrap">
                <span class="section-pretitle">Panduan Proses</span>
                <h2 class="section-title-text">Alur Kerja Sistem Pendataan</h2>
                <p class="section-subtitle-text">
                    Prosedur pendataan dirancang sesederhana mungkin bagi pegawai namun tetap menjaga tingkat validitas data
                    melalui proses verifikasi terpadu.
                </p>
            </div>

            <div class="row g-4">
                <!-- Step 1 -->
                <div class="col-lg-4 col-md-6">
                    <div class="workflow-item h-100">
                        <div class="workflow-num">1</div>
                        <div class="workflow-info">
                            <h5>Akses dengan Kode Kantor</h5>
                            <p>Pegawai meminta 6 digit Kode Akses Kantor ke admin unit kerja untuk membuka form pendataan.
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Step 2 -->
                <div class="col-lg-4 col-md-6">
                    <div class="workflow-item h-100">
                        <div class="workflow-num">2</div>
                        <div class="workflow-info">
                            <h5>Pengisian Data Mandiri</h5>
                            <p>Mengisi data pribadi, jabatan fungsional, jenjang, masa kerja, serta mengunggah berkas SK
                                asli.</p>
                        </div>
                    </div>
                </div>
                <!-- Step 3 -->
                <div class="col-lg-4 col-md-6">
                    <div class="workflow-item h-100">
                        <div class="workflow-num">3</div>
                        <div class="workflow-info">
                            <h5>Validasi oleh Admin</h5>
                            <p>Tim verifikasi BKPSDM memeriksa kesesuaian berkas. Jika tidak sesuai, data akan ditolak
                                dengan alasan jelas.</p>
                        </div>
                    </div>
                </div>
                <!-- Step 4 -->
                <div class="col-lg-4 col-md-6">
                    <div class="workflow-item h-100">
                        <div class="workflow-num">4</div>
                        <div class="workflow-info">
                            <h5>Penerimaan Status & Akun</h5>
                            <p>Notifikasi email dikirimkan. Setelah data disetujui, akun portal kepegawaian akan diaktifkan
                                oleh admin.</p>
                        </div>
                    </div>
                </div>
                <!-- Step 5 -->
                <div class="col-lg-4 col-md-6">
                    <div class="workflow-item h-100">
                        <div class="workflow-num">5</div>
                        <div class="workflow-info">
                            <h5>Asesmen Mandiri & Diklat</h5>
                            <p>Pegawai login untuk melakukan penilaian mandiri kompetensi tahunan untuk rekomendasi diklat
                                pengembangan.</p>
                        </div>
                    </div>
                </div>
                <!-- Step 6 -->
                <div class="col-lg-4 col-md-6">
                    <div class="workflow-item h-100"
                        style="border: 1px dashed rgba(212, 160, 23, 0.3); background: #e6ddc5">
                        <div class="workflow-num"
                            style="background: #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);"><i
                                class="fas fa-check"></i></div>
                        <div class="workflow-info">
                            <h5>Selesai</h5>
                            <p>Data tersimpan di basis data terintegrasi Kabupaten Sukabumi untuk keperluan perencanaan
                                suksesi.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    <section class="landing-section">
        <div class="container" style="max-width: 900px;">
            <div class="section-title-wrap">
                <span class="section-pretitle">Tanya Jawab</span>
                <h2 class="section-title-text">Pertanyaan yang Sering Diajukan</h2>
                <p class="section-subtitle-text">
                    Punya pertanyaan seputar pengisian data, akses kode kantor, atau akun portal kepegawaian Anda?
                    Temukan jawabannya di bawah ini.
                </p>
            </div>

            <div class="accordion faq-accordion" id="faqAccordion">
                <!-- FAQ 1 -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingOne">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <i class="fas fa-question-circle text-info me-2"></i> Apakah pegawai harus login untuk melakukan
                            pendataan baru?
                        </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
                        data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Tidak. Pegawai tidak perlu login terlebih dahulu untuk melakukan pendataan. Anda cukup mengeklik
                            tombol
                            <strong>"Isi Form Pendataan Baru"</strong>, kemudian memasukkan <strong>Kode Akses
                                Kantor</strong> yang
                            diberikan oleh verifikator unit kerja Anda untuk mulai mengisi data.
                        </div>
                    </div>
                </div>

                <!-- FAQ 2 -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingTwo">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            <i class="fas fa-question-circle text-info me-2"></i> Bagaimana jika data pendataan saya ditolak
                            oleh Admin?
                        </button>
                    </h2>
                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                        data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Jika ada data atau berkas yang tidak sesuai, Admin BKPSDM akan menolak pengajuan tersebut dan
                            memberikan catatan
                            perbaikan yang jelas. Anda akan secara otomatis menerima notifikasi email yang berisi
                            <strong>link khusus bertanda tangan
                                (signed URL)</strong> untuk mengakses kembali data Anda dan melakukan perbaikan tanpa perlu
                            mengisi dari awal.
                        </div>
                    </div>
                </div>

                <!-- FAQ 3 -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingThree">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            <i class="fas fa-question-circle text-info me-2"></i> Mengapa akun portal pegawai saya tidak
                            bisa login?
                        </button>
                    </h2>
                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
                        data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Akses login portal pegawai hanya ditujukan untuk pegawai fungsional yang datanya telah
                            <strong>disetujui (diverifikasi)</strong>
                            oleh Admin BKPSDM. Setelah data disetujui, Admin akan membuatkan akun portal untuk Anda,
                            kemudian detail masuk (email &
                            password default) akan dikirimkan langsung ke email pribadi Anda yang terdaftar.
                        </div>
                    </div>
                </div>

                <!-- FAQ 4 -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingFour">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                            <i class="fas fa-question-circle text-info me-2"></i> Apa itu Kode Akses Kantor dan di mana saya
                            bisa mendapatkannya?
                        </button>
                    </h2>
                    <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
                        data-bs-parent="#faqAccordion">
                        <div class="accordion-body">
                            Kode Akses Kantor adalah 6 digit kode keamanan unik yang dibuat oleh admin dinas/BKPSDM untuk
                            memverifikasi
                            bahwa Anda adalah pegawai yang benar-benar bekerja di unit kerja tersebut. Anda dapat meminta
                            kode ini kepada
                            pejabat pengelola kepegawaian atau kepala sub bagian kepegawaian di unit kerja instansi
                            masing-masing.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\Skripsi-M\resources\views/public/landing.blade.php ENDPATH**/ ?>