diff --git a/src/pages/Home/sections/VideocastPodcastSection.tsx b/src/pages/Home/sections/VideocastPodcastSection.tsx
index 5f16788..e6571ea 100644
--- a/src/pages/Home/sections/VideocastPodcastSection.tsx
+++ b/src/pages/Home/sections/VideocastPodcastSection.tsx
@@ -99,8 +99,8 @@ export default function VideocastPodcastSection({ only }: { only?: 'video' | 'po
           </div>
 
           {/* featured */}
-          <div style={{ marginBottom: 16, position: 'relative', overflow: 'hidden', background: '#000', flex: 1, minHeight: 200 }}>
-            <img src={VIDEOS[activeVideo].thumb} alt="" style={{ width: '100%', height: '100%', minHeight: 220, objectFit: 'cover', display: 'block', opacity: 0.82, position: 'absolute', inset: 0 }} />
+          <div style={{ marginBottom: 16, position: 'relative', overflow: 'hidden', background: '#000', flex: 1, minHeight: 440, borderRadius: 14 }} className="max-md:!min-h-[260px]">
+            <img src={VIDEOS[activeVideo].thumb} alt="" style={{ width: '100%', height: '100%', minHeight: 440, objectFit: 'cover', display: 'block', opacity: 0.82, position: 'absolute', inset: 0 }} />
             <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(7,29,73,0.88) 0%, transparent 55%)' }} />
             {/* play */}
             <div style={{
@@ -147,81 +147,101 @@ export default function VideocastPodcastSection({ only }: { only?: 'video' | 'po
         </div>
         )}
 
-        {/* ── PODCAST 30% ── */}
+        {/* ── PODCAST (full width) ── */}
         {showPod && (
-        <div style={{ padding: '48px 40px 80px 0', background: 'var(--paper)', display: 'flex', flexDirection: 'column', borderRight: 'none' }} className="max-md:!p-5 max-lg:!border-r-0 max-lg:!border-t-2 max-lg:!border-t-[var(--ink)] max-lg:!pt-10">
+        <div style={{ padding: '48px 40px 80px', background: 'var(--paper)' }} className="max-md:!p-5">
 
           {/* heading */}
-          <div style={{ marginBottom: 28 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
-              <div style={{ width: 28, height: 2, background: 'var(--red)' }} />
-              <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', color: 'var(--ink-4)' }}>PODCAST</span>
+          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 28, flexWrap: 'wrap', gap: 12 }}>
+            <div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
+                <div style={{ width: 28, height: 2, background: 'var(--red)' }} />
+                <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', color: 'var(--ink-4)' }}>PODCAST</span>
+              </div>
+              <h2 style={{ fontSize: 22, fontWeight: 900, letterSpacing: '-0.5px', color: 'var(--ink)', margin: 0 }}>{t.podLabel}</h2>
+              <p style={{ fontSize: 12, color: 'var(--ink-4)', margin: '4px 0 0' }}>{t.podSub}</p>
             </div>
-            <h2 style={{ fontSize: 22, fontWeight: 900, letterSpacing: '-0.5px', color: 'var(--ink)', margin: 0 }}>{t.podLabel}</h2>
-            <p style={{ fontSize: 12, color: 'var(--ink-4)', margin: '4px 0 0' }}>{t.podSub}</p>
+            <button style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink)', background: 'none', border: '1px solid var(--ink)', padding: '6px 16px', cursor: 'pointer', fontFamily: 'inherit' }}>
+              {t.listenAll}
+            </button>
           </div>
 
-          {/* circular cover + info */}
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 24 }}>
-            <div style={{ position: 'relative', marginBottom: 20 }}>
-              {/* spinning gradient ring */}
-              <div style={{
-                position: 'absolute', inset: -4,
-                borderRadius: '50%',
-                background: 'conic-gradient(from 0deg, #07468a, #0ea5e9, #14b8a6, #9b1c1c, #07468a)',
-                animation: 'spinRing 3s linear infinite',
-                zIndex: 0,
-              }} />
-              {/* white gap ring */}
-              <div style={{
-                position: 'absolute', inset: -1,
-                borderRadius: '50%',
-                background: 'var(--paper)',
-                zIndex: 1,
-              }} />
-              <img src={pod.cover} alt="" style={{ position: 'relative', width: 180, height: 180, borderRadius: '50%', objectFit: 'cover', display: 'block', zIndex: 2 }} />
-            </div>
+          {/* featured player (start) + episode list (end) */}
+          <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 28, alignItems: 'start' }} className="max-lg:!grid-cols-1">
 
-            <div style={{ textAlign: 'center' }}>
-              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: 'var(--red)', marginBottom: 6 }}>{pod[lang].ep}</div>
-              <h3 style={{ fontSize: 15, fontWeight: 900, color: 'var(--ink)', margin: '0 0 8px', lineHeight: 1.3 }}>{pod[lang].title}</h3>
-              <p style={{ fontSize: 11, color: 'var(--ink-3)', margin: '0 0 12px', lineHeight: 1.7 }}>{pod[lang].desc}</p>
-              <span style={{ fontSize: 10, color: 'var(--ink-5)' }}>{pod.duration}</span>
-            </div>
-
-            {/* progress */}
-            <div style={{ width: '100%', marginTop: 16 }}>
-              <div style={{ height: 3, background: 'var(--rule-thin)', borderRadius: 2, marginBottom: 6 }}>
-                <div style={{ width: '35%', height: '100%', background: 'var(--ink)', borderRadius: 2 }} />
-              </div>
-              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'var(--ink-5)' }}>
-                <span>۲۰:۱۲</span><span>{pod.duration}</span>
-              </div>
-            </div>
-          </div>
-
-          {/* episode list */}
-          <div style={{ borderTop: '1px solid var(--rule-thin)', paddingTop: 12, flex: 1 }}>
-            {PODCASTS.map((p, i) => (
-              <button key={p.id} onClick={() => setActivePod(i)} style={{
-                display: 'flex', alignItems: 'center', gap: 10, width: '100%',
-                padding: '12px 0', background: 'none', border: 'none', cursor: 'pointer',
-                borderBottom: i < PODCASTS.length - 1 ? '1px solid var(--rule-thin)' : 'none',
-                textAlign: lang === 'fa' ? 'right' : 'left',
-              }}>
-                <img src={p.cover} alt="" style={{ width: 52, height: 52, borderRadius: '50%', objectFit: 'cover', flexShrink: 0, opacity: i === activePod ? 1 : 0.55, border: i === activePod ? '2px solid var(--ink)' : '2px solid transparent' }} />
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p[lang].title}</div>
-                  <div style={{ fontSize: 10, color: 'var(--ink-4)' }}>{p[lang].ep} · {p.duration}</div>
+            {/* ── featured episode player card ── */}
+            <div style={{
+              background: 'var(--ink)', borderRadius: 20, padding: 28, color: '#fff',
+              boxShadow: '0 30px 70px -30px rgba(7,29,73,0.5)', position: 'relative', overflow: 'hidden',
+            }}>
+              {/* soft glow */}
+              <div style={{ position: 'absolute', top: -60, insetInlineEnd: -60, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,174,239,0.25), transparent 70%)', pointerEvents: 'none' }} />
+              <div style={{ position: 'relative', display: 'flex', gap: 16, alignItems: 'center', marginBottom: 22 }}>
+                <img src={pod.cover} alt="" style={{ width: 84, height: 84, borderRadius: 16, objectFit: 'cover', flexShrink: 0, boxShadow: '0 12px 30px -10px rgba(0,0,0,0.5)' }} />
+                <div style={{ minWidth: 0 }}>
+                  <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', color: '#00AEEF', marginBottom: 6 }}>{pod[lang].ep}</div>
+                  <h3 style={{ fontSize: 16, fontWeight: 900, color: '#fff', margin: 0, lineHeight: 1.4 }}>{pod[lang].title}</h3>
                 </div>
-                {i === activePod && <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--red)', flexShrink: 0 }} />}
-              </button>
-            ))}
-          </div>
+              </div>
+              <p style={{ position: 'relative', fontSize: 12, color: 'rgba(255,255,255,0.6)', lineHeight: 1.9, margin: '0 0 22px' }}>{pod[lang].desc}</p>
 
-          <button style={{ marginTop: 20, fontSize: 11, fontWeight: 700, color: 'var(--ink)', background: 'none', border: '1px solid var(--ink)', padding: '8px 16px', cursor: 'pointer', fontFamily: 'inherit', width: '100%' }}>
-            {t.listenAll}
-          </button>
+              {/* progress */}
+              <div style={{ position: 'relative', marginBottom: 18 }}>
+                <div style={{ height: 4, background: 'rgba(255,255,255,0.15)', borderRadius: 2, marginBottom: 7 }}>
+                  <div style={{ width: '35%', height: '100%', background: '#00AEEF', borderRadius: 2 }} />
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>
+                  <span>۲۰:۱۲</span><span>{pod.duration}</span>
+                </div>
+              </div>
+
+              {/* controls */}
+              <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 22 }}>
+                <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 18 }}>⏭</span>
+                <button aria-label="play" style={{
+                  width: 52, height: 52, borderRadius: '50%', border: 'none', cursor: 'pointer',
+                  background: '#00AEEF', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  boxShadow: '0 10px 24px -8px rgba(0,174,239,0.7)',
+                }}>
+                  <div style={{ width: 0, height: 0, borderTop: '9px solid transparent', borderBottom: '9px solid transparent', borderLeft: '15px solid #fff', marginLeft: 3 }} />
+                </button>
+                <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 18 }}>⏮</span>
+              </div>
+            </div>
+
+            {/* ── episode list ── */}
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              {PODCASTS.map((p, i) => (
+                <button key={p.id} onClick={() => setActivePod(i)} style={{
+                  display: 'flex', alignItems: 'center', gap: 14, width: '100%',
+                  padding: '12px 14px', cursor: 'pointer', borderRadius: 14,
+                  background: i === activePod ? '#fff' : 'transparent',
+                  border: i === activePod ? '1px solid var(--rule-thin)' : '1px solid transparent',
+                  boxShadow: i === activePod ? '0 10px 28px -18px rgba(7,29,73,0.3)' : 'none',
+                  textAlign: lang === 'fa' ? 'right' : 'left', transition: 'background 150ms, box-shadow 150ms',
+                }}
+                  onMouseEnter={e => { if (i !== activePod) (e.currentTarget as HTMLElement).style.background = 'rgba(7,29,73,0.04)' }}
+                  onMouseLeave={e => { if (i !== activePod) (e.currentTarget as HTMLElement).style.background = 'transparent' }}
+                >
+                  <div style={{ position: 'relative', flexShrink: 0 }}>
+                    <img src={p.cover} alt="" style={{ width: 56, height: 56, borderRadius: 12, objectFit: 'cover', display: 'block' }} />
+                    {i === activePod && (
+                      <div style={{ position: 'absolute', inset: 0, borderRadius: 12, background: 'rgba(7,29,73,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                        <div style={{ width: 0, height: 0, borderTop: '6px solid transparent', borderBottom: '6px solid transparent', borderLeft: '10px solid #fff', marginLeft: 2 }} />
+                      </div>
+                    )}
+                  </div>
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--ink)', marginBottom: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p[lang].title}</div>
+                    <div style={{ fontSize: 11, color: 'var(--ink-4)' }}>{p[lang].ep} · {p.duration}</div>
+                  </div>
+                  {i === activePod
+                    ? <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#00AEEF', flexShrink: 0 }} />
+                    : <span style={{ color: 'var(--ink-5)', fontSize: 16, flexShrink: 0 }}>{lang === 'fa' ? '▸' : '▸'}</span>}
+                </button>
+              ))}
+            </div>
+          </div>
         </div>
         )}