<?php
session_start();
require_once '../includes/config.php';
require_once '../includes/functions.php';

// Cek apakah user sudah login dan memiliki role reviewer
if (!isset($_SESSION['user_id']) || $_SESSION['user_role'] != 'reviewer') {
    header('Location: ../login.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Panduan Review - SOCA OSCE System</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* ===== RESET & BASE ===== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f4f8; display: flex; min-height: 100vh; }

        /* ===== SIDEBAR ===== */
        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, #1a2332 0%, #0f1724 100%);
            color: #fff;
            padding: 0;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            z-index: 100;
            transition: all 0.3s ease;
            box-shadow: 4px 0 20px rgba(0,0,0,0.1);
        }
        .sidebar::-webkit-scrollbar { width: 4px; }
        .sidebar::-webkit-scrollbar-track { background: transparent; }
        .sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

        .sidebar-header { padding: 25px 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: center; }
        .sidebar-header h2 { font-size: 20px; font-weight: 700; letter-spacing: 1px; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .sidebar-header p { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; letter-spacing: 2px; text-transform: uppercase; }

        .sidebar-menu { list-style: none; padding: 15px 0; }
        .sidebar-menu li { margin: 2px 12px; }
        .sidebar-menu li a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: rgba(255,255,255,0.6); text-decoration: none; border-radius: 12px; transition: all 0.3s ease; font-size: 14px; font-weight: 500; }
        .sidebar-menu li a i { width: 20px; font-size: 16px; text-align: center; }
        .sidebar-menu li a:hover { background: rgba(255,255,255,0.08); color: #fff; transform: translateX(4px); }
        .sidebar-menu li a.active { background: linear-gradient(135deg, rgba(96,165,250,0.2), rgba(167,139,250,0.2)); color: #60a5fa; box-shadow: inset 3px 0 0 #60a5fa; }
        .sidebar-menu .menu-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 12px 20px; }
        .sidebar-menu .menu-label { padding: 10px 20px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.25); font-weight: 600; }

        /* ===== MAIN CONTENT ===== */
        .main-content { margin-left: 260px; flex: 1; padding: 30px 35px 40px; min-height: 100vh; }

        /* ===== HEADER ===== */
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; }
        .header-left h1 { font-size: 28px; font-weight: 700; color: #1a2332; letter-spacing: -0.5px; }
        .header-left .subtitle { font-size: 14px; color: #6b7a8f; margin-top: 4px; }
        .header-right { display: flex; align-items: center; gap: 15px; }
        .header-right .user-badge { display: flex; align-items: center; gap: 10px; background: #fff; padding: 8px 16px 8px 12px; border-radius: 50px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
        .header-right .user-badge .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #60a5fa, #a78bfa); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 16px; }
        .header-right .user-badge .user-name { font-weight: 600; font-size: 14px; color: #1a2332; }
        .header-right .user-badge .user-role { font-size: 12px; color: #6b7a8f; }
        .btn-logout { background: #fee2e2; color: #dc2626; border: none; padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
        .btn-logout:hover { background: #fecaca; transform: scale(1.02); }

        /* ===== PANDUAN CONTAINER ===== */
        .panduan-container { background: #fff; border-radius: 16px; padding: 30px 32px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); margin-bottom: 25px; }

        .panduan-header { text-align: center; margin-bottom: 35px; padding-bottom: 25px; border-bottom: 2px solid #e2e8f0; }
        .panduan-header h2 { font-size: 26px; font-weight: 700; color: #1a2332; display: flex; align-items: center; justify-content: center; gap: 12px; }
        .panduan-header h2 i { color: #60a5fa; }
        .panduan-header p { color: #6b7a8f; margin-top: 8px; font-size: 15px; }

        .panduan-section { margin-bottom: 40px; }
        .panduan-section:last-child { margin-bottom: 0; }

        .section-title { font-size: 18px; font-weight: 600; color: #1a2332; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #f1f5f9; display: flex; align-items: center; gap: 10px; }
        .section-title i { color: #60a5fa; }

        /* ===== GUIDELINE LIST ===== */
        .guideline-list { list-style: none; padding: 0; }
        .guideline-item { background: #f8fafc; margin-bottom: 12px; padding: 18px 22px; border-radius: 12px; border-left: 4px solid #60a5fa; transition: all 0.3s ease; display: flex; align-items: flex-start; gap: 15px; }
        .guideline-item:hover { transform: translateX(5px); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }

        .guideline-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; border-radius: 50%; font-weight: 700; font-size: 13px; flex-shrink: 0; margin-top: 2px; }
        .guideline-content h4 { font-size: 15px; font-weight: 600; color: #1a2332; margin-bottom: 4px; }
        .guideline-content p { font-size: 14px; color: #6b7a8f; line-height: 1.6; margin: 0; }

        /* ===== CRITERIA GRID ===== */
        .criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 16px; }
        .criteria-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 0.3s ease; }
        .criteria-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #60a5fa; }
        .criteria-card h5 { font-size: 15px; font-weight: 600; color: #1a2332; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
        .criteria-card h5 i { color: #60a5fa; }
        .criteria-list { list-style: none; padding: 0; }
        .criteria-list li { padding: 6px 0; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #475569; }
        .criteria-list li:last-child { border-bottom: none; }
        .criteria-list li i { color: #059669; font-size: 14px; width: 18px; }

        /* ===== WORKFLOW ===== */
        .workflow-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
        .workflow-step { display: flex; gap: 16px; align-items: flex-start; }
        .step-number { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; border-radius: 50%; font-weight: 700; flex-shrink: 0; font-size: 14px; }
        .step-content { flex: 1; background: #f8fafc; padding: 16px 20px; border-radius: 10px; border-left: 4px solid #60a5fa; }
        .step-content h5 { font-size: 14px; font-weight: 600; color: #1a2332; margin-bottom: 4px; }
        .step-content p { font-size: 14px; color: #6b7a8f; line-height: 1.6; margin: 0; }

        /* ===== ALERT INFO ===== */
        .alert-info { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 20px 24px; margin: 16px 0; }
        .alert-info h4 { font-size: 15px; font-weight: 600; color: #1e40af; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
        .alert-info h4 i { color: #2563eb; }
        .alert-info p { font-size: 14px; color: #475569; line-height: 1.6; margin: 0; }

        /* ===== QUICK ACTIONS ===== */
        .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 16px; }
        .action-card { background: #fff; border: 2px solid #e2e8f0; border-radius: 12px; padding: 20px; text-align: center; text-decoration: none; color: inherit; transition: all 0.3s ease; }
        .action-card:hover { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; transform: translateY(-4px); box-shadow: 0 8px 30px rgba(37,99,235,0.25); border-color: transparent; }
        .action-card .action-icon { font-size: 32px; margin-bottom: 10px; color: #60a5fa; transition: color 0.3s; }
        .action-card:hover .action-icon { color: #fff; }
        .action-card .action-title { font-size: 14px; font-weight: 600; }
        .action-card p { font-size: 12px; color: #6b7a8f; margin: 4px 0 0 0; transition: color 0.3s; }
        .action-card:hover p { color: rgba(255,255,255,0.8); }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 992px) { .sidebar { width: 220px; } .main-content { margin-left: 220px; padding: 20px; } }
        @media (max-width: 768px) { 
            .sidebar { width: 0; transform: translateX(-100%); } 
            .sidebar.open { width: 280px; transform: translateX(0); } 
            .main-content { margin-left: 0; padding: 15px; } 
            .header { flex-direction: column; align-items: flex-start; } 
            .panduan-container { padding: 20px; } 
            .panduan-header h2 { font-size: 20px; flex-direction: column; } 
            .workflow-step { flex-direction: column; } 
            .step-number { align-self: flex-start; } 
            .criteria-grid { grid-template-columns: 1fr; } 
            .quick-actions { grid-template-columns: 1fr 1fr; } 
            .guideline-item { flex-direction: column; align-items: flex-start; gap: 10px; } 
        }
        @media (max-width: 480px) { .quick-actions { grid-template-columns: 1fr; } }

        .hamburger { display: none; background: none; border: none; font-size: 24px; color: #1a2332; cursor: pointer; padding: 8px; }
        @media (max-width: 768px) { .hamburger { display: block; } }

        .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; }
        .sidebar-overlay.active { display: block; }

        .scroll-top { position: fixed; bottom: 30px; right: 30px; background: #2563eb; color: #fff; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; font-size: 18px; box-shadow: 0 4px 16px rgba(37,99,235,0.3); transition: all 0.3s ease; opacity: 0; visibility: hidden; z-index: 50; }
        .scroll-top.visible { opacity: 1; visibility: visible; }
        .scroll-top:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(37,99,235,0.4); }
    </style>
</head>
<body>
    <!-- Overlay untuk mobile -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h2>SOCA/OSCE</h2>
            <p>Reviewer Panel</p>
        </div>
        <ul class="sidebar-menu">
            <li class="menu-label">Main Menu</li>
            <li><a href="dashboard_reviewer.php"><i class="fas fa-th-large"></i> Dashboard</a></li>
            
            <li class="menu-divider"></li>
            <li class="menu-label">Review</li>
            <li><a href="review_soal_teori_s1.php"><i class="fas fa-book-open"></i> Review Soal Teori S1</a></li>
            <li><a href="review_soal_teori.php"><i class="fas fa-book"></i> Review Soal Teori Profesi</a></li>
            <li><a href="review_soal_praktik.php"><i class="fas fa-clipboard-check"></i> Review Soal Praktik</a></li>
            <li><a href="review_aspek_penilaian.php"><i class="fas fa-eye"></i> Preview Aspek Penilaian</a></li>
            
            <li class="menu-divider"></li>
            <li><a href="riwayat_review.php"><i class="fas fa-history"></i> Riwayat Review</a></li>
            <li><a href="panduan_review.php" class="active"><i class="fas fa-book"></i> Panduan Review</a></li>
            <li><a href="../logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Header -->
        <div class="header">
            <div class="header-left">
                <button class="hamburger" id="hamburgerBtn">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>Panduan Review</h1>
                <div class="subtitle">Standar dan pedoman untuk melakukan review soal yang berkualitas</div>
            </div>
            <div class="header-right">
                <div class="user-badge">
                    <div class="avatar">
                        <?php echo strtoupper(substr($_SESSION['user_name'] ?? 'R', 0, 1)); ?>
                    </div>
                    <div>
                        <div class="user-name"><?php echo $_SESSION['user_name'] ?? 'Reviewer'; ?></div>
                        <div class="user-role">Reviewer</div>
                    </div>
                </div>
                <a href="../logout.php" class="btn-logout">
                    <i class="fas fa-sign-out-alt"></i> Logout
                </a>
            </div>
        </div>

        <div class="panduan-container">
            <!-- Header -->
            <div class="panduan-header">
                <h2><i class="fas fa-graduation-cap"></i> Pedoman Review Soal SOCA OSCE</h2>
                <p>Standar dan panduan untuk melakukan review soal yang berkualitas</p>
            </div>

            <!-- Alert Info -->
            <div class="alert-info">
                <h4><i class="fas fa-info-circle"></i> Informasi Penting</h4>
                <p>
                    Sebagai reviewer, Anda bertanggung jawab untuk memastikan kualitas soal sebelum digunakan dalam ujian. 
                    Review yang baik akan meningkatkan validitas dan reliabilitas soal ujian.
                </p>
            </div>

            <!-- Tujuan Review -->
            <div class="panduan-section">
                <h3 class="section-title"><i class="fas fa-bullseye"></i> Tujuan Review</h3>
                <ul class="guideline-list">
                    <li class="guideline-item">
                        <span class="guideline-number">1</span>
                        <div class="guideline-content">
                            <h4>Memastikan Kesesuaian dengan Kompetensi</h4>
                            <p>Soal harus sesuai dengan kompetensi yang diujikan dan tingkat kesulitan yang tepat.</p>
                        </div>
                    </li>
                    <li class="guideline-item">
                        <span class="guideline-number">2</span>
                        <div class="guideline-content">
                            <h4>Validasi Konten Ilmiah</h4>
                            <p>Menguji kebenaran ilmiah dari materi soal dan pilihan jawaban.</p>
                        </div>
                    </li>
                    <li class="guideline-item">
                        <span class="guideline-number">3</span>
                        <div class="guideline-content">
                            <h4>Perbaikan Bahasa dan Struktur</h4>
                            <p>Memastikan penggunaan bahasa Indonesia yang baik dan benar, serta struktur kalimat yang jelas.</p>
                        </div>
                    </li>
                    <li class="guideline-item">
                        <span class="guideline-number">4</span>
                        <div class="guideline-content">
                            <h4>Konsistensi Format</h4>
                            <p>Menjaga konsistensi format soal sesuai dengan pedoman yang berlaku.</p>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- Kriteria Penilaian -->
            <div class="panduan-section">
                <h3 class="section-title"><i class="fas fa-check-circle"></i> Kriteria Penilaian Soal</h3>
                <div class="criteria-grid">
                    <div class="criteria-card">
                        <h5><i class="fas fa-book"></i> Konten & Substansi</h5>
                        <ul class="criteria-list">
                            <li><i class="fas fa-check"></i> Kebenaran ilmiah materi</li>
                            <li><i class="fas fa-check"></i> Relevansi dengan kompetensi</li>
                            <li><i class="fas fa-check"></i> Kedalaman dan cakupan materi</li>
                            <li><i class="fas fa-check"></i> Ketepatan kunci jawaban</li>
                            <li><i class="fas fa-check"></i> Kesesuaian tingkat kesulitan</li>
                        </ul>
                    </div>
                    <div class="criteria-card">
                        <h5><i class="fas fa-language"></i> Bahasa & Komunikasi</h5>
                        <ul class="criteria-list">
                            <li><i class="fas fa-check"></i> Kejelasan pertanyaan</li>
                            <li><i class="fas fa-check"></i> Tata bahasa yang benar</li>
                            <li><i class="fas fa-check"></i> Ejaan dan tanda baca</li>
                            <li><i class="fas fa-check"></i> Kalimat tidak ambigu</li>
                            <li><i class="fas fa-check"></i> Konsistensi terminologi</li>
                        </ul>
                    </div>
                    <div class="criteria-card">
                        <h5><i class="fas fa-clipboard-list"></i> Format & Struktur</h5>
                        <ul class="criteria-list">
                            <li><i class="fas fa-check"></i> Format sesuai pedoman</li>
                            <li><i class="fas fa-check"></i> Kelengkapan komponen soal</li>
                            <li><i class="fas fa-check"></i> Urutan yang logis</li>
                            <li><i class="fas fa-check"></i> Konsistensi gaya penulisan</li>
                            <li><i class="fas fa-check"></i> Tata letak yang rapi</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Workflow Review -->
            <div class="panduan-section">
                <h3 class="section-title"><i class="fas fa-sitemap"></i> Alur Kerja Review</h3>
                <div class="workflow-steps">
                    <div class="workflow-step">
                        <span class="step-number">1</span>
                        <div class="step-content">
                            <h5>Pemilihan Soal</h5>
                            <p>Pilih soal yang perlu direview dari daftar "Perlu Review". Sistem akan menampilkan soal yang belum direview atau perlu revisi.</p>
                        </div>
                    </div>
                    <div class="workflow-step">
                        <span class="step-number">2</span>
                        <div class="step-content">
                            <h5>Analisis Menyeluruh</h5>
                            <p>Baca dan analisis seluruh komponen soal: vignette, pertanyaan, pilihan jawaban, kunci, alasan, dan referensi.</p>
                        </div>
                    </div>
                    <div class="workflow-step">
                        <span class="step-number">3</span>
                        <div class="step-content">
                            <h5>Penilaian Kriteria</h5>
                            <p>Nilai soal berdasarkan kriteria konten, bahasa, dan format. Identifikasi kelemahan dan kekuatan soal.</p>
                        </div>
                    </div>
                    <div class="workflow-step">
                        <span class="step-number">4</span>
                        <div class="step-content">
                            <h5>Pengambilan Keputusan</h5>
                            <p>Putuskan apakah soal disetujui, perlu revisi, atau langsung diperbaiki menggunakan fitur edit.</p>
                        </div>
                    </div>
                    <div class="workflow-step">
                        <span class="step-number">5</span>
                        <div class="step-content">
                            <h5>Pemberian Catatan</h5>
                            <p>Berikan catatan yang konstruktif dan jelas untuk membantu perbaikan soal jika diperlukan.</p>
                        </div>
                    </div>
                    <div class="workflow-step">
                        <span class="step-number">6</span>
                        <div class="step-content">
                            <h5>Submit Review</h5>
                            <p>Simpan hasil review. Soal yang disetujui akan tersedia untuk digunakan, sedangkan yang perlu revisi akan dikembalikan ke pembuat soal.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tips Review Efektif -->
            <div class="panduan-section">
                <h3 class="section-title"><i class="fas fa-lightbulb"></i> Tips Review yang Efektif</h3>
                <ul class="guideline-list">
                    <li class="guideline-item">
                        <span class="guideline-number"><i class="fas fa-check"></i></span>
                        <div class="guideline-content">
                            <h4>Fokus pada Satu Soal</h4>
                            <p>Review satu soal secara menyeluruh sebelum beralih ke soal berikutnya untuk menjaga konsistensi.</p>
                        </div>
                    </li>
                    <li class="guideline-item">
                        <span class="guideline-number"><i class="fas fa-check"></i></span>
                        <div class="guideline-content">
                            <h4>Gunakan Standar Objektif</h4>
                            <p>Gunakan kriteria yang jelas dan objektif dalam menilai setiap komponen soal.</p>
                        </div>
                    </li>
                    <li class="guideline-item">
                        <span class="guideline-number"><i class="fas fa-check"></i></span>
                        <div class="guideline-content">
                            <h4>Berikan Umpan Balik Konstruktif</h4>
                            <p>Sampaikan kritik dengan bahasa yang sopan dan berikan saran perbaikan yang spesifik.</p>
                        </div>
                    </li>
                    <li class="guideline-item">
                        <span class="guideline-number"><i class="fas fa-check"></i></span>
                        <div class="guideline-content">
                            <h4>Perhatikan Waktu</h4>
                            <p>Alokasikan waktu yang cukup untuk setiap soal tanpa terburu-buru.</p>
                        </div>
                    </li>
                    <li class="guideline-item">
                        <span class="guideline-number"><i class="fas fa-check"></i></span>
                        <div class="guideline-content">
                            <h4>Dokumentasi yang Baik</h4>
                            <p>Catat semua perubahan dan alasan perbaikan untuk referensi di masa depan.</p>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- Fitur Edit -->
            <div class="panduan-section">
                <h3 class="section-title"><i class="fas fa-edit"></i> Fitur Edit oleh Reviewer</h3>
                <div class="alert-info" style="border-color:#fcd34d; background:#fef3c7;">
                    <h4 style="color:#92400e;"><i class="fas fa-exclamation-triangle" style="color:#d97706;"></i> Penggunaan Fitur Edit</h4>
                    <p style="color:#78350f;">
                        Sebagai reviewer, Anda memiliki akses untuk langsung mengedit soal yang memerlukan perbaikan minor. 
                        Fitur ini bertujuan untuk mempercepat proses perbaikan soal tanpa perlu mengembalikan ke pembuat soal.
                    </p>
                </div>
                
                <div class="criteria-grid">
                    <div class="criteria-card" style="border-color:#d1fae5;">
                        <h5><i class="fas fa-check" style="color:#059669;"></i> Kapan Boleh Mengedit?</h5>
                        <ul class="criteria-list">
                            <li><i class="fas fa-circle" style="color:#059669; font-size:8px;"></i> Kesalahan ketik minor</li>
                            <li><i class="fas fa-circle" style="color:#059669; font-size:8px;"></i> Perbaikan tata bahasa</li>
                            <li><i class="fas fa-circle" style="color:#059669; font-size:8px;"></i> Penyesuaian format</li>
                            <li><i class="fas fa-circle" style="color:#059669; font-size:8px;"></i> Koreksi ejaan</li>
                            <li><i class="fas fa-circle" style="color:#059669; font-size:8px;"></i> Perbaikan kalimat ambigu</li>
                        </ul>
                    </div>
                    <div class="criteria-card" style="border-color:#fee2e2;">
                        <h5><i class="fas fa-times" style="color:#dc2626;"></i> Kapan Harus Meminta Revisi?</h5>
                        <ul class="criteria-list">
                            <li><i class="fas fa-circle" style="color:#dc2626; font-size:8px;"></i> Perubahan konsep besar</li>
                            <li><i class="fas fa-circle" style="color:#dc2626; font-size:8px;"></i> Revisi konten substantif</li>
                            <li><i class="fas fa-circle" style="color:#dc2626; font-size:8px;"></i> Ketidakjelasan kompetensi</li>
                            <li><i class="fas fa-circle" style="color:#dc2626; font-size:8px;"></i> Masalah validitas ilmiah</li>
                            <li><i class="fas fa-circle" style="color:#dc2626; font-size:8px;"></i> Perubahan kunci jawaban</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="panduan-section">
                <h3 class="section-title"><i class="fas fa-rocket"></i> Akses Cepat</h3>
                <div class="quick-actions">
                    <a href="review_soal_teori.php" class="action-card">
                        <div class="action-icon"><i class="fas fa-book"></i></div>
                        <div class="action-title">Review Soal Teori</div>
                        <p>Mulai review soal teori reguler</p>
                    </a>
                    <a href="review_soal_teori_s1.php" class="action-card">
                        <div class="action-icon"><i class="fas fa-book-open"></i></div>
                        <div class="action-title">Review Soal S1</div>
                        <p>Review soal teori program S1</p>
                    </a>
                    <a href="riwayat_review.php" class="action-card">
                        <div class="action-icon"><i class="fas fa-history"></i></div>
                        <div class="action-title">Lihat Riwayat</div>
                        <p>Periksa riwayat review Anda</p>
                    </a>
                    <a href="dashboard_reviewer.php" class="action-card">
                        <div class="action-icon"><i class="fas fa-tachometer-alt"></i></div>
                        <div class="action-title">Dashboard</div>
                        <p>Kembali ke dashboard utama</p>
                    </a>
                </div>
            </div>

            <!-- Bantuan -->
            <div class="panduan-section" style="margin-bottom:0;">
                <h3 class="section-title"><i class="fas fa-life-ring"></i> Bantuan & Dukungan</h3>
                <div class="alert-info">
                    <h4><i class="fas fa-question-circle"></i> Butuh Bantuan?</h4>
                    <p>
                        Jika Anda mengalami kesulitan atau memiliki pertanyaan tentang proses review, 
                        silakan hubungi:<br>
                        <strong>Admin SOCA OSCE</strong> - Email: admin@soca-osce.ums.ac.id
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Scroll to Top -->
    <button class="scroll-top" id="scrollTopBtn" title="Kembali ke atas">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script>
        // ===== SIDEBAR TOGGLE =====
        const hamburger = document.getElementById('hamburgerBtn');
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebarOverlay');

        function toggleSidebar() {
            sidebar.classList.toggle('open');
            overlay.classList.toggle('active');
        }

        hamburger.addEventListener('click', toggleSidebar);
        overlay.addEventListener('click', toggleSidebar);

        // ===== CLOSE SIDEBAR ON RESIZE =====
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768) {
                sidebar.classList.remove('open');
                overlay.classList.remove('active');
            }
        });

        // ===== SCROLL TO TOP =====
        const scrollBtn = document.getElementById('scrollTopBtn');
        window.addEventListener('scroll', function() {
            if (window.scrollY > 300) {
                scrollBtn.classList.add('visible');
            } else {
                scrollBtn.classList.remove('visible');
            }
        });

        scrollBtn.addEventListener('click', function() {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // ===== ANIMASI SCROLL =====
        document.addEventListener('DOMContentLoaded', function() {
            const sections = document.querySelectorAll('.panduan-section');
            
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.1
            };

            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, observerOptions);

            sections.forEach(section => {
                section.style.opacity = '0';
                section.style.transform = 'translateY(20px)';
                section.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                observer.observe(section);
            });
        });
    </script>
</body>
</html>