Update src/streamlit_app.py

src/streamlit_app.py

@@ -20,9 +20,10 @@ from langdetect import detect, DetectorFactory
 DetectorFactory.seed = 0
 
 # ==============================
-# SETTING PATH ABSOLUT UNTUK GAMBAR
+# SETTING PATH
 # ==============================
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+
 img_hero  = os.path.join(BASE_DIR, "crypto-currency-concept-830px.png")
 img_batch = os.path.join(BASE_DIR, "slice3-1-1536x830.png")
 
@@ -30,517 +31,485 @@ img_batch = os.path.join(BASE_DIR, "slice3-1-1536x830.png")
 # KONFIGURASI HALAMAN & STATE NAVIGASI
 # ==============================
 st.set_page_config(
-    page_title="Bitcoin Sentimen – Arya Galuh",
+    page_title="Bitcoin Sentimen Analyzer",
     page_icon="₿",
     layout="wide",
-    initial_sidebar_state="collapsed",
+    initial_sidebar_state="collapsed"
 )
 
-if "page" not in st.session_state:
+if 'page' not in st.session_state:
     st.session_state.page = "uji_kalimat"
 
 # ==============================
-# GLOBAL BASE CSS  (mirip vancouverbitcoin.com)
+# GLOBAL CSS
 # ==============================
 st.markdown("""
 <style>
-/* ── Google Fonts ─────────────────────────────── */
-@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&family=Nunito:wght@400;600;700;800&display=swap');
-
-/* ── Reset Streamlit chrome ────────────────────── */
-#MainMenu, footer, header { visibility: hidden; }
-.block-container {
-    padding: 0 !important;
-    max-width: 100% !important;
-}
-
-/* ── Global font ───────────────────────────────── */
-html, body, [class*="css"] {
-    font-family: 'Nunito Sans', sans-serif !important;
-}
-
-/* ── Remove default button styling ────────────── */
-div[data-testid="stButton"] > button {
-    border-radius: 50px !important;
-    font-weight: 700 !important;
-    font-size: 0.95rem !important;
-    padding: 0.55rem 1.6rem !important;
-    transition: all 0.25s ease !important;
-    cursor: pointer !important;
-    border: 2px solid transparent !important;
-    line-height: 1.4 !important;
-    letter-spacing: 0.01em !important;
-}
-div[data-testid="stButton"] > button:focus:not(:active) {
-    box-shadow: none !important;
-    outline: none !important;
-}
-
-/* ── Streamlit text area ───────────────────────── */
-.stTextArea label {
-    font-weight: 600 !important;
-    font-size: 0.95rem !important;
-}
-</style>
-""", unsafe_allow_html=True)
+    /* ── Google Fonts ── */
+    @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
 
-# ==============================
-# TEMA DINAMIS PER HALAMAN
-# ==============================
-is_dark = st.session_state.page == "uji_kalimat"
+    /* ── Reset Streamlit chrome ── */
+    #MainMenu, footer, header { visibility: hidden; }
+    .block-container {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        max-width: 100% !important;
+    }
 
-if is_dark:
-    st.markdown("""
-    <style>
-    /* ── Hero page (dark-orange) ─── */
-    .stApp { background-color: #F7931A; }
+    html, body, [class*="css"] {
+        font-family: 'DM Sans', sans-serif !important;
+    }
 
-    /* top nav strip */
-    .vb-nav {
-        background: #FFFFFF;
-        padding: 0 3rem;
-        height: 70px;
+    /* ── Custom Scrollbar ── */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: #FFF3E0; }
+    ::-webkit-scrollbar-thumb { background: #F7931A; border-radius: 3px; }
+
+    /* ── NAVBAR WRAPPER ── */
+    .vbc-navbar {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+        padding: 0 3rem;
+        height: 72px;
+        background: #1A1033;
         position: sticky;
         top: 0;
         z-index: 999;
+        box-shadow: 0 2px 20px rgba(0,0,0,0.25);
     }
-    .vb-nav-logo {
-        font-family: 'Nunito', sans-serif;
-        font-weight: 900;
-        font-size: 1.4rem;
-        color: #1E1E3F;
+    .vbc-logo {
+        font-family: 'Manrope', sans-serif;
+        font-weight: 800;
+        font-size: 1.35rem;
+        color: #FFFFFF !important;
         display: flex;
         align-items: center;
-        gap: 8px;
-        text-decoration: none;
+        gap: 10px;
+        letter-spacing: -0.5px;
     }
-    .vb-nav-logo span.btc-icon {
-        width: 38px; height: 38px;
+    .vbc-logo-icon {
         background: #F7931A;
+        color: white;
+        width: 36px;
+        height: 36px;
         border-radius: 50%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        color: #fff;
-        font-size: 1.2rem;
-        font-weight: 900;
-    }
-    .vb-nav-links {
-        display: flex;
-        gap: 2.2rem;
-        list-style: none;
-        margin: 0; padding: 0;
-    }
-    .vb-nav-links a {
-        color: #1E1E3F;
-        font-weight: 600;
-        font-size: 0.92rem;
-        text-decoration: none;
-    }
-    .vb-nav-actions { display: flex; gap: 10px; align-items: center; }
-    .vb-btn-outline {
-        border: 2px solid #F7931A !important;
-        color: #F7931A !important;
-        background: transparent !important;
-        border-radius: 50px !important;
-        padding: 7px 22px !important;
-        font-weight: 700 !important;
-        font-size: 0.88rem !important;
-        cursor: pointer !important;
-        transition: all .2s;
-    }
-    .vb-btn-solid {
-        background: #1E1E3F !important;
-        color: #fff !important;
-        border: 2px solid #1E1E3F !important;
-        border-radius: 50px !important;
-        padding: 7px 22px !important;
-        font-weight: 700 !important;
-        font-size: 0.88rem !important;
-        cursor: pointer !important;
-        transition: all .2s;
+        font-size: 1.1rem;
+        font-weight: 800;
     }
 
-    /* ── Hero section ─── */
+    /* ── HERO SECTION (Uji Kalimat) ── */
     .hero-wrap {
         background: #F7931A;
-        padding: 5rem 4rem 4rem;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 3rem;
+        min-height: calc(100vh - 72px);
+        display: flex;
         align-items: center;
-        min-height: 82vh;
+        position: relative;
+        overflow: hidden;
+        padding: 4rem 3rem;
+    }
+    .hero-wrap::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 60%),
+                    radial-gradient(ellipse at 20% 80%, rgba(0,0,0,0.12) 0%, transparent 50%);
+        pointer-events: none;
+    }
+    /* sparkle dots decoration */
+    .hero-wrap::after {
+        content: '✦  ✦  ✦';
+        position: absolute;
+        top: 2rem;
+        right: 3rem;
+        font-size: 1.4rem;
+        color: rgba(255,255,255,0.25);
+        letter-spacing: 1.2rem;
     }
     .hero-badge {
         display: inline-block;
-        background: rgba(255,255,255,0.2);
-        color: #fff;
+        background: rgba(255,255,255,0.18);
+        border: 1px solid rgba(255,255,255,0.35);
+        color: #FFFFFF;
         font-size: 0.78rem;
         font-weight: 700;
-        letter-spacing: 0.12em;
+        letter-spacing: 1.5px;
         text-transform: uppercase;
+        padding: 5px 14px;
         border-radius: 50px;
-        padding: 5px 16px;
         margin-bottom: 1.2rem;
     }
-    .hero-h1 {
-        font-family: 'Nunito', sans-serif;
-        font-size: clamp(2.4rem, 4vw, 3.6rem);
-        font-weight: 900;
-        color: #FFFFFF;
-        line-height: 1.1;
+    .hero-title {
+        font-family: 'Manrope', sans-serif !important;
+        font-size: 3.8rem;
+        font-weight: 800;
+        line-height: 1.08;
         letter-spacing: -1.5px;
-        margin: 0 0 1.1rem;
+        color: #FFFFFF !important;
+        margin: 0 0 1.2rem;
     }
-    .hero-h1 em {
-        font-style: normal;
-        color: #1E1E3F;
+    .hero-title span {
+        color: #1A1033;
     }
     .hero-sub {
         font-size: 1.05rem;
-        color: rgba(255,255,255,0.88);
-        line-height: 1.65;
-        margin-bottom: 1.6rem;
-        font-weight: 400;
-    }
-    .hero-researcher {
-        background: rgba(255,255,255,0.18);
-        border-left: 4px solid #fff;
-        border-radius: 6px;
-        padding: 12px 16px;
+        color: rgba(255,255,255,0.85) !important;
+        max-width: 500px;
+        line-height: 1.7;
         margin-bottom: 2rem;
-        font-size: 0.9rem;
-        color: #fff;
-        font-weight: 600;
     }
-    .hero-img-wrap {
-        display: flex;
+    .hero-card {
+        background: rgba(255,255,255,0.13);
+        border: 1px solid rgba(255,255,255,0.28);
+        backdrop-filter: blur(6px);
+        border-radius: 14px;
+        padding: 14px 20px;
+        display: inline-flex;
         align-items: center;
-        justify-content: center;
+        gap: 10px;
+        margin-bottom: 2.2rem;
     }
-    .hero-img-wrap img { max-width: 100%; border-radius: 12px; }
-
-    /* Nav buttons inside streamlit */
-    .nav-btn-active > div[data-testid="stButton"] > button {
-        background: #F7931A !important;
-        color: #fff !important;
-        border-color: #F7931A !important;
+    .hero-card-dot {
+        width: 8px; height: 8px;
+        border-radius: 50%;
+        background: #1A1033;
+        flex-shrink: 0;
+    }
+    .hero-card p {
+        margin: 0;
+        font-size: 0.88rem;
+        color: #FFFFFF !important;
+        font-weight: 500;
+    }
+
+    /* ── BATCH SECTION ── */
+    .batch-wrap {
+        background: #FEF8F0;
+        min-height: calc(100vh - 72px);
+        padding: 5rem 3rem 4rem;
+        position: relative;
+    }
+    .batch-wrap::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-image: radial-gradient(circle, rgba(247,147,26,0.06) 1px, transparent 1px);
+        background-size: 28px 28px;
+        pointer-events: none;
+    }
+    .batch-eyebrow {
+        font-family: 'Manrope', sans-serif;
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: #F7931A !important;
+        margin-bottom: 0.75rem;
     }
-    .nav-btn-inactive > div[data-testid="stButton"] > button {
-        background: transparent !important;
-        color: #1E1E3F !important;
-        border-color: #CBD5E1 !important;
+    .batch-title {
+        font-family: 'Manrope', sans-serif !important;
+        font-size: 2.8rem;
+        font-weight: 800;
+        letter-spacing: -1px;
+        color: #1A1033 !important;
+        line-height: 1.1;
+        margin-bottom: 1rem;
     }
-    .nav-btn-inactive > div[data-testid="stButton"] > button:hover {
-        border-color: #F7931A !important;
-        color: #F7931A !important;
+    .batch-sub {
+        font-size: 1.05rem;
+        color: #64748B !important;
+        max-width: 480px;
+        line-height: 1.7;
+        margin-bottom: 2rem;
     }
 
-    /* Analyse button */
-    .analyze-btn > div[data-testid="stButton"] > button {
-        background: #1E1E3F !important;
-        color: #fff !important;
-        border-color: #1E1E3F !important;
-        font-size: 1.05rem !important;
-        padding: 0.75rem 2rem !important;
-        width: 100%;
+    /* ── RESULT / DASHBOARD SECTION ── */
+    .result-wrap {
+        background: #FFFFFF;
+        padding: 3rem 3rem 4rem;
+        border-top: 4px solid #F7931A;
     }
-    .analyze-btn > div[data-testid="stButton"] > button:hover {
-        background: #2d2d5b !important;
-        transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(30,30,63,0.25) !important;
+    .section-label {
+        font-family: 'Manrope', sans-serif;
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: #F7931A !important;
+        margin-bottom: 0.5rem;
+    }
+    .section-title {
+        font-family: 'Manrope', sans-serif !important;
+        font-size: 1.9rem;
+        font-weight: 800;
+        letter-spacing: -0.5px;
+        color: #1A1033 !important;
+        margin-bottom: 1.8rem;
     }
 
-    /* Result section */
-    .result-section {
-        background: #fff;
+    /* ── SENTIMENT RESULT CARD ── */
+    .sent-card {
+        background: #F8FAFC;
+        border: 1px solid #E2E8F0;
         border-radius: 16px;
-        padding: 2rem;
-        margin-top: 2.5rem;
-    }
-    .result-title {
-        font-family: 'Nunito', sans-serif;
-        font-size: 1.5rem;
-        font-weight: 800;
-        color: #1E1E3F;
-        text-align: center;
-        margin-bottom: 1.2rem;
+        padding: 1.5rem 2rem;
+        margin-bottom: 1rem;
     }
 
-    /* TextArea */
-    .stTextArea textarea {
-        background: rgba(255,255,255,0.15) !important;
-        color: #fff !important;
-        border: 2px solid rgba(255,255,255,0.4) !important;
-        border-radius: 12px !important;
-        font-size: 1rem !important;
-        padding: 1rem !important;
-        backdrop-filter: blur(4px);
+    /* ── METRIC CARDS ── */
+    div[data-testid="stMetric"] {
+        background: #FFFFFF;
+        border: 1px solid #E2E8F0;
+        border-radius: 16px;
+        padding: 1.2rem 1.5rem !important;
+        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
     }
-    .stTextArea textarea::placeholder { color: rgba(255,255,255,0.6) !important; }
-    .stTextArea textarea:focus {
-        border-color: #fff !important;
-        box-shadow: 0 0 0 2px rgba(255,255,255,0.3) !important;
+    div[data-testid="stMetricLabel"] > div {
+        color: #64748B !important;
+        font-size: 0.8rem !important;
+        font-weight: 600 !important;
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
     }
-    .stTextArea label { color: #fff !important; font-weight: 700 !important; }
-
-    /* Dataframe inside result */
-    div[data-testid="stDataFrame"] {
-        border: 1px solid #E2E8F0 !important;
-        border-radius: 10px !important;
-        overflow: hidden !important;
+    div[data-testid="stMetricValue"] > div {
+        color: #1A1033 !important;
+        font-family: 'Manrope', sans-serif !important;
+        font-weight: 800 !important;
+        font-size: 2rem !important;
     }
 
-    /* Spinner */
-    .stSpinner { color: #1E1E3F !important; }
-
-    /* Warning / info */
-    div[data-testid="stAlert"] { border-radius: 10px !important; }
-
-    /* Content padding wrapper */
-    .page-content { padding: 0 4rem 4rem; }
-
-    /* Divider */
-    .vb-divider {
-        border: none;
-        border-top: 1px solid rgba(255,255,255,0.25);
-        margin: 2.5rem 0;
+    /* ── BUTTONS — VBC style pill buttons ── */
+    div[data-testid="stButton"] > button {
+        font-family: 'Manrope', sans-serif !important;
+        font-weight: 700 !important;
+        font-size: 0.92rem !important;
+        border-radius: 50px !important;
+        padding: 0.6rem 1.8rem !important;
+        border: none !important;
+        letter-spacing: 0.2px;
+        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
     }
-    </style>
-    """, unsafe_allow_html=True)
-
-else:
-    st.markdown("""
-    <style>
-    /* ── Batch / cream page ─── */
-    .stApp { background-color: #FDF6EE; }
-
-    .vb-nav {
-        background: #FFFFFF;
-        padding: 0 3rem;
-        height: 70px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
-        position: sticky;
-        top: 0;
-        z-index: 999;
+    div[data-testid="stButton"] > button:focus:not(:active) {
+        box-shadow: none !important;
     }
-    .vb-nav-logo {
-        font-family: 'Nunito', sans-serif;
-        font-weight: 900;
-        font-size: 1.4rem;
-        color: #1E1E3F;
-        display: flex;
-        align-items: center;
-        gap: 8px;
+
+    /* Primary CTA — dark navy */
+    .btn-primary div[data-testid="stButton"] > button {
+        background: #1A1033 !important;
+        color: #FFFFFF !important;
     }
-    .vb-nav-logo span.btc-icon {
-        width: 38px; height: 38px;
-        background: #F7931A;
-        border-radius: 50%;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        font-size: 1.2rem;
-        font-weight: 900;
+    .btn-primary div[data-testid="stButton"] > button:hover {
+        background: #2D1B69 !important;
+        transform: translateY(-2px) !important;
+        box-shadow: 0 6px 20px rgba(26,16,51,0.25) !important;
     }
 
-    /* Nav action buttons */
-    .nav-btn-active > div[data-testid="stButton"] > button {
-        background: #1E1E3F !important;
-        color: #fff !important;
-        border-color: #1E1E3F !important;
-    }
-    .nav-btn-inactive > div[data-testid="stButton"] > button {
+    /* Secondary outline — white border on dark bg */
+    .btn-outline-white div[data-testid="stButton"] > button {
         background: transparent !important;
-        color: #1E1E3F !important;
-        border-color: #CBD5E1 !important;
+        color: #FFFFFF !important;
+        border: 2px solid rgba(255,255,255,0.6) !important;
     }
-    .nav-btn-inactive > div[data-testid="stButton"] > button:hover {
-        border-color: #F7931A !important;
-        color: #F7931A !important;
-    }
-    .nav-btn-inactive2 > div[data-testid="stButton"] > button {
-        background: transparent !important;
-        color: #F7931A !important;
-        border-color: #F7931A !important;
+    .btn-outline-white div[data-testid="stButton"] > button:hover {
+        background: rgba(255,255,255,0.12) !important;
+        border-color: #FFFFFF !important;
+        transform: translateY(-2px) !important;
     }
 
-    /* Hero batch section */
-    .hero-wrap {
-        background: #FDF6EE;
-        padding: 5rem 4rem 3rem;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 3rem;
-        align-items: center;
+    /* Orange pill — active nav */
+    .btn-orange div[data-testid="stButton"] > button {
+        background: #F7931A !important;
+        color: #FFFFFF !important;
+        box-shadow: 0 4px 16px rgba(247,147,26,0.35) !important;
     }
-    .hero-badge {
-        display: inline-block;
-        color: #F7931A;
-        font-size: 0.78rem;
-        font-weight: 800;
-        letter-spacing: 0.14em;
-        text-transform: uppercase;
-        margin-bottom: 0.8rem;
+    .btn-orange div[data-testid="stButton"] > button:hover {
+        background: #E07D08 !important;
+        transform: translateY(-2px) !important;
     }
-    .hero-h1 {
-        font-family: 'Nunito', sans-serif;
-        font-size: clamp(2rem, 3.2vw, 2.9rem);
-        font-weight: 900;
-        color: #1E1E3F;
-        line-height: 1.15;
-        letter-spacing: -1px;
-        margin: 0 0 1rem;
+
+    /* Ghost nav — inactive */
+    .btn-ghost div[data-testid="stButton"] > button {
+        background: transparent !important;
+        color: rgba(255,255,255,0.7) !important;
+        border: 1px solid rgba(255,255,255,0.2) !important;
+        box-shadow: none !important;
     }
-    .hero-sub {
-        font-size: 1.05rem;
-        color: #5A6478;
-        line-height: 1.65;
-        margin-bottom: 2rem;
+    .btn-ghost div[data-testid="stButton"] > button:hover {
+        color: #FFFFFF !important;
+        border-color: rgba(255,255,255,0.5) !important;
+        background: rgba(255,255,255,0.06) !important;
     }
 
-    /* Main CTA */
-    .analyze-btn > div[data-testid="stButton"] > button {
-        background: #1E1E3F !important;
-        color: #fff !important;
-        border-color: #1E1E3F !important;
-        font-size: 1rem !important;
-        padding: 0.7rem 2rem !important;
-        width: 100%;
+    /* ── TEXT INPUT / TEXTAREA ── */
+    .stTextArea textarea {
+        background-color: rgba(255,255,255,0.12) !important;
+        color: #FFFFFF !important;
+        border: 1.5px solid rgba(255,255,255,0.3) !important;
+        border-radius: 14px !important;
+        font-family: 'DM Sans', sans-serif !important;
+        font-size: 0.98rem !important;
+        padding: 1rem 1.2rem !important;
+        backdrop-filter: blur(4px);
+        transition: border-color 0.2s !important;
     }
-    .analyze-btn > div[data-testid="stButton"] > button:hover {
-        background: #F7931A !important;
-        border-color: #F7931A !important;
-        transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(247,147,26,0.25) !important;
+    .stTextArea textarea:focus {
+        border-color: #1A1033 !important;
+        box-shadow: 0 0 0 3px rgba(26,16,51,0.2) !important;
+    }
+    .stTextArea label {
+        color: rgba(255,255,255,0.75) !important;
+        font-size: 0.82rem !important;
+        font-weight: 600 !important;
+        letter-spacing: 0.5px !important;
+        text-transform: uppercase !important;
     }
 
-    /* Download buttons */
-    div[data-testid="stDownloadButton"] > button {
-        background: #1E1E3F !important;
-        color: #fff !important;
-        border: 2px solid #1E1E3F !important;
-        border-radius: 50px !important;
-        font-weight: 700 !important;
-        padding: 0.55rem 1.4rem !important;
-        transition: all .2s !important;
+    /* Batch page file uploader */
+    .batch-wrap .stTextArea textarea {
+        background-color: #FFFFFF !important;
+        color: #1A1033 !important;
+        border: 1.5px solid #E2E8F0 !important;
     }
-    div[data-testid="stDownloadButton"] > button:hover {
-        background: #F7931A !important;
-        border-color: #F7931A !important;
+    .batch-wrap .stTextArea label {
+        color: #64748B !important;
     }
 
-    /* FileUploader */
-    section[data-testid="stFileUploader"] {
-        background: #fff !important;
+    /* ── DATA TABLE ── */
+    div[data-testid="stDataFrame"] {
+        border: 1px solid #E2E8F0 !important;
+        border-radius: 16px !important;
+        overflow: hidden !important;
+        box-shadow: 0 1px 6px rgba(0,0,0,0.04) !important;
+    }
+
+    /* ── FILE UPLOADER ── */
+    div[data-testid="stFileUploader"] {
         border: 2px dashed #F7931A !important;
-        border-radius: 14px !important;
-        padding: 1.2rem !important;
+        border-radius: 16px !important;
+        background: rgba(247,147,26,0.04) !important;
+        padding: 1rem !important;
     }
 
-    /* Dataframe */
-    div[data-testid="stDataFrame"] {
-        border: 1px solid #E8E0D4 !important;
+    /* ── EXPANDER ── */
+    div[data-testid="stExpander"] {
+        border: 1px solid #E2E8F0 !important;
         border-radius: 12px !important;
         overflow: hidden !important;
-        background: #fff !important;
     }
 
-    /* Info / warning / success cards */
+    /* ── ALERT / INFO ── */
     div[data-testid="stAlert"] {
         border-radius: 12px !important;
-        background: #fff !important;
     }
 
-    /* Section divider */
-    .vb-divider {
+    /* ── SPINNER ── */
+    div[data-testid="stSpinner"] { color: #F7931A !important; }
+
+    /* ── DOWNLOAD BUTTON ── */
+    div[data-testid="stDownloadButton"] > button {
+        background: #1A1033 !important;
+        color: #FFFFFF !important;
+        border-radius: 50px !important;
+        font-family: 'Manrope', sans-serif !important;
+        font-weight: 700 !important;
+        border: none !important;
+        padding: 0.6rem 1.4rem !important;
+        transition: all 0.2s !important;
+    }
+    div[data-testid="stDownloadButton"] > button:hover {
+        background: #F7931A !important;
+        transform: translateY(-2px) !important;
+    }
+
+    /* ── DIVIDER ── */
+    .vbc-divider {
         border: none;
-        border-top: 1px solid #E8E0D4;
+        border-top: 1px solid #E2E8F0;
         margin: 3rem 0;
     }
-
-    /* Metric cards */
-    div[data-testid="stMetric"] {
-        background: #fff !important;
-        border: 1px solid #E8E0D4 !important;
-        border-radius: 14px !important;
-        padding: 1.2rem 1.5rem !important;
+    .vbc-divider-dark {
+        border: none;
+        border-top: 1px solid rgba(255,255,255,0.12);
+        margin: 2.5rem 0;
     }
-    div[data-testid="stMetricLabel"] { color: #5A6478 !important; font-weight: 600 !important; }
-    div[data-testid="stMetricValue"] { color: #1E1E3F !important; font-weight: 900 !important; }
 
-    /* Expander */
-    details summary {
-        font-weight: 700 !important;
-        color: #1E1E3F !important;
+    /* ── RESULT TABLE (Uji Kalimat) ── */
+    .result-section {
+        background: rgba(255,255,255,0.07);
+        backdrop-filter: blur(8px);
+        border: 1px solid rgba(255,255,255,0.18);
+        border-radius: 20px;
+        padding: 2rem 2.5rem;
+        margin-top: 2rem;
     }
-
-    /* Content padding wrapper */
-    .page-content { padding: 0 4rem 4rem; }
-
-    h1,h2,h3,h4,h5,h6 { color: #1E1E3F !important; }
-    p, span, label { color: #5A6478 !important; }
-
-    /* Progress bar */
-    div[data-testid="stProgress"] > div > div {
-        background: #F7931A !important;
+    .result-title {
+        font-family: 'Manrope', sans-serif;
+        font-size: 1.15rem;
+        font-weight: 700;
+        color: #FFFFFF !important;
+        margin-bottom: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 8px;
     }
-    </style>
-    """, unsafe_allow_html=True)
+</style>
+""", unsafe_allow_html=True)
+
 
 # ==============================
-# NAVBAR HTML  (identical look to Vancouver Bitcoin)
+# HEADER / NAVBAR 
 # ==============================
-nav_bg    = "#FFFFFF"
-logo_text = "₿itcoin Sentimen"
-st.markdown(f"""
-<div class="vb-nav">
-  <div class="vb-nav-logo">
-    <span class="btc-icon">₿</span>
-    {logo_text}
-  </div>
-  <ul style="display:flex;gap:2.5rem;list-style:none;margin:0;padding:0;">
-    <li><a href="#" style="color:#1E1E3F;font-weight:600;font-size:0.93rem;text-decoration:none;">Uji Kalimat</a></li>
-    <li><a href="#" style="color:#1E1E3F;font-weight:600;font-size:0.93rem;text-decoration:none;">Analisis Batch</a></li>
-    <li><a href="#" style="color:#1E1E3F;font-weight:600;font-size:0.93rem;text-decoration:none;">Tentang</a></li>
-  </ul>
-  <div style="display:flex;gap:10px;align-items:center;">
-    <button class="vb-btn-outline" onclick="void(0)">Sign Up</button>
-    <button class="vb-btn-solid"   onclick="void(0)">📞 Hubungi</button>
-  </div>
+def set_page(page_name):
+    st.session_state.page = page_name
+
+st.markdown("""
+<div class="vbc-navbar">
+    <div class="vbc-logo">
+        <span class="vbc-logo-icon">₿</span>
+        Bitcoin Sentimen
+    </div>
 </div>
 """, unsafe_allow_html=True)
 
-# ── Streamlit nav tab buttons (below the HTML nav) ──────────────────────────
-tab_col1, tab_col2, spacer = st.columns([1.8, 1.8, 10])
 
-with tab_col1:
-    cls1 = "nav-btn-active" if st.session_state.page == "uji_kalimat" else "nav-btn-inactive"
-    st.markdown(f'<div class="{cls1}">', unsafe_allow_html=True)
+nav_col_pad, nav_col1, nav_col2, nav_col_end = st.columns([6, 1, 1, 1])
+
+with nav_col1:
+    is_uji = st.session_state.page == "uji_kalimat"
+    css_class = "btn-orange" if is_uji else "btn-ghost"
+    st.markdown(f'<div class="{css_class}" style="padding: 6px 0;">', unsafe_allow_html=True)
     if st.button("📝 Uji Kalimat", use_container_width=True, key="nav_uji"):
-        st.session_state.page = "uji_kalimat"
-        st.rerun()
-    st.markdown("</div>", unsafe_allow_html=True)
+        set_page("uji_kalimat"); st.rerun()
+    st.markdown('</div>', unsafe_allow_html=True)
 
-with tab_col2:
-    cls2 = "nav-btn-active" if st.session_state.page == "analisis_batch" else ("nav-btn-inactive2" if not is_dark else "nav-btn-inactive")
-    st.markdown(f'<div class="{cls2}">', unsafe_allow_html=True)
+with nav_col2:
+    is_batch = st.session_state.page == "analisis_batch"
+    css_class = "btn-orange" if is_batch else "btn-ghost"
+    st.markdown(f'<div class="{css_class}" style="padding: 6px 0;">', unsafe_allow_html=True)
     if st.button("📊 Analisis Batch", use_container_width=True, key="nav_batch"):
-        st.session_state.page = "analisis_batch"
-        st.rerun()
-    st.markdown("</div>", unsafe_allow_html=True)
+        set_page("analisis_batch"); st.rerun()
+    st.markdown('</div>', unsafe_allow_html=True)
+
+
+if st.session_state.page == "uji_kalimat":
+    st.markdown("""
+    <style>
+        /* Nav ghost text readable on orange bg */
+        .btn-ghost div[data-testid="stButton"] > button { color: rgba(255,255,255,0.6) !important; }
+        /* Override stApp bg to orange */
+        .stApp { background-color: #F7931A !important; }
+    </style>""", unsafe_allow_html=True)
+else:
+    st.markdown("""
+    <style>
+        .btn-ghost div[data-testid="stButton"] > button { color: rgba(255,255,255,0.6) !important; }
+        .stApp { background-color: #FEF8F0 !important; }
+    </style>""", unsafe_allow_html=True)
 
-# ── thin top-border under tab strip ──────────────────────────────────────────
-divider_color = "rgba(255,255,255,0.25)" if is_dark else "#E8E0D4"
-st.markdown(f"<hr style='border:none;border-top:1px solid {divider_color};margin:0 0 0 0;'>", unsafe_allow_html=True)
 
 # ==============================
 # DOWNLOAD RESOURCES & LOAD MODELS
@@ -558,24 +527,26 @@ stop_words = set(stopwords.words('english'))
 @st.cache_resource
 def load_all_models():
     vader = SentimentIntensityAnalyzer()
-    bertweet    = pipeline("sentiment-analysis", model="finiteautomata/bertweet-base-sentiment-analysis",  device=-1, truncation=True, max_length=128)
-    roberta     = pipeline("sentiment-analysis", model="cardiffnlp/twitter-roberta-base-sentiment",         device=-1, truncation=True, max_length=512)
-    roberta_large = pipeline("sentiment-analysis", model="siebert/sentiment-roberta-large-english",         device=-1, truncation=True, max_length=512)
+    bertweet    = pipeline("sentiment-analysis", model="finiteautomata/bertweet-base-sentiment-analysis",    device=-1, truncation=True, max_length=128)
+    roberta     = pipeline("sentiment-analysis", model="cardiffnlp/twitter-roberta-base-sentiment",          device=-1, truncation=True, max_length=512)
+    roberta_large = pipeline("sentiment-analysis", model="siebert/sentiment-roberta-large-english",          device=-1, truncation=True, max_length=512)
     return vader, bertweet, roberta, roberta_large
 
-with st.spinner('Mempersiapkan model NLP…'):
+with st.spinner('...'):
     vader, bertweet, roberta, roberta_large = load_all_models()
 
+
 # ==============================
-# HELPER FUNCTIONS  (unchanged logic)
+# FUNGSI CLEAN TEXT & MAPPING
 # ==============================
 def clean_text(text):
     text = str(text).lower()
     text = re.sub(r"http\S+", "", text)
-    text = re.sub(r"@\w+",    "", text)
-    text = re.sub(r"#\w+",    "", text)
+    text = re.sub(r"@\w+", "", text)
+    text = re.sub(r"#\w+", "", text)
     text = re.sub(r"[^\w\s]", "", text)
-    tokens = [w for w in text.split() if w not in stop_words]
+    tokens = text.split()
+    tokens = [word for word in tokens if word not in stop_words]
     return " ".join(tokens)
 
 def classify_tb(score):
@@ -592,230 +563,228 @@ def map_bertweet(label):
 def get_daily_label(score):
     if score > 0.05:  return 'Positive'
     elif score < -0.05: return 'Negative'
-    return 'Neutral'
-
-def fmt_label(label):
-    if label == 'positive': return "🟢 Positive"
-    if label == 'negative': return "🔴 Negative"
-    return "⚪ Neutral"
+    else: return 'Neutral'
 
 
 # ==============================================================================
-# HALAMAN 1: UJI KALIMAT  (orange hero – mirip Vancouver Bitcoin hero section)
+# HALAMAN 1 — UJI KALIMAT
 # ==============================================================================
 if st.session_state.page == "uji_kalimat":
 
-    # ── Hero two-column layout ────────────────────────────────────────────────
-    col_text, col_img = st.columns([1.05, 1], gap="large")
+
+    st.markdown('<div class="hero-wrap">', unsafe_allow_html=True)
+
+    col_text, col_img = st.columns([1.1, 1], gap="large")
 
     with col_text:
         st.markdown("""
-        <div style="padding: 4rem 0 2rem 4rem;">
-          <span class="hero-badge">Analisis Sentimen Kripto</span>
-          <h1 class="hero-h1">
-            Bitcoin Volatility<br><em>vs Public Sentiment</em>
-          </h1>
-          <p class="hero-sub">
-            Analisis Volatilitas Harga Bitcoin Terhadap Sentimen Publik
-            Pada Platform X – Berbasis Python &amp; 5 Model NLP.
-          </p>
-          <div class="hero-researcher">
-            🎓 &nbsp;<strong>Peneliti:</strong> Arya Galuh Saputra &nbsp;(H1D022022)
-          </div>
+        <div class="hero-badge">🔬 Penelitian Ilmiah · NLP · Python</div>
+        <h1 class="hero-title">
+            Bitcoin Volatility<br>
+            <span>vs Public</span> Sentiment
+        </h1>
+        <p class="hero-sub">
+            Analisis Volatilitas Harga Bitcoin Terhadap Sentimen Publik 
+            Pada Platform X Berbasis Python — 5 Model NLP.
+        </p>
+        <div class="hero-card">
+            <div class="hero-card-dot"></div>
+            <p><b>Peneliti:</b> Arya Galuh Saputra &nbsp;·&nbsp; H1D022022</p>
         </div>
         """, unsafe_allow_html=True)
 
-        with st.container():
-            # input wrapped in same left padding
-            st.markdown('<div style="padding: 0 0 0 4rem;">', unsafe_allow_html=True)
-            user_input = st.text_area(
-                "✍️  Masukkan Tweet (Bahasa Inggris):",
-                "Great, Bitcoin just crashed another 10% today.",
-                height=130,
-            )
-            st.markdown("<br>", unsafe_allow_html=True)
-            st.markdown('<div class="analyze-btn">', unsafe_allow_html=True)
-            analyze_btn = st.button("🚀  Analisis Sentimen Sekarang", use_container_width=True)
-            st.markdown("</div></div>", unsafe_allow_html=True)
+        user_input = st.text_area(
+            "Masukkan Tweet (Bahasa Inggris):",
+            "Great, Bitcoin just crashed another 10% today.",
+            height=120
+        )
+
+        st.markdown("<br>", unsafe_allow_html=True)
+
+        col_btn1, col_btn2 = st.columns([1.6, 1])
+        with col_btn1:
+            st.markdown('<div class="btn-primary">', unsafe_allow_html=True)
+            analyze_btn = st.button("🚀 Analisis Sentimen Sekarang", use_container_width=True)
+            st.markdown('</div>', unsafe_allow_html=True)
+        with col_btn2:
+            st.markdown('<div class="btn-outline-white">', unsafe_allow_html=True)
+            if st.button("📊 Analisis Batch →", use_container_width=True):
+                set_page("analisis_batch"); st.rerun()
+            st.markdown('</div>', unsafe_allow_html=True)
 
     with col_img:
-        st.markdown("<div style='padding: 3rem 3rem 2rem 0;'>", unsafe_allow_html=True)
         try:
             st.image(img_hero, use_container_width=True)
         except Exception:
-            # Placeholder visual when image is missing
+            
             st.markdown("""
-            <div style="
-                background: rgba(255,255,255,0.15);
-                border-radius: 20px;
-                height: 380px;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                gap: 1rem;
-                backdrop-filter: blur(4px);
-                border: 2px dashed rgba(255,255,255,0.4);">
-              <div style="font-size:5rem;">₿</div>
-              <p style="color:rgba(255,255,255,0.8);font-size:1rem;margin:0;font-weight:600;">
-                crypto-currency-concept-830px.png
-              </p>
-              <p style="color:rgba(255,255,255,0.55);font-size:0.85rem;margin:0;">
-                Letakkan file gambar di direktori yang sama
-              </p>
-            </div>
-            """, unsafe_allow_html=True)
-        st.markdown("</div>", unsafe_allow_html=True)
-
-    # ── Results section ───────────────────────────────────────────────────────
+            <div style="background:rgba(255,255,255,0.1);border:2px dashed rgba(255,255,255,0.3);
+                border-radius:20px;height:320px;display:flex;align-items:center;
+                justify-content:center;color:rgba(255,255,255,0.5);font-size:1rem;
+                text-align:center;padding:2rem;">
+                🖼️ Tambahkan<br><code>crypto-currency-concept-830px.png</code><br>ke folder project
+            </div>""", unsafe_allow_html=True)
+
+    st.markdown('</div>', unsafe_allow_html=True)  
+
+   
     if analyze_btn:
-        st.markdown('<div style="padding: 0 4rem 4rem;">', unsafe_allow_html=True)
-        st.markdown(f"<hr class='vb-divider'>", unsafe_allow_html=True)
+        st.markdown("""
+        <div class="result-wrap">
+            <p class="section-label">Output Analisis</p>
+            <p class="section-title">📋 Hasil Deteksi Sentimen</p>
+        </div>""", unsafe_allow_html=True)
 
-        # Language check
         try:
             if detect(user_input) != 'en':
-                st.warning("⚠️ Teks sepertinya bukan bahasa Inggris. Hasil mungkin memiliki bias.")
+                st.warning("⚠️ Teks sepertinya bukan bahasa Inggris. Hasil prediksi mungkin memiliki bias.")
         except:
             pass
 
         text = clean_text(user_input)
 
-        with st.spinner("Model NLP sedang memproses teks…"):
-            try:    v_label = "positive" if vader.polarity_scores(text)['compound'] > 0.05 else "negative" if vader.polarity_scores(text)['compound'] < -0.05 else "neutral"
+        with st.spinner("Mesin NLP sedang memproses..."):
+            try: v_label = "positive" if vader.polarity_scores(text)['compound'] > 0.05 else ("negative" if vader.polarity_scores(text)['compound'] < -0.05 else "neutral")
             except: v_label = "neutral"
 
-            try:    t_label = classify_tb(TextBlob(text).sentiment.polarity)
+            try: t_label = classify_tb(TextBlob(text).sentiment.polarity)
             except: t_label = "neutral"
 
-            try:    b_label = map_bertweet(bertweet(text)[0]['label'])
+            try: b_label = map_bertweet(bertweet(text)[0]['label'])
             except: b_label = "neutral"
 
-            try:    r_label = map_roberta(roberta(text)[0]['label'])
+            try: r_label = map_roberta(roberta(text)[0]['label'])
             except: r_label = "neutral"
 
-            try:    rl_label = roberta_large(text)[0]['label'].lower()
+            try: rl_label = roberta_large(text)[0]['label'].lower()
             except: rl_label = "neutral"
 
-        # Result card (white box on orange bg)
-        st.markdown("""
-        <div style="
-            background:#ffffff;
-            border-radius:20px;
-            padding:2rem 2.5rem;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.15);">
-          <h3 style="
-              font-family:'Nunito',sans-serif;
-              font-weight:900;
-              font-size:1.5rem;
-              color:#1E1E3F !important;
-              text-align:center;
-              margin-bottom:1.5rem;">
-            📋  Hasil Deteksi Sentimen
-          </h3>
-        """, unsafe_allow_html=True)
-
-        result_df = pd.DataFrame({
-            "Metode NLP":      ["VADER", "TextBlob", "BERTweet", "RoBERTa Base", "RoBERTa Large"],
-            "Hasil Sentimen":  [fmt_label(v_label), fmt_label(t_label),
-                                fmt_label(b_label), fmt_label(r_label), fmt_label(rl_label)],
-        })
-
-        col_tbl, _ = st.columns([2, 1])
-        with col_tbl:
-            st.dataframe(result_df, use_container_width=True, hide_index=True)
-
-        st.markdown("</div>", unsafe_allow_html=True)
-        st.markdown("</div>", unsafe_allow_html=True)
+            def format_label(label):
+                if label == 'positive': return "🟢 Positive"
+                elif label == 'negative': return "🔴 Negative"
+                return "⚪ Neutral"
+
+            def badge_color(label):
+                return {"positive": "#D1FAE5", "negative": "#FEE2E2", "neutral": "#F1F5F9"}[label]
+
+            def badge_text_color(label):
+                return {"positive": "#065F46", "negative": "#991B1B", "neutral": "#475569"}[label]
+
+            results = [
+                ("VADER",         v_label),
+                ("TextBlob",      t_label),
+                ("BERTweet",      b_label),
+                ("RoBERTa Base",  r_label),
+                ("RoBERTa Large", rl_label),
+            ]
+
+          
+            st.markdown("<div style='padding: 0 3rem 3rem;'>", unsafe_allow_html=True)
+            col_a, col_b = st.columns(2)
+
+            for i, (method, label) in enumerate(results):
+                col = col_a if i % 2 == 0 else col_b
+                bg  = badge_color(label)
+                tc  = badge_text_color(label)
+                icon = "🟢" if label == "positive" else ("🔴" if label == "negative" else "⚪")
+                with col:
+                    st.markdown(f"""
+                    <div style="background:#F8FAFC;border:1px solid #E2E8F0;border-left:4px solid {'#10B981' if label=='positive' else ('#EF4444' if label=='negative' else '#94A3B8')};
+                        border-radius:14px;padding:1.1rem 1.4rem;margin-bottom:1rem;
+                        display:flex;align-items:center;justify-content:space-between;">
+                        <div>
+                            <div style="font-family:'Manrope',sans-serif;font-weight:700;font-size:0.78rem;
+                                letter-spacing:1px;text-transform:uppercase;color:#94A3B8;margin-bottom:4px;">{method}</div>
+                            <div style="font-family:'Manrope',sans-serif;font-weight:800;font-size:1.1rem;color:#1A1033;">{icon} {label.capitalize()}</div>
+                        </div>
+                        <div style="background:{bg};color:{tc};font-size:0.75rem;font-weight:700;
+                            padding:4px 12px;border-radius:50px;letter-spacing:0.5px;">
+                            {label.upper()}
+                        </div>
+                    </div>
+                    """, unsafe_allow_html=True)
+
+            st.markdown("</div>", unsafe_allow_html=True)
 
 
 # ==============================================================================
-# HALAMAN 2: ANALISIS BATCH  (cream/light – mirip Vancouver Bitcoin slice section)
+# HALAMAN 2 — ANALISIS BATCH
 # ==============================================================================
 elif st.session_state.page == "analisis_batch":
 
     plt.style.use('default')
     sns.set_theme(style="whitegrid", rc={
-        "axes.facecolor":  "#FDFAF7",
-        "figure.facecolor":"#FFFFFF",
-        "axes.edgecolor":  "#E8E0D4",
-        "text.color":      "#1E1E3F",
-        "xtick.color":     "#5A6478",
-        "ytick.color":     "#5A6478",
-        "grid.color":      "#F1EBE3",
+        "axes.facecolor": "#F8FAFC",
+        "figure.facecolor": "#FFFFFF",
+        "axes.edgecolor": "#E2E8F0",
+        "text.color": "#0F172A",
+        "xtick.color": "#64748B",
+        "ytick.color": "#64748B",
+        "grid.color": "#F1F5F9",
     })
 
-    # ── Hero two-column (image left / form right – mirrors image 2) ──────────
-    col_img_batch, col_form = st.columns([1, 1.3], gap="large")
 
-    with col_img_batch:
-        st.markdown("<div style='padding: 4rem 0 2rem 4rem;'>", unsafe_allow_html=True)
-        try:
-            st.image(img_batch, use_container_width=True)
-        except Exception:
-            st.markdown("""
-            <div style="
-                background: #fff;
-                border-radius: 20px;
-                height: 340px;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                gap: 1rem;
-                border: 2px dashed #F7931A;">
-              <div style="font-size:4rem;">📊</div>
-              <p style="color:#5A6478;font-size:0.9rem;margin:0;font-weight:600;">
-                slice3-1-1536x830.png
-              </p>
-            </div>
-            """, unsafe_allow_html=True)
-        st.markdown("</div>", unsafe_allow_html=True)
-
-    with col_form:
+    st.markdown('<div class="batch-wrap">', unsafe_allow_html=True)
+
+    col_upload, col_img_b = st.columns([1.4, 1], gap="large")
+
+    with col_upload:
         st.markdown("""
-        <div style="padding: 4rem 4rem 2rem 1rem;">
-          <span class="hero-badge">Analisis Massal Tweet Bitcoin</span>
-          <h2 class="hero-h1">Analisis Batch Data</h2>
-          <p class="hero-sub">
-            Unggah file rekam jejak tweet (.txt) untuk diekstraksi dan dianalisis
-            secara massal terhadap volatilitas pasar Bitcoin.
-          </p>
-        </div>
-        """, unsafe_allow_html=True)
+        <p class="batch-eyebrow">⚙️ Analisis · Batch Processing</p>
+        <h2 class="batch-title">Analisis Batch<br>Data Tweet</h2>
+        <p class="batch-sub">
+            Unggah file tweet (.txt) untuk diekstraksi dan 
+            dianalisis secara masal terhadap volatilitas pasar Bitcoin.
+        </p>""", unsafe_allow_html=True)
 
-        st.markdown('<div style="padding: 0 4rem 0 1rem;">', unsafe_allow_html=True)
         tweet_files = st.file_uploader(
-            "📁  Pilih file Tweet (.txt)",
+            "Pilih file Tweet (.txt)",
             type=['txt'],
-            accept_multiple_files=True,
+            accept_multiple_files=True
         )
 
-        with st.expander("📌  Format TXT yang Didukung"):
+        with st.expander("📌 Format TXT yang Didukung"):
             st.code(
                 "username | 2024-03-01 14:00:00\n"
                 "Isi tweet baris pertama di sini\n\n"
                 "username2 | 2024-03-01 15:30:00\n"
                 "Isi tweet baris kedua di sini",
-                language="text",
+                language="text"
             )
 
         st.markdown("<br>", unsafe_allow_html=True)
-        st.markdown('<div class="analyze-btn">', unsafe_allow_html=True)
-        analyze_batch_btn = st.button("⚙️  Mulai Eksekusi Analisis", key="batch_btn", use_container_width=True)
-        st.markdown("</div></div>", unsafe_allow_html=True)
+        st.markdown('<div class="btn-primary">', unsafe_allow_html=True)
+        analyze_batch_btn = st.button("⚙️ Mulai Eksekusi Analisis", key="batch_btn", use_container_width=False)
+        st.markdown('</div>', unsafe_allow_html=True)
 
-    # ── Batch processing logic (unchanged) ───────────────────────────────────
+    with col_img_b:
+        try:
+            st.image(img_batch, use_container_width=True)
+        except Exception:
+            st.markdown("""
+            <div style="background:rgba(247,147,26,0.08);border:2px dashed #F7931A;
+                border-radius:20px;height:280px;display:flex;align-items:center;
+                justify-content:center;color:#F7931A;font-size:0.9rem;text-align:center;padding:2rem;">
+                🖼️ Tambahkan<br><code>slice3-1-1536x830.png</code><br>ke folder project
+            </div>""", unsafe_allow_html=True)
+
+    st.markdown('</div>', unsafe_allow_html=True)  
+
+    
     if tweet_files and analyze_batch_btn:
-        st.markdown('<div style="padding: 0 4rem 4rem;">', unsafe_allow_html=True)
-        st.markdown("<hr class='vb-divider'>", unsafe_allow_html=True)
+        st.markdown('<div class="result-wrap">', unsafe_allow_html=True)
+        st.markdown("""
+        <p class="section-label">Hasil Pemrosesan</p>
+        <p class="section-title">📊 Dashboard Analisis</p>
+        """, unsafe_allow_html=True)
 
         tweet_files = sorted(tweet_files, key=lambda x: x.name)
+
         data = []
-        progress_bar = st.progress(0, text="Mengekstrak sentimen dari data…")
+        progress_bar = st.progress(0, text="Mengekstrak sentimen dari data...")
 
-        total_uploaded = 0
-        total_skipped  = 0
+        total_tweets_uploaded = 0
+        total_tweets_skipped  = 0
 
         for idx, file in enumerate(tweet_files):
             content = file.getvalue().decode("utf-8").replace("\r\n", "\n").strip()
@@ -826,38 +795,42 @@ elif st.session_state.page == "analisis_batch":
                 if len(parts) != 2: continue
 
                 meta, text_raw = parts
+
                 try:
                     DetectorFactory.seed = 0
                     lang = detect(text_raw)
                     if lang != 'en':
-                        total_skipped += 1
+                        total_tweets_skipped += 1
                         continue
                 except:
-                    total_skipped += 1
+                    total_tweets_skipped += 1
                     continue
 
-                username, date_val = (meta.split(" | ") if " | " in meta else ("unknown", "unknown"))
+                username, date_val = meta.split(" | ") if " | " in meta else ("unknown", "unknown")
                 short_date = date_val[:10]
                 text = clean_text(text_raw)
 
-                try:    v_l = "positive" if vader.polarity_scores(text)['compound'] > 0.05 else "negative" if vader.polarity_scores(text)['compound'] < -0.05 else "neutral"
-                except: v_l = "neutral"
-                try:    tb_l = classify_tb(TextBlob(text).sentiment.polarity)
-                except: tb_l = "neutral"
-                try:    bt_l = map_bertweet(bertweet(text)[0]['label'])
-                except: bt_l = "neutral"
-                try:    ro_l = map_roberta(roberta(text)[0]['label'])
-                except: ro_l = "neutral"
-                try:    rl_l = roberta_large(text)[0]['label'].lower()
-                except: rl_l = "neutral"
+                try: v_score = vader.polarity_scores(text)['compound']; vader_label = "positive" if v_score > 0.05 else ("negative" if v_score < -0.05 else "neutral")
+                except: vader_label = "neutral"
+
+                try: tb_label = classify_tb(TextBlob(text).sentiment.polarity)
+                except: tb_label = "neutral"
+
+                try: bertweet_label = map_bertweet(bertweet(text)[0]['label'])
+                except: bertweet_label = "neutral"
+
+                try: roberta_label = map_roberta(roberta(text)[0]['label'])
+                except: roberta_label = "neutral"
+
+                try: roberta_large_label = roberta_large(text)[0]['label'].lower()
+                except: roberta_large_label = "neutral"
 
                 data.append({
-                    "date": short_date,  "raw_tweet": text_raw.strip(),
-                    "cleaned_tweet": text,
-                    "vader": v_l, "textblob": tb_l, "bertweet": bt_l,
-                    "roberta": ro_l, "roberta_large": rl_l,
+                    "date": short_date, "raw_tweet": text_raw.strip(), "cleaned_tweet": text,
+                    "vader": vader_label, "textblob": tb_label, "bertweet": bertweet_label,
+                    "roberta": roberta_label, "roberta_large": roberta_large_label,
                 })
-                total_uploaded += 1
+                total_tweets_uploaded += 1
 
             progress_bar.progress((idx + 1) / len(tweet_files),
                                   text=f"Memproses file {idx+1} dari {len(tweet_files)}")
@@ -867,19 +840,17 @@ elif st.session_state.page == "analisis_batch":
         if df.empty:
             st.error("❌ Data kosong. Pastikan format TXT benar dan tweet berbahasa Inggris.")
         else:
-            # ── Metrics ──────────────────────────────────────────────────────
-            st.markdown("### 📊 Ringkasan Pemrosesan")
-            c1, c2, c3 = st.columns(3)
-            c1.metric("Tweet Diproses",          f"{total_uploaded}",  border=True)
-            c2.metric("Tweet Diabaikan (Non-EN)", f"{total_skipped}",   border=True)
-            c3.metric("Total Model NLP",          "5 Model",            border=True)
-
-            # ── Bitcoin price API ─────────────────────────────────────────────
+            col_m1, col_m2, col_m3 = st.columns(3)
+            col_m1.metric("Tweet Diproses",        f"{total_tweets_uploaded}", border=True)
+            col_m2.metric("Tweet Diabaikan (Non-EN)", f"{total_tweets_skipped}", border=True)
+            col_m3.metric("Model NLP",              "5 Model",                 border=True)
+
             target_dates = sorted(df['date'].unique())
-            start_unix   = int(datetime.strptime(target_dates[0],  "%Y-%m-%d").replace(tzinfo=timezone.utc).timestamp()) - 86400
-            end_unix     = int(datetime.strptime(target_dates[-1], "%Y-%m-%d").replace(tzinfo=timezone.utc).timestamp()) + 86400
+            start_unix = int(datetime.strptime(target_dates[0],  "%Y-%m-%d").replace(tzinfo=timezone.utc).timestamp()) - 86400
+            end_unix   = int(datetime.strptime(target_dates[-1], "%Y-%m-%d").replace(tzinfo=timezone.utc).timestamp()) + 86400
+
+            st.info("📡 Mengambil data harga Bitcoin dari CoinGecko API...")
 
-            st.info("📡 Mengambil data harga Bitcoin dari CoinGecko API…")
             url     = "https://api.coingecko.com/api/v3/coins/bitcoin/market_chart/range"
             params  = {"vs_currency": "usd", "from": start_unix, "to": end_unix}
             headers = {"accept": "application/json", "User-Agent": "Mozilla/5.0"}
@@ -892,10 +863,13 @@ elif st.session_state.page == "analisis_batch":
                     st.error(f"API Error {res.status_code}: {res.text}")
                 else:
                     data_json = res.json()
+
                     if "prices" not in data_json:
                         st.error("Data harga tidak ditemukan di respons API.")
                     else:
-                        df_price = pd.DataFrame(data_json["prices"], columns=["timestamp", "price"])
+                        prices = data_json["prices"]
+
+                        df_price = pd.DataFrame(prices, columns=["timestamp", "price"])
                         df_price["date"] = pd.to_datetime(df_price["timestamp"], unit="ms").dt.date
                         df_price = df_price.groupby("date")["price"].mean().reset_index()
                         df_price["pct_change"]  = df_price["price"].pct_change() * 100
@@ -904,122 +878,123 @@ elif st.session_state.page == "analisis_batch":
                         df_price = df_price[df_price["date"].isin(pd.to_datetime(target_dates).date)]
 
                         if df_price.empty:
-                            st.warning("⚠️ Data Harga API kosong. Periksa rentang tanggal di .txt (yyyy-mm-dd).")
+                            st.warning("⚠️ Data Harga API kosong. Pastikan rentang tanggal di .txt sesuai (yyyy-mm-dd).")
                         else:
-                            st.markdown("<hr class='vb-divider'>", unsafe_allow_html=True)
+                            st.markdown("<hr class='vbc-divider'>", unsafe_allow_html=True)
 
-                            st.markdown("#### 🗣️ Data Sentimen Mentah")
-                            raw_cols = ["date", "raw_tweet", "vader", "textblob", "bertweet", "roberta", "roberta_large"]
-                            st.dataframe(df[raw_cols], use_container_width=True, hide_index=True)
+                            st.markdown("🗣️ Data Sentimen Mentah")
+                            raw_display_cols = ["date","raw_tweet","vader","textblob","bertweet","roberta","roberta_large"]
+                            st.dataframe(df[raw_display_cols], use_container_width=True, hide_index=True)
 
                             sentiment_map = {"positive": 1, "neutral": 0, "negative": -1}
                             df_score = df.copy()
-                            models   = ["vader", "textblob", "bertweet", "roberta", "roberta_large"]
-                            for col in models:
+                            for col in ["vader","textblob","bertweet","roberta","roberta_large"]:
                                 df_score[col] = df_score[col].map(sentiment_map)
 
-                            df_sent_daily = df_score.groupby("date")[models].mean().reset_index()
-                            df_sent_daily["date"] = pd.to_datetime(df_sent_daily["date"]).dt.date
+                            models = ["vader","textblob","bertweet","roberta","roberta_large"]
+                            df_sentiment_daily = df_score.groupby("date")[models].mean().reset_index()
+                            df_sentiment_daily["date"] = pd.to_datetime(df_sentiment_daily["date"]).dt.date
+
                             for col in models:
-                                df_sent_daily[f"{col}_label"] = df_sent_daily[col].apply(get_daily_label)
+                                df_sentiment_daily[f"{col}_label"] = df_sentiment_daily[col].apply(get_daily_label)
 
-                            daily_cols = ["date"]
-                            for col in models: daily_cols.extend([col, f"{col}_label"])
+                            daily_display_cols = ["date"]
+                            for col in models:
+                                daily_display_cols.extend([col, f"{col}_label"])
 
-                            st.markdown("<br>#### ₿ Historis Harga & Volatilitas Bitcoin", unsafe_allow_html=True)
+                            st.markdown("₿ Data Harga Bitcoin & Volatilitas Bitcoin")
                             st.dataframe(df_price[["date","price","pct_change","log_return"]], use_container_width=True, hide_index=True)
 
-                            df_merged = pd.merge(df_price, df_sent_daily, on="date", how="inner")
+                            df_merged = pd.merge(df_price, df_sentiment_daily, on="date", how="inner")
+
+                            st.markdown("🗂️ Dataset Final (Terintegrasi)")
+                            final_display_cols = ["date","price","pct_change","log_return"] + [c for c in daily_display_cols if c != "date"]
+                            st.dataframe(df_merged[final_display_cols], use_container_width=True, hide_index=True)
 
-                            st.markdown("<br>### 🗂️ Dataset Final (Terintegrasi)", unsafe_allow_html=True)
-                            final_cols = ["date","price","pct_change","log_return"] + [c for c in daily_cols if c != "date"]
-                            st.dataframe(df_merged[final_cols], use_container_width=True, hide_index=True)
+                            col_dl1, col_dl2, _ = st.columns([1, 1, 3])
+                            csv_data = df_merged.to_csv(index=False).encode('utf-8')
+                            col_dl1.download_button("📥 Unduh CSV",   data=csv_data, file_name="sentiment_volatility.csv",  mime="text/csv", use_container_width=True)
 
-                            # Download
-                            dl1, dl2, _ = st.columns([1, 1, 3])
-                            csv_bytes = df_merged.to_csv(index=False).encode('utf-8')
-                            dl1.download_button("📥 Unduh CSV",   data=csv_bytes, file_name="sentiment_volatility.csv",  mime="text/csv",                   use_container_width=True)
-                            buf = io.BytesIO()
-                            with pd.ExcelWriter(buf, engine='xlsxwriter') as w: df_merged.to_excel(w, index=False)
-                            dl2.download_button("📥 Unduh Excel", data=buf.getvalue(), file_name="sentiment_volatility.xlsx", mime="application/vnd.ms-excel", use_container_width=True)
+                            buffer = io.BytesIO()
+                            with pd.ExcelWriter(buffer, engine='xlsxwriter') as writer:
+                                df_merged.to_excel(writer, index=False)
+                            col_dl2.download_button("📥 Unduh Excel", data=buffer.getvalue(), file_name="sentiment_volatility.xlsx", mime="application/vnd.ms-excel", use_container_width=True)
 
-                            st.markdown("<hr class='vb-divider'>", unsafe_allow_html=True)
+                            st.markdown("<hr class='vbc-divider'>", unsafe_allow_html=True)
 
-                            # ── Pearson correlation ───────────────────────────────────────
+                            # Pearson
                             st.subheader("🔬 Uji Korelasi Pearson")
-                            st.caption("Menganalisis hubungan antara skor sentimen harian dan volatilitas log-return BTC.")
+                            st.caption("Menganalisis hubungan statistik antara skor sentimen harian dan volatilitas log-return BTC.")
 
-                            corr_data, raw_corr = [], []
-                            for method in models:
+                            corr_data = []
+                            raw_corr_results = []
+
+                            for method in ["vader","textblob","bertweet","roberta","roberta_large"]:
                                 corr, pval = pearsonr(df_merged["log_return"], df_merged[method])
-                                corr_data.append({
-                                    "Metode":       method.upper(),
-                                    "r (Korelasi)": f"{corr:.4f}",
-                                    "Arah":         "Positif" if corr > 0 else "Negatif",
-                                    "p-value":      f"{pval:.4f}",
-                                    "Status":       "Signifikan" if pval < 0.05 else "Tidak Signifikan",
-                                })
-                                raw_corr.append({"metode": method.upper(), "r": corr, "p": pval})
+                                arah = "Positif" if corr > 0 else "Negatif"
+                                sig  = "Signifikan" if pval < 0.05 else "Tidak Signifikan"
+                                corr_data.append({"Metode": method.upper(), "r (Korelasi)": f"{corr:.4f}", "Arah": arah, "p-value": f"{pval:.4f}", "Status": sig})
+                                raw_corr_results.append({"metode": method.upper(), "r": corr, "p": pval})
 
                             st.table(pd.DataFrame(corr_data))
 
-                            # ── Line chart ────────────────────────────────────────────────
-                            st.markdown("<br>", unsafe_allow_html=True)
-                            st.subheader("📈 Trend: Sentimen vs BTC Volatility")
-
-                            fig_line, ax = plt.subplots(figsize=(14, 5))
-                            ax.plot(df_merged["date"], df_merged["log_return"],
-                                    label="BTC Log Return", color="#F7931A", linewidth=3)
-                            colors = ["#1E1E3F","#10B981","#EC4899","#14B8A6","#6366F1"]
-                            for i, m in enumerate(["vader","textblob","roberta","roberta_large","bertweet"]):
-                                ax.plot(df_merged["date"], df_merged[m],
-                                        label=f"Sentimen: {m.upper()}", color=colors[i],
-                                        linewidth=1.5, linestyle="--", alpha=0.8)
-                            ax.set_title("Pergerakan Sentimen vs Log Return Bitcoin",
-                                         fontsize=14, pad=14, fontweight='bold', color="#1E1E3F")
-                            ax.set_xlabel("Tanggal", fontsize=11); ax.set_ylabel("Nilai Metrik", fontsize=11)
-                            ax.legend(loc='upper left', bbox_to_anchor=(1, 1), frameon=True)
-                            plt.tight_layout(); st.pyplot(fig_line)
-
-                            # ── Scatter plots ─────────────────────────────────────────────
-                            st.markdown("<br>### 🔵 Pola Distribusi Scatter", unsafe_allow_html=True)
-                            cols_sc = st.columns(3)
-                            for i, method in enumerate(models):
-                                with cols_sc[i % 3]:
-                                    fig_sc, ax_sc = plt.subplots(figsize=(5, 4))
-                                    sns.regplot(data=df_merged, x=method, y="log_return", ax=ax_sc,
-                                                scatter_kws={"s": 40, "color": "#1E1E3F", "alpha": 0.5},
+                            # Line chart
+                            st.subheader("📈 Trend Analisis: Sentiment vs BTC Volatility")
+                            fig_line, ax_line = plt.subplots(figsize=(14, 6))
+                            ax_line.plot(df_merged["date"], df_merged["log_return"], label="BTC Log Return", color="#F7931A", linewidth=3)
+                            colors = ["#3B82F6","#10B981","#EC4899","#14B8A6","#6366F1"]
+                            for i, method in enumerate(["vader","textblob","roberta","roberta_large","bertweet"]):
+                                ax_line.plot(df_merged["date"], df_merged[method], label=f"Sentiment: {method.upper()}", color=colors[i], linewidth=1.5, linestyle="--", alpha=0.8)
+                            ax_line.set_title("Pergerakan Sentimen vs Log Return Bitcoin", fontsize=14, pad=15, fontweight='bold')
+                            ax_line.set_xlabel("Tanggal", fontsize=11)
+                            ax_line.set_ylabel("Nilai Metrik", fontsize=11)
+                            ax_line.legend(loc='upper left', bbox_to_anchor=(1, 1), frameon=True)
+                            plt.tight_layout()
+                            st.pyplot(fig_line)
+
+                            # Scatter
+                            st.markdown("🔵 Pola Distribusi Scatter")
+                            cols = st.columns(3)
+                            for idx2, method in enumerate(["vader","textblob","bertweet","roberta","roberta_large"]):
+                                with cols[idx2 % 3]:
+                                    fig_s, ax_s = plt.subplots(figsize=(5, 4))
+                                    sns.regplot(data=df_merged, x=method, y="log_return", ax=ax_s,
+                                                scatter_kws={"s": 40, "color": "#1A1033", "alpha": 0.5},
                                                 line_kws={"color": "#F7931A", "linewidth": 2})
-                                    ax_sc.set_title(method.upper(), fontweight='bold', color="#1E1E3F")
-                                    ax_sc.set_xlabel("Sentimen Score"); ax_sc.set_ylabel("Log Return")
-                                    plt.tight_layout(); st.pyplot(fig_sc)
-
-                            # ── Conclusion ────────────────────────────────────────────────
-                            st.markdown("<hr class='vb-divider'>", unsafe_allow_html=True)
+                                    ax_s.set_title(f"{method.upper()}", fontweight='bold')
+                                    ax_s.set_xlabel("Sentimen Score")
+                                    ax_s.set_ylabel("Log Return")
+                                    plt.tight_layout()
+                                    st.pyplot(fig_s)
+
+                            # Kesimpulan
+                            st.markdown("<hr class='vbc-divider'>", unsafe_allow_html=True)
                             st.subheader("📝 Kesimpulan Otomatis")
 
-                            date_max = df_merged.loc[df_merged["log_return"].idxmax(), "date"]
-                            date_min = df_merged.loc[df_merged["log_return"].idxmin(), "date"]
-                            sig_models      = [r["metode"] for r in raw_corr if r["p"] < 0.05]
-                            strongest_model = max(raw_corr, key=lambda x: abs(x["r"]))
-                            arah_text       = "berbanding lurus (positif)" if strongest_model["r"] > 0 else "berbanding terbalik (negatif)"
+                            max_idx = df_merged["log_return"].idxmax()
+                            min_idx = df_merged["log_return"].idxmin()
+                            date_max = df_merged.loc[max_idx, "date"]
+                            date_min = df_merged.loc[min_idx, "date"]
+
+                            sig_models     = [r["metode"] for r in raw_corr_results if r["p"] < 0.05]
+                            strongest      = max(raw_corr_results, key=lambda x: abs(x["r"]))
+                            arah_text      = "berbanding lurus (positif)" if strongest["r"] > 0 else "berbanding terbalik (negatif)"
 
-                            st.write(f"Puncak lonjakan positif (*max log return*) terjadi pada **{date_max}**, "
-                                     f"sedangkan penurunan ekstrem terjadi pada **{date_min}**.")
+                            st.write(f"Puncak lonjakan positif (*max log return*) terjadi pada **{date_max}**, sedangkan penurunan ekstrem terjadi pada **{date_min}**.")
 
                             if sig_models:
-                                st.success(
-                                    f"**Hipotesis Diterima (H1):** Ditemukan korelasi linier signifikan pada metode "
-                                    f"**{', '.join(sig_models)}** (*p-value* < 0.05). "
-                                    f"Metode terkuat: **{strongest_model['metode']}** — hubungan **{arah_text}**."
-                                )
+                                st.success(f"""
+                                **Hipotesis Diterima (H1):** Ditemukan korelasi linier yang signifikan pada metode **{', '.join(sig_models)}** (*p-value* < 0.05). 
+                                Metode dengan pemetaan respons pasar terkuat adalah **{strongest['metode']}**, dengan sifat hubungan **{arah_text}**.
+                                """)
                             else:
-                                st.warning(
-                                    "**Hipotesis Ditolak (H0 Diterima):** Tidak ditemukan korelasi linier signifikan "
-                                    "(seluruh *p-value* ≥ 0.05). Volatilitas cenderung dipengaruhi faktor di luar sentimen X."
-                                )
+                                st.warning("""
+                                **Hipotesis Ditolak (H0 Diterima):** Tidak ditemukan bukti empiris korelasi linier yang signifikan (seluruh *p-value* >= 0.05). 
+                                Volatilitas harga cenderung dipengaruhi oleh faktor teknikal/fundamental di luar sentimen X.
+                                """)
 
-            except Exception as e:
-                st.error(f"❌ Terjadi kesalahan sistem: {e}")
+        
+        st.markdown('</div>', unsafe_allow_html=True)
 
-        st.markdown("</div>", unsafe_allow_html=True)
+    elif analyze_batch_btn and not tweet_files:
+        st.warning("⚠️ Silakan unggah minimal satu file .txt terlebih dahulu.")