Update app.py

app.py

@@ -1,5 +1,5 @@
 """
-BecomeAPro - AI-Powered Exercise Tracker (Hugging Face Space)
+BecomeAPro - AI-Powered Exercise Tracker (Redesigned UI)
 Streamlit + WebRTC for in-browser real-time pose detection.
 """
 import json
@@ -11,14 +11,8 @@ from collections import Counter, deque
 from pathlib import Path
 from threading import Lock
 
-import av
-import cv2
-import mediapipe as mp
 import numpy as np
 import streamlit as st
-from joblib import load
-from mediapipe.tasks import python as mp_python
-from mediapipe.tasks.python import vision
 from streamlit_webrtc import WebRtcMode, webrtc_streamer
 
 try:
@@ -26,6 +20,9 @@ try:
 except ImportError:
     get_twilio_ice_servers = None
 
+# Heavy libraries are imported lazily inside functions to minimize startup memory
+# av, cv2, mediapipe, joblib are NOT imported at module level
+
 logger = logging.getLogger(__name__)
 
 ROOT = Path(__file__).resolve().parent
@@ -93,872 +90,1076 @@ POSE_TO_TURKISH = {
 }
 
 EXERCISES = [
-    {"name": "Sinav", "en": "Push-ups", "icon": "\U0001f4aa",
-     "desc": "Gogus, omuz ve triceps kaslari icin temel egzersiz.", "color": "#00d4aa"},
-    {"name": "Mekik", "en": "Sit-ups", "icon": "\U0001f504",
-     "desc": "Karin kaslari icin etkili bir core egzersizi.", "color": "#7c3aed"},
-    {"name": "Squat", "en": "Squats", "icon": "\U0001f9b5",
-     "desc": "Bacak ve kalca kaslari icin en etkili hareket.", "color": "#f59e0b"},
-    {"name": "Barfiks", "en": "Pull-ups", "icon": "\U0001f9d7",
-     "desc": "Sirt ve biceps kaslarini guclendiren egzersiz.", "color": "#ef4444"},
-    {"name": "Ziplama", "en": "Jumping Jacks", "icon": "\U0001f938",
-     "desc": "Tam vucut kardiyo ve koordinasyon egzersizi.", "color": "#3b82f6"},
+    {"name": "Sinav",   "en": "Push-ups",      "icon": "💪", "code": "PUSH",  "desc": "Göğüs, omuz ve triceps kasları için temel egzersiz."},
+    {"name": "Mekik",   "en": "Sit-ups",       "icon": "🔄", "code": "SIT",   "desc": "Karın kasları için etkili bir core egzersizi."},
+    {"name": "Squat",   "en": "Squats",        "icon": "🦵", "code": "SQUAT", "desc": "Bacak ve kalça kasları için en etkili hareket."},
+    {"name": "Barfiks", "en": "Pull-ups",      "icon": "🧗", "code": "PULL",  "desc": "Sırt ve biceps kaslarını güçlendiren egzersiz."},
+    {"name": "Ziplama", "en": "Jumping Jacks", "icon": "🤸", "code": "JUMP",  "desc": "Tam vücut kardiyo ve koordinasyon egzersizi."},
 ]
 
-# ---------------------------------------------------------------------------
-# Page config (must be first st call)
-# ---------------------------------------------------------------------------
-
+# ── Page config ────────────────────────────────────────────────────────────
 st.set_page_config(
     page_title="BecomeAPro | AI Exercise Tracker",
-    page_icon="\U0001f3cb\ufe0f",
+    page_icon="🏋️",
     layout="wide",
     initial_sidebar_state="collapsed",
 )
 
-# ---------------------------------------------------------------------------
-# CSS
-# ---------------------------------------------------------------------------
-
+# ── CSS ────────────────────────────────────────────────────────────────────
 CUSTOM_CSS = """\
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
-#MainMenu, footer, header {visibility: hidden;}
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;700&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; }
+
+:root {
+  --bg:         #0b0f0e;
+  --bg2:        #111916;
+  --bg3:        #162018;
+  --surface:    rgba(255,255,255,0.032);
+  --border:     rgba(255,255,255,0.07);
+  --border-acc: rgba(180,255,60,0.22);
+  --lime:       #b4ff3c;
+  --lime-dim:   #7ab828;
+  --lime-glow:  rgba(180,255,60,0.12);
+  --amber:      #ffb830;
+  --muted:      #4a5550;
+  --sub:        #7a9a8e;
+  --text:       #dde8e3;
+  --white:      #ffffff;
+  --r:          14px;
+  --rl:         22px;
+}
+
+#MainMenu, footer, header { visibility: hidden; }
 .block-container {
     padding-top: 0 !important;
-    max-width: 1100px;
+    max-width: 1060px;
     margin: 0 auto;
     padding-left: 2rem !important;
     padding-right: 2rem !important;
 }
 
 .stApp {
-    background: linear-gradient(180deg, #080810 0%, #0d0d1a 40%, #080810 100%);
-    color: #e0e0e8;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--bg);
+    color: var(--text);
+    font-family: 'DM Sans', sans-serif;
 }
 
-/* Streamlit column gap normalization */
-[data-testid="stHorizontalBlock"] {
-    gap: 1rem !important;
-    align-items: stretch !important;
-}
-[data-testid="stColumn"] {
-    display: flex !important;
-    flex-direction: column !important;
-}
-[data-testid="stColumn"] > div {
-    flex: 1;
-}
+[data-testid="stHorizontalBlock"] { gap: 1rem !important; align-items: stretch !important; }
+[data-testid="stColumn"] { display: flex !important; flex-direction: column !important; }
+[data-testid="stColumn"] > div { flex: 1; }
 
-/* Hero */
+/* ── HERO ── */
 .hero {
-    text-align: center;
-    padding: 4rem 1rem 2rem;
+    padding: 4.5rem 0 3rem;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: end;
+    gap: 2rem;
+    border-bottom: 1px solid var(--border);
     position: relative;
-    overflow: hidden;
 }
-.hero::before {
+.hero::after {
     content: '';
     position: absolute;
-    top: -60%; left: -30%; width: 160%; height: 220%;
-    background:
-        radial-gradient(ellipse at 30% 50%, rgba(0,212,170,0.07) 0%, transparent 50%),
-        radial-gradient(ellipse at 70% 50%, rgba(124,58,237,0.07) 0%, transparent 50%);
-    animation: drift 10s ease-in-out infinite alternate;
-    pointer-events: none;
+    bottom: -1px; left: 0;
+    width: 180px; height: 2px;
+    background: var(--lime);
 }
-@keyframes drift {
-    from { transform: translate(0,0) rotate(0deg); }
-    to   { transform: translate(-3%,2%) rotate(1deg); }
+.hero-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.7rem;
+    color: var(--lime);
+    letter-spacing: 2.5px;
+    text-transform: uppercase;
+    margin-bottom: 1.2rem;
+    opacity: 0.9;
 }
-.hero-badge {
+.hero-eyebrow::before {
+    content: '';
     display: inline-block;
-    background: rgba(0,212,170,0.08);
-    border: 1px solid rgba(0,212,170,0.25);
-    border-radius: 50px;
-    padding: 6px 20px;
-    font-size: 0.82rem;
-    color: #00d4aa;
-    font-weight: 600;
-    margin-bottom: 1.6rem;
-    letter-spacing: 1.2px;
-    text-transform: uppercase;
+    width: 18px; height: 2px;
+    background: var(--lime);
+    flex-shrink: 0;
 }
 .hero h1 {
-    font-size: clamp(2.2rem, 5vw, 3.8rem);
-    font-weight: 800;
-    line-height: 1.08;
-    margin: 0 0 1.1rem;
-    color: #ffffff;
-    position: relative;
-}
-.hero h1 .grad {
-    background: linear-gradient(135deg, #00d4aa 0%, #7c3aed 55%, #3b82f6 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: clamp(3.2rem, 7.5vw, 5.8rem);
+    line-height: 0.95;
+    letter-spacing: 1.5px;
+    color: var(--white);
+    margin: 0 0 1.2rem;
+    font-weight: 400;
 }
+.hero h1 em { font-style: normal; color: var(--lime); }
 .hero-sub {
-    font-size: 1.08rem;
-    color: #7a7a95;
-    max-width: 540px;
-    margin: 0 auto;
-    line-height: 1.7;
+    font-size: 0.97rem;
+    color: var(--sub);
+    line-height: 1.75;
+    font-weight: 300;
+    max-width: 400px;
+}
+.hero-meta {
+    text-align: right;
+    padding-bottom: 0.4rem;
+}
+.hero-version {
+    display: inline-block;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 3px 10px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.65rem;
+    color: var(--muted);
+    margin-bottom: 0.6rem;
+}
+.hero-tags {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.65rem;
+    color: var(--muted);
+    line-height: 2.4;
+    letter-spacing: 0.5px;
+}
+
+/* ── STATS ── */
+.stats-bar {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    border-bottom: 1px solid var(--border);
+}
+.stat-item {
+    padding: 2rem 1.5rem;
     position: relative;
 }
+.stat-item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: 0; top: 22%; bottom: 22%;
+    width: 1px;
+    background: var(--border);
+}
+.stat-num {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 3.8rem;
+    line-height: 1;
+    color: var(--white);
+    letter-spacing: 1px;
+}
+.stat-num sup {
+    font-size: 1.4rem;
+    color: var(--lime);
+    vertical-align: super;
+}
+.stat-label {
+    font-size: 0.72rem;
+    color: var(--muted);
+    margin-top: 8px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+}
 
-/* Section Titles */
-.sec-title {
-    font-size: 1.75rem;
-    font-weight: 700;
-    text-align: center;
-    margin: 2.5rem 0 0.4rem;
-    color: #fff;
+/* ── SECTION HEADER ── */
+.sec-hdr {
+    padding: 3rem 0 1.8rem;
+    display: flex;
+    align-items: baseline;
+    gap: 0.8rem;
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 1.5rem;
 }
-.sec-sub {
-    text-align: center;
-    color: #7a7a95;
-    font-size: 0.92rem;
-    margin-bottom: 1.8rem;
+.sec-idx {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.65rem;
+    color: var(--lime-dim);
+    letter-spacing: 2px;
+    flex-shrink: 0;
+}
+.sec-ttl {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 2.1rem;
+    letter-spacing: 1.5px;
+    color: var(--white);
+    font-weight: 400;
+    line-height: 1;
+}
+.sec-note {
+    font-size: 0.8rem;
+    color: var(--muted);
+    margin-left: auto;
+    flex-shrink: 0;
+    font-weight: 400;
 }
 
-/* Glass Card */
-.g-card {
-    background: rgba(18,18,30,0.65);
-    backdrop-filter: blur(14px);
-    -webkit-backdrop-filter: blur(14px);
-    border: 1px solid rgba(255,255,255,0.055);
-    border-radius: 16px;
-    padding: 1.6rem 1.3rem;
-    transition: all 0.35s cubic-bezier(.4,0,.2,1);
+/* ── STEP CARDS ── */
+.step-card {
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    padding: 1.8rem 1.5rem 1.5rem;
+    background: var(--surface);
+    height: 100%;
     position: relative;
     overflow: hidden;
+    transition: border-color 0.25s, background 0.25s;
+}
+.step-card:hover {
+    border-color: var(--border-acc);
+    background: var(--bg3);
+}
+.step-card:hover .step-bg-n { color: rgba(180,255,60,0.08); }
+.step-bg-n {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 5rem;
+    line-height: 1;
+    color: rgba(255,255,255,0.03);
+    position: absolute;
+    bottom: -0.5rem; right: 1rem;
+    letter-spacing: 1px;
+    pointer-events: none;
+    transition: color 0.3s;
+    user-select: none;
+}
+.step-tag {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.6rem;
+    color: var(--lime-dim);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin-bottom: 0.9rem;
+    display: block;
+}
+.step-ico { font-size: 1.5rem; margin-bottom: 0.8rem; display: block; }
+.step-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--white);
+    margin-bottom: 0.45rem;
+    line-height: 1.3;
+}
+.step-desc { font-size: 0.82rem; color: var(--sub); line-height: 1.65; font-weight: 300; }
+
+/* ── EXERCISE CARDS ── */
+.ex-card {
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    padding: 1.4rem 1.1rem 1.3rem;
+    background: var(--surface);
     height: 100%;
-    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
 }
-.g-card:hover {
-    border-color: rgba(0,212,170,0.18);
+.ex-card:hover {
+    border-color: var(--border-acc);
     transform: translateY(-4px);
-    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
+    background: var(--bg3);
+    box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(180,255,60,0.1);
 }
-
-/* Step Cards */
-.step-num {
+.ex-code {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.58rem;
+    color: var(--lime-dim);
+    letter-spacing: 2.5px;
+    text-transform: uppercase;
+    margin-bottom: 0.8rem;
+    display: block;
+    opacity: 0.8;
+}
+.ex-ico { font-size: 1.8rem; margin-bottom: 0.9rem; display: block; }
+.ex-tr {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 1.4rem;
+    color: var(--white);
+    letter-spacing: 1px;
+    line-height: 1;
+    margin-bottom: 0.15rem;
+    font-weight: 400;
+}
+.ex-en { font-size: 0.7rem; color: var(--muted); margin-bottom: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
+.ex-info { font-size: 0.78rem; color: var(--sub); line-height: 1.5; font-weight: 300; }
+
+/* ── CTA SECTION ── */
+.cta-section {
+    margin-top: 3rem;
+    border: 1px solid var(--border);
+    border-radius: var(--rl);
+    overflow: hidden;
+    background: var(--bg2);
+}
+.cta-top {
+    padding: 2.8rem 3rem 2.4rem;
+    background: radial-gradient(ellipse 55% 90% at 5% 10%, rgba(180,255,60,0.05) 0%, transparent 65%);
+    border-bottom: 1px solid var(--border);
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: 3rem;
+}
+.cta-text { }
+.cta-tag {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.66rem;
+    color: var(--lime);
+    letter-spacing: 2.5px;
+    text-transform: uppercase;
+    margin-bottom: 0.7rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.cta-tag::before { content: ''; width: 14px; height: 2px; background: var(--lime); display: inline-block; flex-shrink: 0; }
+.cta-ttl {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 2.8rem;
+    letter-spacing: 1.5px;
+    color: var(--white);
+    font-weight: 400;
+    margin-bottom: 0.6rem;
+    line-height: 1;
+}
+.cta-sub {
+    font-size: 0.87rem;
+    color: var(--sub);
+    line-height: 1.7;
+    max-width: 400px;
+    font-weight: 300;
+    margin-bottom: 1.6rem;
+}
+/* Fake start button shown in CTA header (decorative, real one is from webrtc below) */
+.cta-start-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: var(--lime);
+    color: #0b0f0e;
+    font-family: 'DM Sans', sans-serif;
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    padding: 0.8rem 1.8rem;
+    border-radius: 10px;
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.95;
+}
+.cta-start-btn .btn-ico {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 44px; height: 44px;
-    border-radius: 12px;
-    background: linear-gradient(135deg, #00d4aa, #7c3aed);
-    color: #fff;
+    width: 22px; height: 22px;
+    border-radius: 50%;
+    background: rgba(0,0,0,0.15);
+    font-size: 0.75rem;
+}
+.cta-start-btn .btn-hint {
+    font-size: 0.7rem;
+    font-weight: 400;
+    opacity: 0.6;
+    margin-left: 4px;
+    font-family: 'JetBrains Mono', monospace;
+    letter-spacing: 0;
+}
+/* checklist items */
+.cta-checks {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1.8rem;
+}
+.cta-check {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.82rem;
+    color: var(--sub);
+    font-weight: 300;
+}
+.cta-check::before {
+    content: '✓';
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px; height: 18px;
+    border-radius: 5px;
+    background: rgba(180,255,60,0.1);
+    border: 1px solid rgba(180,255,60,0.2);
+    color: var(--lime);
+    font-size: 0.65rem;
     font-weight: 700;
-    font-size: 1.1rem;
-    margin-bottom: 0.8rem;
+    flex-shrink: 0;
 }
-.step-t { font-size: 1.05rem; font-weight: 600; color: #fff; margin-bottom: 0.4rem; }
-.step-d { font-size: 0.85rem; color: #7a7a95; line-height: 1.6; }
-
-/* Exercise Cards */
-.accent-top {
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 3px;
-    border-radius: 16px 16px 0 0;
-    opacity: 0.7;
-    transition: opacity 0.3s;
+/* right side visual */
+.cta-visual {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
 }
-.g-card:hover .accent-top { opacity: 1; }
-.ex-icon  { font-size: 2.2rem; margin-bottom: 0.6rem; display: block; }
-.ex-name  { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 0.1rem; }
-.ex-en    { font-size: 0.75rem; color: #5a5a7a; margin-bottom: 0.4rem; }
-.ex-desc  { font-size: 0.8rem; color: #7a7a95; line-height: 1.5; }
-
-/* CTA Section */
-.cta-box {
-    text-align: center;
-    padding: 2.5rem 2rem 1.2rem;
-    background: linear-gradient(135deg, rgba(0,212,170,0.04), rgba(124,58,237,0.04));
-    border: 1px solid rgba(255,255,255,0.04);
-    border-radius: 20px;
-    margin: 2rem 0 0;
+.cta-cam-icon {
+    width: 110px; height: 110px;
+    border: 1px solid var(--border-acc);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(180,255,60,0.03);
     position: relative;
-    overflow: hidden;
+    font-size: 2.8rem;
 }
-.cta-box::before {
+.cta-cam-icon::before {
     content: '';
     position: absolute;
-    inset: -1px;
-    border-radius: 20px;
-    background: linear-gradient(135deg, rgba(0,212,170,0.12), transparent 40%, rgba(124,58,237,0.12));
-    z-index: 0;
-    pointer-events: none;
+    inset: -10px;
+    border-radius: 50%;
+    border: 1px dashed rgba(180,255,60,0.12);
+    animation: spin 12s linear infinite;
 }
-.cta-t { font-size: 1.6rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; position: relative; }
-.cta-d { color: #7a7a95; margin-bottom: 0.2rem; font-size: 0.9rem; position: relative; }
-
-/* Metric Card */
-.m-val {
-    font-size: 2rem;
-    font-weight: 700;
-    background: linear-gradient(135deg, #00d4aa, #7c3aed);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+.cta-cam-icon::after {
+    content: '';
+    position: absolute;
+    inset: -20px;
+    border-radius: 50%;
+    border: 1px dashed rgba(180,255,60,0.06);
+    animation: spin 18s linear infinite reverse;
 }
-.m-lbl { font-size: 0.82rem; color: #7a7a95; font-weight: 500; margin-top: 4px; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.cta-cam-label {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.62rem;
+    color: var(--lime-dim);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+.cta-body { padding: 2rem 3rem 2.5rem; }
 
-/* Primary Button */
-div.stButton > button[kind="primary"],
-div.stButton > button[data-testid="stBaseButton-primary"] {
-    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%) !important;
-    border: none !important;
-    border-radius: 14px !important;
-    padding: 0.85rem 2.8rem !important;
-    font-size: 1.08rem !important;
-    font-weight: 600 !important;
-    font-family: 'Inter', sans-serif !important;
-    color: #080810 !important;
-    box-shadow: 0 4px 24px rgba(0,212,170,0.22) !important;
-    transition: all 0.3s cubic-bezier(.4,0,.2,1) !important;
-    letter-spacing: 0.3px !important;
-    min-height: 56px !important;
+/* ── TROUBLE TOGGLE ── */
+.trouble-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.68rem;
+    color: var(--muted);
+    letter-spacing: 1px;
+    cursor: pointer;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 6px 14px;
+    background: transparent;
+    transition: border-color 0.2s, color 0.2s;
+    margin-top: 1rem;
+    width: fit-content;
 }
-div.stButton > button[kind="primary"]:hover,
-div.stButton > button[data-testid="stBaseButton-primary"]:hover {
-    box-shadow: 0 8px 36px rgba(0,212,170,0.38) !important;
-    transform: translateY(-2px) !important;
+.trouble-toggle:hover { border-color: rgba(255,184,48,0.2); color: #b0a080; }
+.trouble-panel {
+    display: none;
+    margin-top: 0.8rem;
+    background: rgba(255,184,48,0.03);
+    border: 1px solid rgba(255,184,48,0.1);
+    border-radius: 10px;
+    padding: 0.85rem 1.2rem;
+    font-size: 0.79rem;
+    color: #a09060;
+    line-height: 1.65;
 }
+.trouble-panel strong { color: #c4a468; }
 
-/* Tip Box */
-.tip-box {
-    background: rgba(59,130,246,0.06);
-    border: 1px solid rgba(59,130,246,0.15);
-    border-radius: 14px;
-    padding: 1rem 1.4rem;
-    color: #8ab4f8;
-    font-size: 0.86rem;
-    line-height: 1.6;
-    margin: 0.8rem 0;
+/* ── CAM ── */
+.cam-wrap {
+    border: 1px solid var(--border);
+    border-radius: var(--r);
+    overflow: hidden;
+    background: #070d0a;
 }
-.tip-box strong { color: #a8ccff; }
-
-/* Helpers */
-.sep {
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
-    margin: 2rem 0;
+.cam-bar {
+    padding: 0.65rem 1rem;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(0,0,0,0.25);
+}
+.cam-pulse {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: var(--lime);
+    box-shadow: 0 0 6px var(--lime);
+    animation: pulse 1.8s ease-in-out infinite;
+}
+.cam-pulse.off { background: var(--muted); box-shadow: none; animation: none; }
+@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(0.75)} }
+.cam-lbl {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.62rem;
+    color: var(--muted);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+}
+.cam-live {
+    margin-left: auto;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.62rem;
+    color: var(--lime);
+    letter-spacing: 2px;
+    text-transform: uppercase;
 }
 
-/* Footer */
-.foot {
-    text-align: center;
-    padding: 2rem 0 1.5rem;
-    color: #444460;
-    font-size: 0.82rem;
-    margin-top: 2.5rem;
-    border-top: 1px solid rgba(255,255,255,0.04);
+
+
+/* ── STATUS PILL ── */
+.status-row {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 0.6rem 0;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.68rem;
+    color: var(--lime-dim);
+    letter-spacing: 0.5px;
 }
-.foot a { color: #00d4aa; text-decoration: none; }
+.s-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); animation: pulse 1.5s ease-in-out infinite; }
 
-/* Scrollbar */
-::-webkit-scrollbar       { width: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #2a2a3e; border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: #3a3a52; }
-
-/* Camera Section */
-.cam-wrapper {
-    background: rgba(12,12,22,0.8);
-    border: 1px solid rgba(255,255,255,0.06);
-    border-radius: 20px;
-    padding: 1.5rem;
-    margin: 1.2rem auto 0;
-    max-width: 720px;
-    position: relative;
+/* ── SUMMARY ── */
+.summary {
+    border: 1px solid var(--border-acc);
+    border-radius: var(--rl);
     overflow: hidden;
+    max-width: 500px;
+    margin: 2rem auto;
+    background: var(--bg2);
 }
-.cam-wrapper::before {
-    content: '';
-    position: absolute;
-    inset: -1px;
-    border-radius: 20px;
-    background: linear-gradient(135deg, rgba(0,212,170,0.15), transparent 40%, rgba(124,58,237,0.15));
-    z-index: 0;
-    pointer-events: none;
+.sum-head {
+    padding: 1.4rem 1.8rem;
+    background: rgba(180,255,60,0.04);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+}
+.sum-title {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 1.5rem;
+    letter-spacing: 1.5px;
+    color: var(--white);
+    font-weight: 400;
+}
+.sum-dur {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.68rem;
+    color: var(--muted);
+    letter-spacing: 1px;
 }
-.cam-header {
+.sum-body { padding: 0 1.8rem; }
+.sum-row {
     display: flex;
     align-items: center;
-    gap: 10px;
-    margin-bottom: 1rem;
-    position: relative;
-    z-index: 1;
+    justify-content: space-between;
+    padding: 0.8rem 0;
+    border-bottom: 1px solid var(--border);
 }
-.cam-dot {
-    width: 10px; height: 10px;
-    border-radius: 50%;
-    background: #00d4aa;
-    box-shadow: 0 0 8px rgba(0,212,170,0.5);
-    animation: camPulse 2s ease-in-out infinite;
+.sum-row:last-child { border-bottom: none; }
+.sum-ex { font-size: 0.87rem; color: var(--text); font-weight: 500; }
+.sum-rep {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.88rem;
+    color: var(--lime);
+    font-weight: 700;
 }
-.cam-dot.off { background: #555; box-shadow: none; animation: none; }
-@keyframes camPulse {
-    0%,100% { opacity: 1; transform: scale(1); }
-    50%     { opacity: 0.5; transform: scale(0.85); }
+.sum-foot {
+    padding: 1.1rem 1.8rem;
+    border-top: 1px solid var(--border);
+    background: var(--surface);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
-.cam-label {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #a0a0b8;
-    letter-spacing: 0.5px;
+.sum-kcal-lbl {
+    font-size: 0.72rem;
+    color: var(--muted);
     text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-weight: 600;
 }
-.cam-guide {
-    display: flex;
-    gap: 1.2rem;
-    margin: 1.2rem 0;
-    position: relative;
-    z-index: 1;
-}
-.cam-guide-step {
-    flex: 1;
-    background: rgba(255,255,255,0.03);
-    border: 1px solid rgba(255,255,255,0.05);
-    border-radius: 12px;
-    padding: 1rem 0.8rem;
-    text-align: center;
+.sum-kcal-val {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 2rem;
+    color: var(--amber);
+    letter-spacing: 1px;
 }
-.cam-guide-icon { font-size: 1.5rem; margin-bottom: 0.4rem; display: block; }
-.cam-guide-text { font-size: 0.78rem; color: #7a7a95; line-height: 1.4; }
+.sum-kcal-unit { font-size: 0.72rem; color: var(--muted); margin-left: 4px; }
 
-/* WebRTC component wrapper */
-iframe[title*="webrtc"] {
-    border: 1px solid rgba(255,255,255,0.06) !important;
-    border-radius: 14px !important;
-    background: rgba(10,10,20,0.9) !important;
+/* ── BUTTONS ── */
+div.stButton > button[kind="primary"],
+div.stButton > button[data-testid="stBaseButton-primary"] {
+    background: var(--lime) !important;
+    border: none !important;
+    border-radius: 10px !important;
+    padding: 0.8rem 2.4rem !important;
+    font-size: 0.9rem !important;
+    font-weight: 600 !important;
+    font-family: 'DM Sans', sans-serif !important;
+    color: #0b0f0e !important;
+    letter-spacing: 0.2px !important;
+    min-height: 50px !important;
+    transition: all 0.2s !important;
+}
+div.stButton > button[kind="primary"]:hover,
+div.stButton > button[data-testid="stBaseButton-primary"]:hover {
+    box-shadow: 0 0 30px rgba(180,255,60,0.28) !important;
+    transform: translateY(-2px) !important;
+    background: #c4ff52 !important;
 }
 
-/* Status Pill */
-.status-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: rgba(0,212,170,0.08);
-    border: 1px solid rgba(0,212,170,0.25);
-    border-radius: 50px;
-    padding: 6px 16px;
-    color: #00d4aa;
-    font-size: 0.82rem;
-    font-weight: 500;
+/* ── NO MODEL ── */
+.no-model {
+    border: 1px dashed rgba(180,255,60,0.12);
+    border-radius: var(--rl);
+    padding: 3.5rem 2rem;
+    text-align: center;
+    background: var(--surface);
 }
-.status-dot {
-    width: 8px; height: 8px;
-    border-radius: 50%;
-    background: #00d4aa;
-    animation: camPulse 1.5s ease-in-out infinite;
-}
-
-/* Troubleshoot Card */
-.trouble-card {
-    background: rgba(245,158,11,0.06);
-    border: 1px solid rgba(245,158,11,0.15);
-    border-radius: 14px;
-    padding: 1.1rem 1.4rem;
-    color: #f5c96a;
-    font-size: 0.84rem;
-    line-height: 1.65;
-    margin: 0.8rem 0;
+.no-model-ico { font-size: 2.4rem; margin-bottom: 1rem; display: block; opacity: 0.6; }
+.no-model h3 {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 1.9rem;
+    color: var(--white);
+    font-weight: 400;
+    margin-bottom: 0.6rem;
+    letter-spacing: 1.5px;
+}
+.no-model p { font-size: 0.84rem; color: var(--sub); line-height: 1.7; max-width: 420px; margin: 0 auto 0.5rem; }
+.no-model code {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.76rem;
+    background: rgba(180,255,60,0.06);
+    color: var(--lime-dim);
+    padding: 2px 8px;
+    border-radius: 5px;
+    border: 1px solid rgba(180,255,60,0.12);
 }
-.trouble-card strong { color: #fad683; }
 
-/* Onboarding Card */
-.onboard-card {
-    background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(0,212,170,0.08));
-    border: 1px solid rgba(124,58,237,0.15);
-    border-radius: 16px;
-    padding: 2rem;
-    text-align: center;
+/* ── FOOTER ── */
+.foot {
+    padding: 2rem 0 1.8rem;
+    border-top: 1px solid var(--border);
+    margin-top: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.foot-brand {
+    font-family: 'Bebas Neue', sans-serif;
+    font-size: 1rem;
+    color: var(--muted);
+    letter-spacing: 3px;
+}
+.foot-stack {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.62rem;
+    color: var(--muted);
+    letter-spacing: 1px;
+    opacity: 0.7;
 }
-.onboard-card h3 { color: #fff; font-size: 1.3rem; margin-bottom: 0.6rem; }
-.onboard-card p { color: #7a7a95; font-size: 0.92rem; line-height: 1.6; }
+
+::-webkit-scrollbar       { width: 4px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: #1c2820; border-radius: 3px; }
 </style>
 """
 
-
-# ---------------------------------------------------------------------------
-# ICE / TURN configuration
-# ---------------------------------------------------------------------------
-
-
+# ── ICE / TURN ─────────────────────────────────────────────────────────────
 def get_ice_config() -> dict:
-    """Return WebRTC ICE configuration with Twilio TURN servers when available,
-    falling back to Google STUN for local development."""
     if get_twilio_ice_servers is not None:
         try:
-            sid = os.environ.get("TWILIO_ACCOUNT_SID", "")
-            token = os.environ.get("TWILIO_AUTH_TOKEN", "")
-            if not sid:
-                sid = st.secrets.get("TWILIO_ACCOUNT_SID", "")
-            if not token:
-                token = st.secrets.get("TWILIO_AUTH_TOKEN", "")
+            sid   = os.environ.get("TWILIO_ACCOUNT_SID", "") or st.secrets.get("TWILIO_ACCOUNT_SID", "")
+            token = os.environ.get("TWILIO_AUTH_TOKEN", "") or st.secrets.get("TWILIO_AUTH_TOKEN", "")
             if sid and token:
                 ice = get_twilio_ice_servers(twilio_sid=sid, twilio_token=token)
-                logger.info("Using Twilio TURN servers (%d entries)", len(ice))
                 return {"iceServers": ice}
         except Exception as exc:
-            logger.warning("Twilio ICE fetch failed, falling back to STUN: %s", exc)
+            logger.warning("Twilio ICE fetch failed: %s", exc)
     return {"iceServers": [{"urls": ["stun:stun.l.google.com:19302"]}]}
 
-
-# ---------------------------------------------------------------------------
-# Pose detection helpers (from camera_demo.py, adapted for WebRTC)
-# ---------------------------------------------------------------------------
-
-
+# ── Pose helpers ────────────────────────────────────────────────────────────
 def label_to_turkish(label: str) -> str:
     return POSE_TO_TURKISH.get(label, label)
 
-
 def ensure_pose_model() -> str:
+    """Download pose model if not present. Uses spinner on first download."""
     if POSE_MODEL_PATH.exists():
         return str(POSE_MODEL_PATH)
     MODELS_DIR.mkdir(parents=True, exist_ok=True)
-    logger.info("Downloading pose_landmarker model...")
-    urllib.request.urlretrieve(POSE_MODEL_URL, POSE_MODEL_PATH)
-    logger.info("Download complete.")
+    tmp_path = POSE_MODEL_PATH.with_suffix(".task.tmp")
+    try:
+        with st.spinner("Pose modeli indiriliyor (ilk acilis)..."):
+            urllib.request.urlretrieve(POSE_MODEL_URL, tmp_path)
+        tmp_path.rename(POSE_MODEL_PATH)
+    except Exception as exc:
+        if tmp_path.exists():
+            tmp_path.unlink(missing_ok=True)
+        raise RuntimeError(f"Pose model indirilemedi: {exc}") from exc
     return str(POSE_MODEL_PATH)
 
-
 def landmarks_to_vector(landmark_list, feature_columns):
     name_to_idx = {name: i for i, name in enumerate(MP_INDEX_TO_NAME)}
     for alias, canonical in NAME_ALIASES.items():
         name_to_idx[alias] = name_to_idx.get(canonical, 0)
-
     values = []
     for col in feature_columns:
         if not col.startswith(("x_", "y_", "z_")):
             continue
-        axis = col[0]
-        name = col[2:].strip()
-        name = NAME_ALIASES.get(name, name)
+        axis = col[0]; name = NAME_ALIASES.get(col[2:].strip(), col[2:].strip())
         idx = name_to_idx.get(name, -1)
-        if idx < 0:
-            values.append(0.0)
-            continue
+        if idx < 0: values.append(0.0); continue
         lm = landmark_list[idx]
         x_val = lm.x if lm.x is not None else 0.0
         y_val = lm.y if lm.y is not None else 0.0
         z_val = lm.z if lm.z is not None else 0.0
-        if axis == "x":
-            values.append((x_val - 0.5) * SCALE_XY)
-        elif axis == "y":
-            values.append((y_val - 0.5) * SCALE_XY)
-        else:
-            values.append(z_val * SCALE_Z)
+        if   axis == "x": values.append((x_val - 0.5) * SCALE_XY)
+        elif axis == "y": values.append((y_val - 0.5) * SCALE_XY)
+        else:             values.append(z_val * SCALE_Z)
     return np.array(values, dtype=np.float32).reshape(1, -1)
 
-
 def predict_single(ml_model, encoder, scaler, model_type, X, buffer):
-    """Run prediction with smoothing over the last N frames."""
     X_scaled = scaler.transform(X)
     if model_type == "xgboost":
         pred_idx = ml_model.predict(X_scaled)[0]
-        probs = ml_model.predict_proba(X_scaled)[0]
+        probs    = ml_model.predict_proba(X_scaled)[0]
     else:
         import torch
         with torch.no_grad():
-            X_t = torch.from_numpy(X_scaled.astype(np.float32))
+            X_t    = torch.from_numpy(X_scaled.astype(np.float32))
             logits = ml_model(X_t)
-            probs = torch.softmax(logits, dim=1).numpy()[0]
+            probs  = torch.softmax(logits, dim=1).numpy()[0]
             pred_idx = int(np.argmax(probs))
-
     conf = float(probs[pred_idx])
-    if conf < CONFIDENCE_THRESHOLD:
-        buffer.append("Belirsiz")
-    else:
-        label = encoder.inverse_transform([pred_idx])[0]
-        buffer.append(label)
-
-    counted = Counter(buffer)
-    mode_label = counted.most_common(1)[0][0]
+    buffer.append("Belirsiz" if conf < CONFIDENCE_THRESHOLD else encoder.inverse_transform([pred_idx])[0])
+    mode_label = Counter(buffer).most_common(1)[0][0]
     return mode_label, conf
 
-
 def draw_overlay_panel(frame, label, conf, reps=None):
+    import cv2 as _cv2
     h, w = frame.shape[:2]
     has_reps = reps is not None and reps > 0
     panel_h = 120 if has_reps else 90
     panel_w = min(400, w - 20)
-    x1, y1 = 10, 10
-    x2, y2 = x1 + panel_w, y1 + panel_h
-
+    x1, y1, x2, y2 = 10, 10, 10 + panel_w, 10 + panel_h
     overlay = frame.copy()
-    cv2.rectangle(overlay, (x1, y1), (x2, y2), (30, 30, 30), -1)
-    cv2.addWeighted(overlay, 0.75, frame, 0.25, 0, frame)
-    cv2.rectangle(frame, (x1, y1), (x2, y2), (0, 200, 100), 2)
-
+    _cv2.rectangle(overlay, (x1, y1), (x2, y2), (15, 22, 18), -1)
+    _cv2.addWeighted(overlay, 0.78, frame, 0.22, 0, frame)
+    _cv2.rectangle(frame, (x1, y1), (x2, y2), (90, 220, 40), 2)
     turkce = label_to_turkish(label)
-    font = cv2.FONT_HERSHEY_SIMPLEX
-    color = (0, 255, 150) if label != "Belirsiz" else (100, 100, 100)
-
-    cv2.putText(frame, f"Hareket: {turkce}", (x1 + 12, y1 + 38),
-                font, 0.9, color, 2)
-    cv2.putText(frame, f"Guven: %{conf * 100:.0f}", (x1 + 12, y1 + 72),
-                font, 0.7, (200, 200, 200), 2)
-
+    font = _cv2.FONT_HERSHEY_SIMPLEX
+    color = (90, 255, 60) if label != "Belirsiz" else (80, 80, 80)
+    _cv2.putText(frame, f"Hareket: {turkce}", (x1+12, y1+38), font, 0.9, color, 2)
+    _cv2.putText(frame, f"Guven: %{conf*100:.0f}", (x1+12, y1+72), font, 0.7, (180,200,180), 2)
     if has_reps:
-        cv2.putText(frame, f"Tekrar: {reps}", (x1 + 12, y1 + 106),
-                    font, 0.8, (0, 212, 170), 2)
-
+        _cv2.putText(frame, f"Tekrar: {reps}", (x1+12, y1+106), font, 0.8, (90,220,40), 2)
 
 def draw_center_counter(frame, reps, frames_since_rep):
-    """Draw a large fading rep number in the center of the frame."""
-    if frames_since_rep >= REP_DISPLAY_FRAMES:
-        return
+    import cv2 as _cv2
+    if frames_since_rep >= REP_DISPLAY_FRAMES: return
     alpha = 1.0 - (frames_since_rep / REP_DISPLAY_FRAMES)
     h, w = frame.shape[:2]
     text = str(reps)
-    font = cv2.FONT_HERSHEY_SIMPLEX
-    scale = 4.0
-    thickness = 8
-    (tw, th), _ = cv2.getTextSize(text, font, scale, thickness)
-    tx = (w - tw) // 2
-    ty = (h + th) // 2
-
+    font = _cv2.FONT_HERSHEY_SIMPLEX
+    scale, thickness = 4.0, 8
+    (tw, th), _ = _cv2.getTextSize(text, font, scale, thickness)
     overlay = frame.copy()
-    cv2.putText(overlay, text, (tx, ty), font, scale, (200, 200, 200), thickness)
-    cv2.addWeighted(overlay, alpha * 0.6, frame, 1.0 - alpha * 0.6, 0, frame)
-
-
-# ---------------------------------------------------------------------------
-# Thread-safe model & pose landmarker loader
-# ---------------------------------------------------------------------------
-
+    _cv2.putText(overlay, text, ((w-tw)//2, (h+th)//2), font, scale, (180,255,60), thickness)
+    _cv2.addWeighted(overlay, alpha*0.65, frame, 1.0-alpha*0.65, 0, frame)
 
+# ── Artifacts ───────────────────────────────────────────────────────────────
 @st.cache_resource
-def load_all_artifacts():
-    """Load ML model, scaler, encoder, feature columns, and MediaPipe pose landmarker.
-    Returns None tuple if model files are missing."""
-    meta_path = MODELS_DIR / "meta.pkl"
+def load_ml_artifacts():
+    """Load only the ML model files (no network calls). Returns None tuple if missing."""
+    from joblib import load as jload
+    meta_path     = MODELS_DIR / "meta.pkl"
     metadata_path = MODELS_DIR / "metadata.json"
     if not meta_path.exists() or not metadata_path.exists():
-        return None, None, None, None, None, None, None
-
-    meta = load(meta_path)
-    encoder = load(MODELS_DIR / "encoder.pkl")
-    scaler = load(MODELS_DIR / "scaler.pkl")
-    model_type = meta.get("model_type", "xgboost")
+        return None, None, None, None, None, None
+    try:
+        meta       = jload(meta_path)
+        encoder    = jload(MODELS_DIR / "encoder.pkl")
+        scaler     = jload(MODELS_DIR / "scaler.pkl")
+        model_type = meta.get("model_type", "xgboost")
+        model_path = meta.get("model_path")
+        if model_path:
+            filename   = model_path.replace("\\", "/").split("/")[-1]
+            model_path = MODELS_DIR / filename
+        if model_type == "xgboost":
+            ml_model = jload(model_path)
+        else:
+            import torch
+            from torch import nn
+            input_size  = meta.get("input_size", 99)
+            num_classes = meta.get("num_classes", 10)
+            ml_model = nn.Sequential(
+                nn.Linear(input_size, 200), nn.ReLU(), nn.Linear(200, num_classes)
+            )
+            ml_model.load_state_dict(
+                torch.load(model_path, map_location="cpu", weights_only=True)
+            )
+            ml_model.eval()
+        with open(metadata_path, encoding="utf-8") as f:
+            feature_columns = json.load(f).get("feature_columns", [])
+        return ml_model, encoder, scaler, model_type, feature_columns, meta
+    except Exception as exc:
+        logger.error("ML artifact load failed: %s", exc)
+        return None, None, None, None, None, None
 
-    model_path = meta.get("model_path")
-    if model_path:
-        filename = model_path.replace("\\", "/").split("/")[-1]
-        model_path = MODELS_DIR / filename
 
-    if model_type == "xgboost":
-        ml_model = load(model_path)
-    else:
-        import torch
-        input_size = meta.get("input_size", 99)
-        num_classes = meta.get("num_classes", 10)
-        from torch import nn
-        ml_model = nn.Sequential(
-            nn.Linear(input_size, 200),
-            nn.ReLU(),
-            nn.Linear(200, num_classes),
+@st.cache_resource
+def load_pose_landmarker():
+    """Load MediaPipe pose landmarker (downloads model on first run). Lazy import."""
+    try:
+        from mediapipe.tasks import python as _mp_python
+        from mediapipe.tasks.python import vision as _vision
+        pose_model_path = ensure_pose_model()
+        base_options    = _mp_python.BaseOptions(model_asset_path=pose_model_path)
+        options         = _vision.PoseLandmarkerOptions(
+            base_options=base_options,
+            running_mode=_vision.RunningMode.IMAGE,
         )
-        ml_model.load_state_dict(torch.load(model_path, map_location="cpu"))
-        ml_model.eval()
+        return _vision.PoseLandmarker.create_from_options(options)
+    except Exception as exc:
+        logger.error("Pose landmarker load failed: %s", exc)
+        return None
 
-    with open(metadata_path, encoding="utf-8") as f:
-        feature_columns = json.load(f).get("feature_columns", [])
-
-    pose_model_path = ensure_pose_model()
-    base_options = mp_python.BaseOptions(model_asset_path=pose_model_path)
-    options = vision.PoseLandmarkerOptions(
-        base_options=base_options,
-        running_mode=vision.RunningMode.IMAGE,
-    )
-    pose_landmarker = vision.PoseLandmarker.create_from_options(options)
 
+def load_all_artifacts():
+    """Compatibility wrapper — loads ML artifacts then pose landmarker separately."""
+    ml_model, encoder, scaler, model_type, feature_columns, meta = load_ml_artifacts()
+    if ml_model is None:
+        return None, None, None, None, None, None, None
+    pose_landmarker = load_pose_landmarker()
+    if pose_landmarker is None:
+        return None, None, None, None, None, None, None
     return ml_model, encoder, scaler, model_type, feature_columns, pose_landmarker, meta
 
-
-# ---------------------------------------------------------------------------
-# WebRTC video callback
-# ---------------------------------------------------------------------------
-
+# ── WebRTC callback ─────────────────────────────────────────────────────────
 _buffer_lock = Lock()
 _prediction_buffer: deque = deque(maxlen=BUFFER_SIZE)
 
-
 def _draw_body_skeleton(img, pose_landmarks):
-    """Draw only the 14 essential body landmarks and connections (skip face/hands/feet)."""
+    import cv2 as _cv2
     h, w = img.shape[:2]
     points = {}
     for idx in BODY_LANDMARK_INDICES:
         lm = pose_landmarks[idx]
         px, py = int(lm.x * w), int(lm.y * h)
         points[idx] = (px, py)
-        cv2.circle(img, (px, py), 5, (0, 212, 170), -1)
-        cv2.circle(img, (px, py), 7, (0, 212, 170), 1)
-
+        _cv2.circle(img, (px, py), 5, (90, 220, 40), -1)
+        _cv2.circle(img, (px, py), 7, (90, 220, 40), 1)
     for a, b in BODY_CONNECTIONS:
         if a in points and b in points:
-            cv2.line(img, points[a], points[b], (0, 255, 0), 2)
-
+            _cv2.line(img, points[a], points[b], (60, 200, 20), 2)
 
-def make_video_frame_callback(ml_model, encoder, scaler, model_type,
-                               feature_columns, pose_landmarker):
-    """Create a closure that captures loaded artifacts for the WebRTC callback."""
+def make_video_frame_callback(ml_model, encoder, scaler, model_type, feature_columns, pose_landmarker):
     frame_counter = [0]
-    cached_label = ["Belirsiz"]
-    cached_conf = [0.0]
-
+    cached_label  = ["Belirsiz"]
+    cached_conf   = [0.0]
     rep_state = {
-        "phase": "idle",
-        "reps": 0,
-        "debounce_count": 0,
-        "pending_phase": None,
-        "frames_since_rep": REP_DISPLAY_FRAMES,
-        "exercise_reps": {},
-        "start_time": None,
+        "phase": "idle", "reps": 0, "debounce_count": 0,
+        "pending_phase": None, "frames_since_rep": REP_DISPLAY_FRAMES,
+        "exercise_reps": {}, "start_time": None,
     }
 
     def _update_rep_counter(label):
-        """State machine: idle -> down -> up (rep++) -> down -> up (rep++) ..."""
         phase = rep_state["phase"]
-
         if rep_state["start_time"] is None and label != "Belirsiz":
             rep_state["start_time"] = time.time()
-
         exercise = label.rsplit("_", 1)[0] if "_" in label else None
-
-        if label.endswith("_down"):
-            target = "down"
-        elif label.endswith("_up"):
-            target = "up"
+        if   label.endswith("_down"): target = "down"
+        elif label.endswith("_up"):   target = "up"
         else:
-            rep_state["debounce_count"] = 0
-            rep_state["pending_phase"] = None
-            return
-
-        if phase == "idle" and target == "down":
-            _try_transition("down", exercise)
+            rep_state["debounce_count"] = 0; rep_state["pending_phase"] = None; return
+        if   phase == "idle" and target == "down":  _try_transition("down", exercise)
         elif phase == "down" and target == "up":
             if _try_transition("up", exercise):
-                rep_state["reps"] += 1
-                rep_state["frames_since_rep"] = 0
+                rep_state["reps"] += 1; rep_state["frames_since_rep"] = 0
                 if exercise:
-                    rep_state["exercise_reps"][exercise] = (
-                        rep_state["exercise_reps"].get(exercise, 0) + 1
-                    )
-        elif phase == "up" and target == "down":
-            _try_transition("down", exercise)
+                    rep_state["exercise_reps"][exercise] = rep_state["exercise_reps"].get(exercise, 0) + 1
+        elif phase == "up"   and target == "down":  _try_transition("down", exercise)
 
     def _try_transition(target, exercise=None):
-        if rep_state["pending_phase"] == target:
-            rep_state["debounce_count"] += 1
-        else:
-            rep_state["pending_phase"] = target
-            rep_state["debounce_count"] = 1
-
+        if rep_state["pending_phase"] == target: rep_state["debounce_count"] += 1
+        else: rep_state["pending_phase"] = target; rep_state["debounce_count"] = 1
         if rep_state["debounce_count"] >= REP_DEBOUNCE:
-            rep_state["phase"] = target
-            rep_state["pending_phase"] = None
-            rep_state["debounce_count"] = 0
-            return True
+            rep_state["phase"] = target; rep_state["pending_phase"] = None; rep_state["debounce_count"] = 0; return True
         return False
 
-    def video_frame_callback(frame: av.VideoFrame) -> av.VideoFrame:
+    def video_frame_callback(frame):
+        import av as _av
+        import cv2 as _cv2
+        import mediapipe as _mp
         img = frame.to_ndarray(format="bgr24")
-        img = cv2.flip(img, 1)
-
-        frame_counter[0] += 1
-        rep_state["frames_since_rep"] += 1
-        should_process = (frame_counter[0] % FRAME_SKIP == 0)
-
-        if not should_process:
-            draw_overlay_panel(img, cached_label[0], cached_conf[0],
-                               reps=rep_state["reps"])
-            draw_center_counter(img, rep_state["reps"],
-                                rep_state["frames_since_rep"])
-            return av.VideoFrame.from_ndarray(img, format="bgr24")
-
-        rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
-        mp_image = mp.Image(image_format=mp.ImageFormat.SRGB, data=rgb)
-
+        img = _cv2.flip(img, 1)
+        frame_counter[0] += 1; rep_state["frames_since_rep"] += 1
+        if frame_counter[0] % FRAME_SKIP != 0:
+            draw_overlay_panel(img, cached_label[0], cached_conf[0], reps=rep_state["reps"])
+            draw_center_counter(img, rep_state["reps"], rep_state["frames_since_rep"])
+            return _av.VideoFrame.from_ndarray(img, format="bgr24")
+        rgb = _cv2.cvtColor(img, _cv2.COLOR_BGR2RGB)
+        mp_image = _mp.Image(image_format=_mp.ImageFormat.SRGB, data=rgb)
         try:
             detection_result = pose_landmarker.detect(mp_image)
         except Exception:
             draw_overlay_panel(img, "Belirsiz", 0.0, reps=rep_state["reps"])
-            return av.VideoFrame.from_ndarray(img, format="bgr24")
-
+            return _av.VideoFrame.from_ndarray(img, format="bgr24")
         if detection_result.pose_landmarks:
             pose_landmarks = detection_result.pose_landmarks[0]
             _draw_body_skeleton(img, pose_landmarks)
-
             try:
                 X = landmarks_to_vector(pose_landmarks, feature_columns)
                 if X.shape[1] == scaler.n_features_in_:
                     with _buffer_lock:
-                        label, conf = predict_single(
-                            ml_model, encoder, scaler, model_type,
-                            X, _prediction_buffer,
-                        )
-                    cached_label[0] = label
-                    cached_conf[0] = conf
+                        label, conf = predict_single(ml_model, encoder, scaler, model_type, X, _prediction_buffer)
+                    cached_label[0] = label; cached_conf[0] = conf
                     _update_rep_counter(label)
-                    draw_overlay_panel(img, label, conf,
-                                       reps=rep_state["reps"])
+                    draw_overlay_panel(img, label, conf, reps=rep_state["reps"])
             except Exception as e:
-                cv2.putText(img, f"Error: {e}", (10, 30),
-                            cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 0, 255), 1)
+                _cv2.putText(img, f"Err: {e}"[:60], (10,30), _cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0,0,255), 1)
         else:
-            cached_label[0] = "Belirsiz"
-            cached_conf[0] = 0.0
+            cached_label[0] = "Belirsiz"; cached_conf[0] = 0.0
             draw_overlay_panel(img, "Belirsiz", 0.0, reps=rep_state["reps"])
             h, w = img.shape[:2]
-            cv2.putText(img, "Tam vucut gorunumunde durun",
-                        (10, h - 25), cv2.FONT_HERSHEY_SIMPLEX,
-                        0.55, (0, 165, 255), 1)
-
-        draw_center_counter(img, rep_state["reps"],
-                            rep_state["frames_since_rep"])
-        return av.VideoFrame.from_ndarray(img, format="bgr24")
+            _cv2.putText(img, "Tam vucut gorunumunde durun", (10, h-25), _cv2.FONT_HERSHEY_SIMPLEX, 0.55, (60,160,255), 1)
+        draw_center_counter(img, rep_state["reps"], rep_state["frames_since_rep"])
+        return _av.VideoFrame.from_ndarray(img, format="bgr24")
 
     return video_frame_callback, rep_state
 
-
-# ---------------------------------------------------------------------------
-# UI Sections
-# ---------------------------------------------------------------------------
-
-
+# ── UI Sections ─────────────────────────────────────────────────────────────
 def render_hero():
-    st.markdown(
-        """
+    st.markdown("""
         <div class="hero">
-            <div class="hero-badge">AI-Powered Fitness</div>
-            <h1>
-                Egzersizlerini<br>
-                <span class="grad">Yapay Zeka ile Takip Et</span>
-            </h1>
-            <p class="hero-sub">
-                Kamerani ac, egzersizini yap. Yapay zeka hareketlerini anlik olarak tanir,
-                tekrarlarini sayar ve performansini takip eder.
-            </p>
+            <div>
+                <div class="hero-eyebrow">AI-Powered Fitness Tracker</div>
+                <h1>EGZERSIZINI<br><em>YAPAY ZEKA</em><br>ILE TAKIP ET</h1>
+                <p class="hero-sub">
+                    Kameranı aç, egzersizini yap.&nbsp;
+                    Yapay zeka hareketlerini anlık olarak tanır,
+                    tekrarlarını sayar ve performansını takip eder.
+                </p>
+            </div>
+            <div class="hero-meta">
+                <div class="hero-version">v2.0</div>
+                <div class="hero-tags">
+                    MediaPipe<br>XGBoost / PyTorch<br>Streamlit WebRTC
+                </div>
+            </div>
         </div>
-        """,
-        unsafe_allow_html=True,
-    )
+    """, unsafe_allow_html=True)
 
 
 def render_stats():
-    cols = st.columns(3)
-    stats = [
-        ("5", "Desteklenen Egzersiz"),
-        ("10", "Hareket Pozisyonu"),
-        ("33", "Vucut Noktasi Takibi"),
-    ]
-    for col, (val, label) in zip(cols, stats):
-        with col:
-            st.markdown(
-                f"""
-                <div class="g-card" style="text-align:center; padding:1.4rem 1rem;">
-                    <div class="m-val">{val}</div>
-                    <div class="m-lbl">{label}</div>
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )
+    st.markdown("""
+        <div class="stats-bar">
+            <div class="stat-item">
+                <div class="stat-num">5<sup>✦</sup></div>
+                <div class="stat-label">Desteklenen Egzersiz</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-num">10</div>
+                <div class="stat-label">Hareket Pozisyonu</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-num">33</div>
+                <div class="stat-label">Vücut Noktası Takibi</div>
+            </div>
+        </div>
+    """, unsafe_allow_html=True)
 
 
 def render_how_it_works():
-    st.markdown('<div class="sep"></div>', unsafe_allow_html=True)
-    st.markdown('<div class="sec-title">Nasil Calisir?</div>', unsafe_allow_html=True)
-    st.markdown(
-        '<div class="sec-sub">Uc basit adimda antrenmanina basla</div>',
-        unsafe_allow_html=True,
-    )
+    st.markdown("""
+        <div class="sec-hdr">
+            <span class="sec-idx">01 —</span>
+            <span class="sec-ttl">NASIL ÇALIŞIR</span>
+            <span class="sec-note">3 adımda antrenman</span>
+        </div>
+    """, unsafe_allow_html=True)
+
     steps = [
-        ("1", "Kamerayi Baslat",
-         "Asagidaki START butonuna tiklayarak tarayici kameranizi acin. "
-         "Kameranin tam vucudunuzu gorecegi bir konumda durun."),
-        ("2", "Egzersizini Yap",
-         "Sinav, mekik, squat veya baska bir egzersiz yapmaya baslayin. "
-         "AI modeli hareketlerinizi anlik olarak tanir."),
-        ("3", "Sonuclarini Gor",
-         "Hareket tipi ve guven orani video uzerinde "
-         "canli olarak gosterilir."),
+        ("📷", "ADIM 01", "Kamerayı Başlat",
+         "START butonuna tıklayarak tarayıcı kameranızı açın. "
+         "Kameranın tam vücudunuzu göreceği bir konumda durun."),
+        ("🏋️", "ADIM 02", "Egzersizini Yap",
+         "Şınav, mekik, squat veya başka bir egzersiz yapmaya başlayın. "
+         "AI modeli hareketlerinizi anlık olarak tanır."),
+        ("📊", "ADIM 03", "Sonuçlarını Gör",
+         "Hareket tipi, güven oranı ve tekrar sayısı video üzerinde "
+         "canlı olarak gösterilir. Durduğunda özet ekrana gelir."),
     ]
     cols = st.columns(3)
-    for col, (num, title, desc) in zip(cols, steps):
+    for col, (ico, tag, title, desc) in zip(cols, steps):
         with col:
-            st.markdown(
-                f"""
-                <div class="g-card" style="text-align:center;">
-                    <div class="step-num">{num}</div>
-                    <div class="step-t">{title}</div>
-                    <div class="step-d">{desc}</div>
+            st.markdown(f"""
+                <div class="step-card">
+                    <span class="step-bg-n">{tag[-2:]}</span>
+                    <span class="step-tag">{tag}</span>
+                    <span class="step-ico">{ico}</span>
+                    <div class="step-title">{title}</div>
+                    <div class="step-desc">{desc}</div>
                 </div>
-                """,
-                unsafe_allow_html=True,
-            )
+            """, unsafe_allow_html=True)
 
 
 def render_exercises():
-    st.markdown('<div class="sep"></div>', unsafe_allow_html=True)
-    st.markdown(
-        '<div class="sec-title">Desteklenen Egzersizler</div>',
-        unsafe_allow_html=True,
-    )
-    st.markdown(
-        '<div class="sec-sub">AI modelimiz asagidaki hareketleri taniyor</div>',
-        unsafe_allow_html=True,
-    )
+    st.markdown("""
+        <div class="sec-hdr">
+            <span class="sec-idx">02 —</span>
+            <span class="sec-ttl">DESTEKlENEN EGZERSİZLER</span>
+            <span class="sec-note">AI destekli tanıma</span>
+        </div>
+    """, unsafe_allow_html=True)
+
     cols = st.columns(5)
     for col, ex in zip(cols, EXERCISES):
         with col:
-            st.markdown(
-                f"""
-                <div class="g-card" style="text-align:center; padding:1.6rem 0.8rem;">
-                    <div class="accent-top" style="background:{ex['color']};"></div>
-                    <div class="ex-icon">{ex['icon']}</div>
-                    <div class="ex-name">{ex['name']}</div>
+            st.markdown(f"""
+                <div class="ex-card">
+                    <span class="ex-code">{ex['code']}</span>
+                    <span class="ex-ico">{ex['icon']}</span>
+                    <div class="ex-tr">{ex['name']}</div>
                     <div class="ex-en">{ex['en']}</div>
-                    <div class="ex-desc">{ex['desc']}</div>
+                    <div class="ex-info">{ex['desc']}</div>
+                </div>
+            """, unsafe_allow_html=True)
+
+
+def render_camera_section(ml_model, encoder, scaler, model_type, feature_columns, pose_landmarker):
+    # ── CTA header ──
+    st.markdown("""
+        <div class="cta-section">
+            <div class="cta-top">
+                <div class="cta-text">
+                    <div class="cta-tag">03 — Antrenman Modu</div>
+                    <div class="cta-ttl">ANTRENMANINA<br>BAŞLA</div>
+                    <div class="cta-sub">
+                        Kameranı açmak için aşağıdaki
+                        <strong style="color:var(--lime)">KAMERAYI BAŞLAT</strong> butonuna tıkla,
+                        izni onayla ve egzersizine başla.
+                    </div>
+                    <div class="cta-checks">
+                        <span class="cta-check">İyi aydınlatılmış bir ortamda dur</span>
+                        <span class="cta-check">Tam vücut kameraya görünsün</span>
+                        <span class="cta-check">Chrome veya Edge önerilir</span>
+                    </div>
+                </div>
+                <div class="cta-visual">
+                    <div class="cta-cam-icon">📷</div>
+                    <span class="cta-cam-label">Canlı Takip</span>
                 </div>
-                """,
-                unsafe_allow_html=True,
-            )
-
-
-def render_camera_section(ml_model, encoder, scaler, model_type,
-                           feature_columns, pose_landmarker):
-    st.markdown('<div class="sep"></div>', unsafe_allow_html=True)
-    st.markdown(
-        """
-        <div class="cta-box">
-            <div class="cta-t">Antrenmanina Basla</div>
-            <div class="cta-d">
-                START butonuna tiklayarak kameranizi acin ve egzersize baslayin
             </div>
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
-
-    st.markdown(
-        """
-        <div class="tip-box" style="margin-top:1rem; text-align:center;">
-            <strong>Ipucu:</strong> Iyi aydinlatilmis bir ortamda
-            tam vucut gorunumunde durmaniz en iyi sonuclari verir.
-            Tarayiciniz kamera izni isteyecektir.
-        </div>
-        """,
-        unsafe_allow_html=True,
-    )
+            <div class="cta-body">
+    """, unsafe_allow_html=True)
 
     callback, rep_state = make_video_frame_callback(
         ml_model, encoder, scaler, model_type, feature_columns, pose_landmarker,
@@ -966,16 +1167,13 @@ def render_camera_section(ml_model, encoder, scaler, model_type,
 
     _pad_l, cam_col, _pad_r = st.columns([1, 6, 1])
     with cam_col:
-        st.markdown(
-            """
-            <div class="cam-wrapper">
-                <div class="cam-header">
-                    <div class="cam-dot off" id="camDot"></div>
-                    <span class="cam-label">Kamera</span>
+        st.markdown("""
+            <div class="cam-wrap">
+                <div class="cam-bar">
+                    <div class="cam-pulse off"></div>
+                    <span class="cam-lbl">Kamera</span>
                 </div>
-            """,
-            unsafe_allow_html=True,
-        )
+        """, unsafe_allow_html=True)
 
         webrtc_ctx = webrtc_streamer(
             key="exercise-detection",
@@ -987,28 +1185,18 @@ def render_camera_section(ml_model, encoder, scaler, model_type,
             },
             async_processing=True,
             rtc_configuration=get_ice_config(),
-            translations={
-                "start": "START",
-                "stop": "STOP",
-                "select_device": "Kamera Sec",
-            },
+            translations={"start": "KAMERAYI BAŞLAT", "stop": "DURDUR", "select_device": "Kamera Seç"},
         )
-
         st.markdown("</div>", unsafe_allow_html=True)
 
     if webrtc_ctx.state.playing:
         with cam_col:
-            st.markdown(
-                """
-                <div style="text-align:center; margin-top:0.6rem;">
-                    <div class="status-pill">
-                        <span class="status-dot"></span>
-                        Kamera aktif &mdash; Egzersize baslayin
-                    </div>
+            st.markdown("""
+                <div class="status-row">
+                    <span class="s-dot"></span>
+                    KAMERA AKTİF — EGZERSİZE BAŞLAYIN
                 </div>
-                """,
-                unsafe_allow_html=True,
-            )
+            """, unsafe_allow_html=True)
         if rep_state["start_time"] is None:
             rep_state["start_time"] = time.time()
         st.session_state["rep_state_snapshot"] = {
@@ -1017,32 +1205,24 @@ def render_camera_section(ml_model, encoder, scaler, model_type,
             "start_time": rep_state["start_time"],
         }
     else:
+        # Troubleshoot toggle (collapsible via JS)
         with cam_col:
-            st.markdown(
-                """
-                <div class="cam-guide">
-                    <div class="cam-guide-step">
-                        <span class="cam-guide-icon">&#x1F4F7;</span>
-                        <span class="cam-guide-text">Kamera iznini<br>onaylayin</span>
-                    </div>
-                    <div class="cam-guide-step">
-                        <span class="cam-guide-icon">&#x1F9CD;</span>
-                        <span class="cam-guide-text">Tam vucut<br>gorunumunde durun</span>
-                    </div>
-                    <div class="cam-guide-step">
-                        <span class="cam-guide-icon">&#x1F3CB;</span>
-                        <span class="cam-guide-text">Egzersizinizi<br>yapmaya baslayin</span>
-                    </div>
+            st.markdown("""
+                <button class="trouble-toggle"
+                    onclick="
+                        var p=this.nextElementSibling;
+                        p.style.display=p.style.display==='block'?'none':'block';
+                        this.style.borderColor=p.style.display==='block'?'rgba(255,184,48,0.25)':'var(--border)';
+                        this.style.color=p.style.display==='block'?'#c4a468':'var(--muted)';
+                    ">
+                    ⚠ Sorun mu yaşıyorsun?
+                </button>
+                <div class="trouble-panel">
+                    <strong>Bağlantı sorunu mu?</strong>
+                    Tarayıcınızın kamera erişimine izin verdiğinden emin olun.
+                    Sorun devam ederse sayfayı yenileyip tekrar deneyin.
                 </div>
-                <div class="trouble-card" style="text-align:center;">
-                    <strong>Baglanti sorunu mu yasiyorsunuz?</strong><br>
-                    Tarayicinizin kamera erisim izni verdiginizden emin olun.
-                    Chrome veya Edge kullanmaniz onerilir.
-                    Sorun devam ederse sayfayi yenileyip tekrar deneyin.
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )
+            """, unsafe_allow_html=True)
 
         if st.session_state.get("rep_state_snapshot"):
             snap = st.session_state["rep_state_snapshot"]
@@ -1051,105 +1231,81 @@ def render_camera_section(ml_model, encoder, scaler, model_type,
                 _render_workout_summary(snap, elapsed)
                 st.session_state["rep_state_snapshot"] = None
 
+    st.markdown("</div></div>", unsafe_allow_html=True)  # close cta-body + cta-section
+
 
 def _render_workout_summary(snap, elapsed_seconds):
-    """Render workout summary after camera stops."""
     mins = int(elapsed_seconds) // 60
     secs = int(elapsed_seconds) % 60
-
     total_kcal = 0.0
-    rows_html = ""
     exercise_names = {
-        "pushups": "Sinav",
-        "situp": "Mekik",
-        "squats": "Squat",
-        "pullups": "Barfiks",
-        "jumping_jacks": "Ziplama",
+        "pushups": "Şınav", "situp": "Mekik",
+        "squats": "Squat", "pullups": "Barfiks", "jumping_jacks": "Zıplama",
     }
+    rows_html = ""
     for ex, count in snap["exercise_reps"].items():
-        name = exercise_names.get(ex, ex)
-        kcal = count * KCAL_PER_REP.get(ex, 0.3)
+        name  = exercise_names.get(ex, ex)
+        kcal  = count * KCAL_PER_REP.get(ex, 0.3)
         total_kcal += kcal
         rows_html += f"""
-        <div style="display:flex; justify-content:space-between; padding:8px 0;
-                    border-bottom:1px solid rgba(255,255,255,0.06);">
-            <span>{name}</span>
-            <span style="color:#00d4aa; font-weight:600;">{count} tekrar</span>
+        <div class="sum-row">
+            <span class="sum-ex">{name}</span>
+            <span class="sum-rep">{count} tekrar</span>
         </div>"""
-
-    st.markdown(
-        f"""
-        <div style="background:rgba(18,18,30,0.85); border:1px solid rgba(0,212,170,0.2);
-                    border-radius:20px; padding:2rem; margin:1.5rem 0;
-                    max-width:500px; margin-left:auto; margin-right:auto;">
-            <div style="text-align:center; margin-bottom:1.2rem;">
-                <div style="font-size:1.4rem; font-weight:700; color:#fff;">
-                    Antrenman Ozeti
-                </div>
-                <div style="color:#7a7a95; font-size:0.9rem; margin-top:4px;">
-                    Sure: {mins} dk {secs} sn
-                </div>
+    st.markdown(f"""
+        <div class="summary">
+            <div class="sum-head">
+                <span class="sum-title">ANTRENMAN ÖZETİ</span>
+                <span class="sum-dur">{mins:02d}:{secs:02d}</span>
             </div>
-            {rows_html}
-            <div style="display:flex; justify-content:space-between; padding:12px 0 0;
-                        margin-top:8px;">
-                <span style="font-weight:600; color:#fff;">Tahmini Kalori</span>
-                <span style="color:#f59e0b; font-weight:700; font-size:1.1rem;">
-                    {total_kcal:.1f} kcal
-                </span>
+            <div class="sum-body">{rows_html}</div>
+            <div class="sum-foot">
+                <span class="sum-kcal-lbl">Tahmini Kalori</span>
+                <div>
+                    <span class="sum-kcal-val">{total_kcal:.1f}</span>
+                    <span class="sum-kcal-unit">kcal</span>
+                </div>
             </div>
         </div>
-        """,
-        unsafe_allow_html=True,
-    )
+    """, unsafe_allow_html=True)
 
 
 def render_footer():
-    st.markdown(
-        """
+    st.markdown("""
         <div class="foot">
-            <strong>BecomeAPro</strong> &mdash; AI-Powered Exercise Tracker<br>
-            <span style="font-size:0.78rem; margin-top:4px; display:inline-block;">
-                MediaPipe &bull; XGBoost / PyTorch &bull; Streamlit &bull; WebRTC
-            </span>
+            <span class="foot-brand">BECOMEAPRO</span>
+            <span class="foot-stack">MediaPipe &nbsp;·&nbsp; XGBoost / PyTorch &nbsp;·&nbsp; Streamlit &nbsp;·&nbsp; WebRTC</span>
         </div>
-        """,
-        unsafe_allow_html=True,
-    )
+    """, unsafe_allow_html=True)
 
 
 def render_model_missing():
-    st.markdown('<div class="sep"></div>', unsafe_allow_html=True)
     _p1, col_c, _p2 = st.columns([1, 3, 1])
     with col_c:
-        st.markdown(
-            """
-            <div class="onboard-card">
-                <h3>Model Dosyalari Bulunamadi</h3>
-                <p>
-                    Uygulamanin calisabilmesi icin egitilmis model dosyalarinin
-                    <code>models/</code> klasorune eklenmesi gerekiyor.
-                </p>
-                <p style="margin-top:1rem; font-size:0.85rem; color:#5a5a7a;">
-                    Gerekli dosyalar: meta.pkl, encoder.pkl, scaler.pkl,
-                    final_model.pkl, metadata.json
-                </p>
+        st.markdown("""
+            <div style="margin-top: 3rem;">
+                <div class="no-model">
+                    <span class="no-model-ico">📂</span>
+                    <h3>MODEL DOSYALARI BULUNAMADI</h3>
+                    <p>
+                        Uygulamanın çalışabilmesi için eğitilmiş model dosyalarının
+                        <code>models/</code> klasörüne eklenmesi gerekiyor.
+                    </p>
+                    <p style="margin-top:0.8rem;">
+                        Gerekli dosyalar: <code>meta.pkl</code> · <code>encoder.pkl</code> ·
+                        <code>scaler.pkl</code> · <code>final_model.pkl</code> · <code>metadata.json</code>
+                    </p>
+                </div>
             </div>
-            """,
-            unsafe_allow_html=True,
-        )
-
-
-# ---------------------------------------------------------------------------
-# Main
-# ---------------------------------------------------------------------------
+        """, unsafe_allow_html=True)
 
 
+# ── Main ────────────────────────────────────────────────────────────────────
 def main():
     st.markdown(CUSTOM_CSS, unsafe_allow_html=True)
 
-    result = load_all_artifacts()
-    ml_model = result[0]
+    # Step 1: Load ML model files only (fast, no network I/O) — page renders immediately
+    ml_model, encoder, scaler, model_type, feature_columns, meta = load_ml_artifacts()
 
     render_hero()
 
@@ -1158,16 +1314,20 @@ def main():
         render_footer()
         return
 
-    ml_model, encoder, scaler, model_type, feature_columns, pose_landmarker, _ = result
-
     render_stats()
     render_how_it_works()
     render_exercises()
-    render_camera_section(
-        ml_model, encoder, scaler, model_type, feature_columns, pose_landmarker,
-    )
+
+    # Step 2: Load pose landmarker (may download ~8 MB on first run — spinner shown inside)
+    pose_landmarker = load_pose_landmarker()
+    if pose_landmarker is None:
+        st.error("Pose modeli yuklenemedi. Lutfen sayfayi yenileyip tekrar deneyin.")
+        render_footer()
+        return
+
+    render_camera_section(ml_model, encoder, scaler, model_type, feature_columns, pose_landmarker)
     render_footer()
 
 
 if __name__ == "__main__":
-    main()
+    main()