================================================================================
  RENCANA REDESIGN TAMPILAN — TRYOUT CPNS
  Tanggal: 28 Juni 2026
================================================================================

DAFTAR ISI:
  1. Tujuan
  2. Filosofi Desain Baru
  3. Palet Warna
  4. Struktur Layout
  5. Perubahan Per Halaman (Prioritas)
  6. Detail Teknis
  7. Hal yang TIDAK Diubah
  8. File yang Dihapus
  9. Risiko & Mitigasi
  10. Estimasi Waktu


================================================================================
1. TUJUAN
================================================================================

  - Modernisasi tampilan web agar terlihat premium dan trustworthy
  - Menyatukan 3 pendekatan CSS terpisah (Tooplate theme, inline exam styles,
    custom analytics styles) menjadi satu design system yang konsisten
  - Meningkatkan user experience (UX) pada navigasi, tryout, dan review hasil
  - Menghilangkan kesan template lama (circa 2019)


================================================================================
2. FILOSOFI DESAIN BARU
================================================================================

  +---------------------+---------------------------+--------------------------+
  | Aspek               | Sebelum (Lama)            | Sesudah (Baru)           |
  +---------------------+---------------------------+--------------------------+
  | Warna Primer        | Kuning #f9c10b           | Navy #1e3a5f             |
  |                     | Merah #dc3545             | Biru Terang #2563eb      |
  | Warna Aksen         | -                         | Teal #0d9488             |
  | Background          | Foto full-screen +        | Putih + abu-abu lembut   |
  |                     | overlay hitam             | #f8fafc                  |
  | Font (body)         | DM Sans 18px              | DM Sans 16px             |
  | Card / Shadow       | box-shadow tebal          | Shadow ringan + border   |
  |                     |                           | subtle                   |
  | Ikon                | Emoji + Bootstrap Icons   | Bootstrap Icons 100%     |
  |                     | campur aduk               | (konsisten)              |
  | Tombol              | Merah, pill shape         | Biru/navy,               |
  |                     | border-radius: 100px      | border-radius: 10px      |
  +---------------------+---------------------------+--------------------------+


================================================================================
3. PALET WARNA BARU
================================================================================

  --primary:        #1e3a5f     Navy gelap — navbar, header, footer
  --primary-light:  #2563eb     Biru terang — button, link, aksen
  --accent:         #0d9488     Teal — success, CTA sekunder
  --bg:             #f8fafc     Background halaman
  --surface:        #ffffff     Card, container
  --text:           #0f172a     Teks utama
  --text-muted:     #64748b     Teks sekunder
  --border:         #e2e8f0     Garis pemisah
  --warning:        #f59e0b     Badge/alert
  --danger:         #ef4444     Error


================================================================================
4. STRUKTUR LAYOUT BARU
================================================================================

  Layout utama (main.blade.php):

  +----------------------------------------------------------+
  | NAVBAR (fixed, white, shadow halus)                      |
  | [Logo]  [Dashboard] [Tryout] [Result] [Peringkat]        |
  | [Prediksi] [Admin*]          [Avatar ▼]                  |
  +----------------------------------------------------------+
  |                                                           |
  |  CONTENT (@yield('content'))                              |
  |  - container max-width: 1200px, mx-auto                  |
  |  - padding: py-12 (Tailwind)                             |
  |  - background: #f8fafc                                   |
  |                                                           |
  +----------------------------------------------------------+
  | FOOTER (navy, minimal)                                    |
  | © Tryout CPNS  |  Dibangun dengan hati untuk bangsa       |
  +----------------------------------------------------------+

  Perubahan utama:
  - HEADER KUNING (site-header) DIHAPUS — info user pindah ke navbar
  - BACKGROUND FOTO DIHAPUS — diganti warna solid #f8fafc
  - Navbar tidak ada nomor "01", "02", "03"
  - Active nav: border-bottom 2px biru (#2563eb)
  - Tombol login/logout di pojok kanan navbar


================================================================================
5. PERUBAHAN PER HALAMAN (BERDASARKAN PRIORITAS)
================================================================================

  ------------------------------------------------------------------------------
  PHASE 1 — CORE LAYOUT & DASHBOARD        (Estimasi: 3 hari)
  ------------------------------------------------------------------------------

  1. resources/css/app.css
     - Tulis ulang dengan Tailwind directives + custom CSS design tokens
     - Definisikan class utility untuk button, card, form sesuai palet baru

  2. resources/views/layouts/main.blade.php
     - REWRITE: navbar baru tanpa header kuning
     - Footer baru warna navy
     - Hapus background image
     - Load Tailwind dari Vite (sudah ada), hapus tooplate CSS

  3. resources/views/layouts/guest.blade.php
     - Redesign: card login/register lebih modern
     - Tanpa background foto, pakai gradient subtle atau solid color

  4. resources/views/layouts/app.blade.php
     - Sinkronkan dengan main.blade.php yang baru
     - Jika duplikasi, pertimbangkan merger/hapus

  5. resources/views/dashboard.blade.php
     - Kartu statistik: gradasi navy/teal
     - Ganti emoji (📚 🏆 📈 📉) dengan Bootstrap Icons
     - Tombol: biru (#2563eb) sebagai ganti merah
     - Tabel riwayat: lebih modern (striped, hover, border tipis)

  ------------------------------------------------------------------------------
  PHASE 2 — TRYOUT & PAKET SOAL           (Estimasi: 2 hari)
  ------------------------------------------------------------------------------

  6. resources/views/paket/index.blade.php
     - Card paket: border tipis + shadow ringan, hover scale
     - Form filter: lebih compact, styling Bootstrap disesuaikan
     - Modal konfirmasi: warna baru, border kiri biru

  7. resources/views/paket/partials/card.blade.php
     - REWRITE card component
     - Badge kategori: TWK (amber), TIU (blue), TKP (green)
     - Tombol "Mulai" biru

  ------------------------------------------------------------------------------
  PHASE 3 — EXAM MODE                     (Estimasi: 2 hari)
  ------------------------------------------------------------------------------

  8. resources/views/layouts/exam.blade.php
     - Pindahkan <style> inline ke file CSS global
     - Sesuaikan warna tombol navigasi:
       - Next: biru (#2563eb) — sudah sesuai
       - Selesai: merah (#dc2626) — tetap
       - Selected option: biru
     - Sesuaikan sidebar dengan palet baru
     - Overlay masuk: biru sebagai ganti warna saat ini

  9. resources/views/tryout/index.blade.php (soal)
     - Minor adjustment warna option button
     - Konsistensi font dan spacing

  ------------------------------------------------------------------------------
  PHASE 4 — ANALYTICS, LEADERBOARD, PREDIKSI, PROFILE  (Estimasi: 2 hari)
  ------------------------------------------------------------------------------

  10. resources/views/analytics/index.blade.php
      - Dark overview card dipertahankan (sudah bagus)
      - Sesuaikan warna aksen (#f9c10b) dengan emas/yang cocok di dark bg
      - Konsistensi font & ikon

  11. resources/views/leaderboard/index.blade.php
      - Sesuaikan styling dengan palet baru
      - (review file)

  12. resources/views/prediction/index.blade.php
      - Sesuaikan styling
      - (review file)

  13. resources/views/profile/*.blade.php
      - Minor adjustment (form, button)

  ------------------------------------------------------------------------------
  PHASE 5 — ADMIN & FIGURAL               (Estimasi: 1 hari)
  ------------------------------------------------------------------------------

  14. resources/views/admin/*.blade.php
      - Sinkronisasi dengan layout main yang baru

  15. resources/views/figural/*.blade.php
      - Sinkronisasi layout
      - Hapus CDN Tailwind (pakai Vite yang sudah ada)


================================================================================
6. DETAIL TEKNIS PER KOMPONEN
================================================================================

  A. NAVBAR (main.blade.php)

     <nav class="fixed top-0 w-full bg-white border-b border-gray-200 z-50">
       <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-16">
         <!-- Logo -->
         <a href="{{ route('dashboard') }}" class="text-xl font-bold text-[#1e3a5f]">
           Tryout <span class="text-[#2563eb]">CPNS</span>
         </a>

         <!-- Nav Links -->
         <div class="hidden md:flex items-center space-x-1">
           @auth
           <a href="{{ route('dashboard') }}" 
              class="px-4 py-2 text-sm font-medium rounded-lg
              {{ request()->routeIs('dashboard') ? 'text-[#2563eb] bg-blue-50' : 'text-gray-600 hover:text-[#2563eb]' }}">
             Dashboard
           </a>
           <!-- ... nav items lain tanpa prefiks 01/02/03 ... -->
         </div>

         <!-- Avatar & Dropdown -->
         <div class="flex items-center gap-3">
           <span class="text-sm text-gray-600">{{ Auth::user()->name }}</span>
           <div class="w-8 h-8 rounded-full bg-[#2563eb] text-white flex items-center justify-center text-sm font-bold">
             {{ substr(Auth::user()->name, 0, 1) }}
           </div>
         </div>
         @endauth
       </div>
     </nav>

  B. DASHBOARD STAT CARDS

     <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
       <div class="bg-gradient-to-br from-[#1e3a5f] to-[#2563eb] rounded-xl p-6 text-white">
         <i class="bi-journal text-2xl mb-2"></i>
         <p class="text-3xl font-bold">{{ $totalTryout }}</p>
         <p class="text-sm opacity-80">Total Tryout</p>
       </div>
       <div class="bg-gradient-to-br from-[#0d9488] to-[#14b8a6] rounded-xl p-6 text-white">
         <i class="bi-graph-up-arrow text-2xl mb-2"></i>
         <p class="text-3xl font-bold">{{ round($rataRataSkor, 1) }}</p>
         <p class="text-sm opacity-80">Rata-rata Skor</p>
       </div>
       <!-- ... -->
     </div>

  C. TOMBOL

     .btn-primary {
       @apply bg-[#2563eb] text-white font-semibold px-5 py-2.5 rounded-lg
              hover:bg-[#1d4ed8] transition-all duration-200;
     }

     .btn-accent {
       @apply bg-[#0d9488] text-white font-semibold px-5 py-2.5 rounded-lg
              hover:bg-[#0f766e] transition-all duration-200;
     }

     .btn-outline {
       @apply border border-gray-300 text-gray-700 font-medium px-5 py-2.5 rounded-lg
              hover:bg-gray-50 transition-all duration-200;
     }

  D. CARD

     .card {
       @apply bg-white rounded-xl border border-gray-200 p-6
              shadow-sm hover:shadow-md transition-shadow duration-200;
     }


================================================================================
7. HAL YANG TIDAK PERLU DIUBAH
================================================================================

  - Backend logic (controllers, models, routes, migrations) — TETAP
  - Database structure — TETAP
  - Authentication (Laravel Breeze) — TETAP
  - Logika scoring, tryout engine — TETAP
  - Figural generator services (FiguralGeneratorService, RuleEngine, dll) — TETAP
  - CSV import logic — TETAP
  - Routes (web.php, auth.php) — TETAP


================================================================================
8. FILE YANG DIHAPUS (TIDAK DIPAKAI LAGI)
================================================================================

  Setelah redesign, file berikut tidak diperlukan:

  public/css/tooplate-waso-strategy.css    -> HAPUS (diganti app.css)
  public/css/magnific-popup.css            -> HAPUS (tidak dipakai)
  public/js/jquery.magnific-popup.min.js   -> HAPUS
  public/js/magnific-popup-options.js      -> HAPUS
  public/js/jquery.sticky.js               -> HAPUS
  public/js/click-scroll.js                -> HAPUS
  public/js/custom.js                      -> HAPUS

  Catatan: Pastikan tidak ada view yang masih me-refer file-file di atas
  sebelum menghapusnya. Cek dengan grep di seluruh folder resources/views.


================================================================================
9. RISIKO & MITIGASI
================================================================================

  Risiko 1: Perubahan layout mendadak membingungkan user
     Mitigasi: Rilis bertahap (phase), bukan big bang. Bisa informasikan
     lewat banner "Tampilan baru kami" di dashboard.

  Risiko 2: Inline style exam mode tidak kepindah semua ke global CSS
     Mitigasi: Regression test pada semua tipe soal (teks, figural, katex)
     sebelum deploy.

  Risiko 3: Ada kelas Tooplate yang masih dirujuk di view
     Mitigasi: Sebelum hapus tooplate.css, jalankan:
       grep -r "about-thumb\|custom-btn\|section-padding\|small-title" resources/views/
     untuk cek dependensi.

  Risiko 4: Waktu pengerjaan molor
     Mitigasi: Prioritaskan Phase 1-3. Phase 4-5 opsional bisa ditunda.


================================================================================
10. ESTIMASI WAKTU TOTAL
================================================================================

  Phase 1 — Core Layout & Dashboard      : 3 hari
  Phase 2 — Tryout & Paket Soal          : 2 hari
  Phase 3 — Exam Mode                    : 2 hari
  Phase 4 — Analytics, Lainnya           : 2 hari
  Phase 5 — Admin & Figural              : 1 hari
                                         ---------
  TOTAL                                  : 10 hari kerja

  Catatan: Estimasi ini asumsi 1 orang developer (frontend + backend).
  Jika ada tim, bisa diparalelkan (misal Phase 1 & 2 berjalan bersamaan).


================================================================================
AKHIR RENCANA
================================================================================