diff --git a/src/app/candidate-contact/page.tsx b/src/app/candidate-contact/page.tsx
index 3b28461..b0e0728 100644
--- a/src/app/candidate-contact/page.tsx
+++ b/src/app/candidate-contact/page.tsx
@@ -28,7 +28,7 @@ export default function CandidateContactPage() {
         />
       ) : null}
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-[calc(var(--safe-top)+40px)] pb-36">
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[17px] pt-[max(40px,calc(var(--safe-top)+4px))] pb-36">
         <header className="flex items-center justify-between">
           <NavigationButton icon="back" />
           <h1 className="font-faminela">{t.common.appName}</h1>
diff --git a/src/app/finding-match/page.tsx b/src/app/finding-match/page.tsx
index fc59f38..c864d28 100644
--- a/src/app/finding-match/page.tsx
+++ b/src/app/finding-match/page.tsx
@@ -29,7 +29,7 @@ export default function FindingMatchPage() {
     <>
       <PageBackground />
 
-      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[calc(var(--safe-top)+28px)] pb-5 text-center">
+      <main className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(28px,calc(var(--safe-top)+4px))] pb-5 text-center">
         <header className="-mx-[6px] flex items-center justify-between">
           <NavigationButton icon="back" />
           <h1 className="font-faminela">{t.common.appName}</h1>
diff --git a/src/app/intro/page.tsx b/src/app/intro/page.tsx
index 3512e1b..7f6d42a 100644
--- a/src/app/intro/page.tsx
+++ b/src/app/intro/page.tsx
@@ -124,7 +124,7 @@ export default function Intro() {
   }
 
   return (
-    <div className="pt-[calc(var(--safe-top)+28px)]">
+    <div className="pt-[max(28px,calc(var(--safe-top)+4px))]">
       {isReportSheetOpen && (
         <ReportActionsSheet onClose={() => setIsReportSheetOpen(false)} />
       )}
diff --git a/src/app/new-match/page.tsx b/src/app/new-match/page.tsx
index 9d7eda8..28076c9 100644
--- a/src/app/new-match/page.tsx
+++ b/src/app/new-match/page.tsx
@@ -194,7 +194,7 @@ export default function NewMatchPage() {
     <>
       <PageBackground />
 
-      <main className="-mx-[17px] min-h-screen h-full pb-5 text-center px-4 mt-[calc(var(--safe-top)+40px)]">
+      <main className="-mx-[17px] min-h-screen h-full pb-5 text-center px-4 mt-[max(40px,calc(var(--safe-top)+4px))]">
         <header className="flex items-center justify-between">
           <NavigationButton icon="back" />
           <h1 className="font-faminela">{t.common.appName}</h1>
diff --git a/src/components/ui/sticky-header.tsx b/src/components/ui/sticky-header.tsx
index 130e0d3..95c2b36 100644
--- a/src/components/ui/sticky-header.tsx
+++ b/src/components/ui/sticky-header.tsx
@@ -3,8 +3,10 @@
 import type { ReactNode } from "react";
 import { useViewPaddings } from "@/hooks/use-view-paddings";
 
-// پدینگ بالای طراحی هدر (معادل pt-7 = 28px). فضای امن دستگاه به این اضافه می‌شود.
+// پدینگ بالای طراحی هدر (معادل pt-7 = 28px). روی دستگاه، safe-area + 4px جایگزین
+// می‌شود (مثل صفحات بومی najm)، و طراحی اصلی به‌عنوان کف برای مرورگر حفظ می‌شود.
 const DESIGN_TOP_PADDING = 28;
+const SAFE_AREA_GAP = 4;
 
 type StickyHeaderProps = {
   children: ReactNode;
@@ -16,10 +18,11 @@ export default function StickyHeader({
   className,
 }: StickyHeaderProps) {
   const { top } = useViewPaddings();
+  const paddingTop = Math.max(DESIGN_TOP_PADDING, top + SAFE_AREA_GAP);
 
   return (
     <header
-      style={{ top: `-${top}px`, paddingTop: `${DESIGN_TOP_PADDING + top}px` }}
+      style={{ top: `-${top}px`, paddingTop: `${paddingTop}px` }}
       className={[
         "sticky z-30 rounded-b-[15px] bg-[linear-gradient(135deg,#E03950_0%,#FE6F82_100%)] px-[17px] pb-5",
         className,