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;
-    overflow: visible !important;
+    contain: layout style paint;
+    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;