flowchart TD
    %% Definisi Simbol Mermaid:
    %% ([Text]) = Terminator (Oval - Pink)
    %% [/Text/] = Input/Output (Paralelogram - Biru Muda)
    %% [Text]   = Process (Persegi - Kuning)
    %% {Text}   = Decision (Belah Ketupat - Oranye)

    Start([Mulai]) --> CSV[/Dataset filtered_products.csv/]
    CSV --> Cleaning[Data Pre-processing & Seeding]
    Cleaning --> Decision{Pilih Analisis?}

    %% Jalur Rekomendasi (AI)
    Decision -- "Sistem Rekomendasi" --> CF[User-Based Collaborative Filtering]
    CF --> Similarity[Perhitungan Cosine Similarity]
    Similarity --> AIResult[/Output: Prediksi Minat Pembeli/]
    AIResult --> Dashboard

    %% Jalur Visualisasi (Statistik)
    Decision -- "Visualisasi Data" --> Aggregasi[Agregasi Statistik & Tren]
    Aggregasi --> ChartJS[Render Dashboard Chart.js]
    ChartJS --> StatResult[/Output: Visual Insight & Dashboard/]
    StatResult --> Dashboard

    Dashboard[/Interactive Command Center/] --> End([Selesai])

    %% STYLING SESUAI GAMBAR REFERENSI
    %% Terminator (Pink)
    style Start fill:#f8cecc,stroke:#b85450,stroke-width:2px
    style End fill:#f8cecc,stroke:#b85450,stroke-width:2px

    %% Input/Output (Biru Muda)
    style CSV fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px
    style AIResult fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px
    style StatResult fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px
    style Dashboard fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px

    %% Proses (Kuning)
    style Cleaning fill:#fff2cc,stroke:#d6b656,stroke-width:2px
    style CF fill:#fff2cc,stroke:#d6b656,stroke-width:2px
    style Similarity fill:#fff2cc,stroke:#d6b656,stroke-width:2px
    style Aggregasi fill:#fff2cc,stroke:#d6b656,stroke-width:2px
    style ChartJS fill:#fff2cc,stroke:#d6b656,stroke-width:2px

    %% Keputusan (Oranye)
    style Decision fill:#ffe6cc,stroke:#d79b00,stroke-width:2px