add shadow

src/index.css

@@ -121,21 +121,21 @@ html {
   overflow: hidden;
 }
 
-/* موبایل: بدون سایهٔ کادر کتاب تا لبهٔ صفحه هنگام ورق دیده شود؛ overflow و contain کمتر تا بریدگی ۳D نماند */
+/* موبایل: بدون سایهٔ کادر کتاب؛ overflow مخفی تا سایهٔ ورق باعث جابه‌جایی نشود */
 @media (max-width: 767px) {
   .flipbook-container {
     box-shadow: none;
     border-radius: 2px;
-    overflow: visible;
+    overflow: hidden;
   }
 
   .flipbook-container .stf__wrapper {
-    overflow: visible !important;
+    overflow: hidden !important;
   }
 
   .flipbook-container .stf__item {
-    contain: none;
+    contain: layout style paint;
-    overflow: visible !important;
+    overflow: hidden !important;
   }
 }
 
@@ -159,6 +159,73 @@ html {
   isolation: isolate;
 }
 
+/* سایهٔ هر ورق — فقط inset؛ بدون --simple تا موقع ورق هم بماند */
+.flipbook-container .stf__item.--left .page {
+  box-shadow:
+    inset -16px 0 24px -12px rgba(0, 0, 0, 0.2),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+
+.flipbook-container .stf__item.--right .page {
+  box-shadow:
+    inset 16px 0 24px -12px rgba(0, 0, 0, 0.2),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+
+.flipbook-container .stf__item.--left .page::after,
+.flipbook-container .stf__item.--right .page::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 28px;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.flipbook-container .stf__item.--left .page::after {
+  right: 0;
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.04) 35%, transparent 100%);
+}
+
+.flipbook-container .stf__item.--right .page::after {
+  left: 0;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.04) 35%, transparent 100%);
+}
+
+/* تک‌صفحه (portrait): سایهٔ لبهٔ ورق‌زدن */
+.flipbook-container .stf__wrapper.--portrait .stf__item .page {
+  box-shadow:
+    inset 14px 0 22px -12px rgba(0, 0, 0, 0.16),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.04);
+}
+
+.flipbook-container .stf__wrapper.--portrait .stf__item .page::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 32px;
+  pointer-events: none;
+  z-index: 5;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.03) 40%, transparent 100%);
+}
+
+@media (max-width: 767px) {
+  .flipbook-container .stf__item.--left .page {
+    box-shadow:
+      inset -12px 0 20px -10px rgba(0, 0, 0, 0.18),
+      inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+  }
+
+  .flipbook-container .stf__wrapper.--portrait .stf__item .page {
+    box-shadow:
+      inset 12px 0 18px -10px rgba(0, 0, 0, 0.14),
+      inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+  }
+}
+
 /* مخفی کردن محتوای صفحات غیرفعال - فقط صفحه فعلی قابل تعامل است */
 .flipbook-container .stf__wrapper {
   overflow: hidden;

src/pages/viewer/components/BookViewer.tsx

@@ -442,8 +442,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
             dir="rtl"
         >
             <div
-                className="relative w-full flex flex-col flex-1 max-md:min-h-0 pt-8 md:pt-12 min-h-0"
+                className="relative w-full flex flex-col flex-1 max-md:min-h-0 pt-8 md:pt-12 min-h-0 overflow-hidden"
-                style={{ overflow: isDesktop ? 'hidden' : 'visible' }}
             >
                 <div className="relative flex flex-1 min-h-0 w-full items-center justify-center">
                 {/* Border و Shadow عمودی در وسط (فقط حالت دوصفحه‌ای دسکتاپ) */}
@@ -461,8 +460,16 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                 */}
                 <div
                     dir="ltr"
-                    className="max-w-full flex justify-center"
+                    className="max-w-full flex justify-center shrink-0 rounded-sm"
-                    style={{ overflow: isDesktop ? 'hidden' : 'visible', isolation: 'isolate' }}
+                    style={{
+                        overflow: 'hidden',
+                        isolation: 'isolate',
+                        width: usePortrait ? pagePixelWidth : pagePixelWidth * 2,
+                        height: pagePixelHeight,
+                        boxShadow: isDesktop
+                            ? undefined
+                            : '0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08)',
+                    }}
                 >
                     <HTMLFlipBook
                         key={flipKey}
@@ -474,12 +481,12 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
                         minHeight={pagePixelHeight}
                         maxWidth={pagePixelWidth}
                         maxHeight={pagePixelHeight}
-                        drawShadow={isDesktop}
+                        drawShadow={true}
                         flippingTime={800}
                         usePortrait={usePortrait}
                         startPage={startPage}
                         autoSize={false}
-                        maxShadowOpacity={isDesktop ? 0.5 : 0}
+                        maxShadowOpacity={isDesktop ? 0.55 : 0.32}
                         showCover={hasMultiplePages}
                         mobileScrollSupport={!usePortrait}
                         clickEventForward={true}