صفحه رسمی سید بزرگ

تاریخ ارسال : 1405/06/08

وبسایت رسمی سید ابوالفضل میرمعینی

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

<title>سید بزرگ | Seyed Bozorg</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

:root{
--gold:#d9a441;
--gold2:#f6d47b;
--gold3:#fff0b3;

--bg:#060606;
--bg2:#0b0b0b;
--card:#101010;
--card2:#151515;

--text:#ffffff;
--muted:#9d9d9d;

--border:rgba(255,255,255,.09);
--glass:rgba(255,255,255,.055);

--green:#21c56b;
--blue:#3d8bff;
--red:#ff4b55;

--radius:26px;

--shadow:
0 25px 80px rgba(0,0,0,.65),
inset 0 1px 0 rgba(255,255,255,.04);
}

*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html{
width:100%;
min-height:100%;
overflow-x:hidden;
scroll-behavior:smooth;
background:var(--bg);
}

body{
margin:0;
width:100%;
min-height:100vh;
overflow-x:hidden;
background:
radial-gradient(circle at 50% -10%,rgba(217,164,65,.12),transparent 35%),
radial-gradient(circle at 0% 70%,rgba(217,164,65,.055),transparent 35%),
var(--bg);

color:var(--text);
font-family:"Vazirmatn",sans-serif;

text-align:center;

overscroll-behavior-x:none;
}

body.light{
--bg:#f4f2ee;
--bg2:#ffffff;
--card:#ffffff;
--card2:#f8f7f4;
--text:#111111;
--muted:#6f6f6f;
--border:rgba(0,0,0,.08);
--glass:rgba(255,255,255,.65);

background:
radial-gradient(circle at 50% -10%,rgba(217,164,65,.18),transparent 35%),
#f4f2ee;
}

/* =========================================================
GLOBAL
========================================================= */

img{
max-width:100%;
display:block;
}

button,
a,
input,
textarea{
font:inherit;
}

button{
border:0;
}

a{
color:inherit;
text-decoration:none;
}

.page{
width:100%;
max-width:560px;
margin:0 auto;
padding-bottom:110px;
position:relative;
}

.container{
width:calc(100% - 28px);
margin:0 auto;
}

/* =========================================================
BACKGROUND EFFECTS
========================================================= */

.bg-orb{
position:fixed;
pointer-events:none;
z-index:0;
border-radius:50%;
filter:blur(55px);
opacity:.18;
animation:orbMove 10s ease-in-out infinite alternate;
}

.orb1{
width:180px;
height:180px;
background:#d9a441;
top:100px;
right:-100px;
}

.orb2{
width:140px;
height:140px;
background:#8d671f;
bottom:180px;
left:-80px;
animation-delay:-4s;
}

@keyframes orbMove{
from{transform:translate3d(0,0,0) scale(1)}
to{transform:translate3d(20px,-25px,0) scale(1.15)}
}

/* =========================================================
LOADING
========================================================= */

#loader{
position:fixed;
inset:0;
z-index:99999;

display:flex;
align-items:center;
justify-content:center;

background:
radial-gradient(circle at center,rgba(217,164,65,.10),transparent 35%),
#050505;

transition:
opacity .8s ease,
visibility .8s ease;
}

#loader.hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.loader-box{
width:100%;
max-width:390px;
padding:30px;
position:relative;
}

.loader-logo{
width:100px;
height:100px;
margin:auto;
border-radius:30px;

background:
linear-gradient(145deg,#20180a,#0b0b0b);

border:1px solid rgba(246,212,123,.45);

box-shadow:
0 0 0 1px rgba(217,164,65,.08),
0 0 40px rgba(217,164,65,.22),
inset 0 0 30px rgba(217,164,65,.08);

display:flex;
align-items:center;
justify-content:center;

position:relative;
overflow:hidden;

animation:
loaderFloat 2.8s ease-in-out infinite,
loaderPulse 2s ease-in-out infinite alternate;
}

.loader-logo::after{
content:"";
position:absolute;
width:35px;
height:180px;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.22),
transparent
);

transform:rotate(28deg);
left:-80px;

animation:loaderShine 2.8s linear infinite;
}

.loader-logo i{
font-size:38px;
color:var(--gold2);
}

.loader-title{
margin-top:26px;
font-family:"Lalezar",sans-serif;
font-size:39px;
line-height:1;
letter-spacing:.5px;

background:linear-gradient(
100deg,
#9c6c1e,
#fff1b5,
#d9a441,
#fff1b5,
#9c6c1e
);

background-size:300% auto;
-webkit-background-clip:text;
background-clip:text;
color:transparent;

animation:goldText 3s linear infinite;
}

.loader-sub{
color:#aaa;
margin-top:12px;
font-size:12px;
}

.loader-progress{
width:210px;
height:3px;
margin:28px auto 0;
border-radius:20px;
background:rgba(255,255,255,.08);
overflow:hidden;
}

.loader-progress span{
display:block;
width:0;
height:100%;
background:linear-gradient(90deg,#9c6c1e,#ffe9a2,#c6922f);
animation:loading 2.7s cubic-bezier(.65,.05,.36,1) forwards;
}

@keyframes loading{
to{width:100%}
}

@keyframes loaderShine{
to{left:250px}
}

@keyframes loaderFloat{
50%{transform:translateY(-7px)}
}

@keyframes loaderPulse{
from{box-shadow:0 0 25px rgba(217,164,65,.15)}
to{box-shadow:0 0 55px rgba(217,164,65,.35)}
}

@keyframes goldText{
to{background-position:300% center}
}

/* =========================================================
HEADER
========================================================= */

.top-header{
position:sticky;
top:0;
z-index:100;

width:100%;
padding:
max(12px,env(safe-area-inset-top))
14px
10px;

background:rgba(6,6,6,.70);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);

border-bottom:1px solid rgba(255,255,255,.05);
}

body.light .top-header{
background:rgba(244,242,238,.78);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}

.brand{
display:flex;
align-items:center;
gap:9px;
min-width:0;
}

.brand-logo{
width:42px;
height:42px;
flex:0 0 42px;

border-radius:14px;

background:
linear-gradient(145deg,#21170a,#0c0c0c);

border:1px solid rgba(217,164,65,.35);

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;
position:relative;
}

.brand-logo img{
width:100%;
height:100%;
object-fit:cover;
}

.brand-logo i{
color:var(--gold2);
}

.brand-text{
min-width:0;
text-align:right;
}

.brand-name{
font-family:"Lalezar",sans-serif;
font-size:21px;
line-height:1.05;
white-space:nowrap;
}

.brand-en{
color:var(--gold2);
font-family:Inter,sans-serif;
font-size:8px;
letter-spacing:2px;
margin-top:3px;
}

/* HEADER CONTROLS */

.header-controls{
display:flex;
gap:7px;
}

.icon-btn{
width:39px;
height:39px;
border-radius:14px;

color:var(--text);
background:rgba(255,255,255,.055);

border:1px solid rgba(255,255,255,.08);

display:flex;
align-items:center;
justify-content:center;

position:relative;
overflow:hidden;

transition:
transform .2s ease,
border-color .2s ease,
background .2s ease;
}

.icon-btn::after{
content:"";
position:absolute;
width:55px;
height:130%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);
transform:rotate(25deg);
left:-80px;
}

.icon-btn:active{
transform:scale(.9);
}

.icon-btn:active::after{
animation:buttonShine .5s ease;
}

@keyframes buttonShine{
to{left:80px}
}

.icon-btn i{
position:relative;
z-index:2;
}

.lang-btn{
font-family:Inter,sans-serif;
font-size:11px;
font-weight:800;
}

/* =========================================================
HERO
========================================================= */

.hero{
position:relative;
padding:35px 0 25px;
z-index:2;
}

.hero-small{
color:var(--gold2);
font-size:11px;
letter-spacing:2px;
margin-bottom:8px;
}

.hero-title{
margin:0;
font-family:"Lalezar",sans-serif;
font-size:clamp(45px,13vw,68px);
line-height:.95;

display:flex;
align-items:center;
justify-content:center;
gap:9px;

white-space:nowrap;

background:
linear-gradient(
100deg,
#8c611b,
#fff2b7,
#d9a441,
#fff5c7,
#8c611b
);

background-size:350% auto;
-webkit-background-clip:text;
background-clip:text;
color:transparent;

animation:goldText 5s linear infinite;
}

.verify{
width:20px;
height:20px;
border-radius:50%;
background:#168cff;
color:#fff;

display:inline-flex;
align-items:center;
justify-content:center;

font-size:10px;
flex:0 0 auto;

box-shadow:0 0 18px rgba(22,140,255,.35);
}

.hero-en{
margin-top:9px;
color:var(--muted);
font-family:Inter,sans-serif;
font-size:10px;
letter-spacing:4px;
}

/* =========================================================
PROFILE GLASS CARD
========================================================= */

.profile-wrap{
margin:18px auto 0;
width:min(100%,390px);
position:relative;
}

.profile-glow{
position:absolute;
inset:-12px;
border-radius:40px;
background:
conic-gradient(
from 0deg,
transparent,
rgba(217,164,65,.6),
transparent 25%,
rgba(255,255,255,.18),
transparent 55%
);

filter:blur(12px);
opacity:.6;

animation:spinGlow 7s linear infinite;
}

@keyframes spinGlow{
to{transform:rotate(360deg)}
}

.profile-card{
position:relative;
z-index:2;

min-height:360px;

border-radius:34px;
overflow:hidden;

border:1px solid rgba(246,212,123,.22);

background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.025)
);

box-shadow:
0 30px 80px rgba(0,0,0,.6),
inset 0 1px rgba(255,255,255,.12);

backdrop-filter:blur(20px);
}

.profile-card::before{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:rgba(217,164,65,.15);
filter:blur(55px);
top:-70px;
left:-60px;
}

.profile-card::after{
content:"";
position:absolute;
width:50px;
height:180%;
top:-40%;
left:-100px;

transform:rotate(25deg);

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);

animation:profileShine 5s ease-in-out infinite;
}

@keyframes profileShine{
0%,35%{left:-100px}
60%,100%{left:430px}
}

.profile-image{
position:absolute;
inset:14px;

border-radius:27px;
overflow:hidden;

background:
radial-gradient(circle at center,#29200e,#080808 65%);

border:1px solid rgba(255,255,255,.08);
}

.profile-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center top;

filter:
contrast(1.04)
saturate(1.03);
}

.profile-placeholder{
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
color:#777;
}

.profile-placeholder i{
font-size:45px;
color:var(--gold);
}

/* GOLD FRAME */

.gold-frame{
position:absolute;
inset:6px;
border-radius:31px;
border:1px solid rgba(246,212,123,.35);
pointer-events:none;
z-index:5;
}

.gold-frame::before,
.gold-frame::after{
content:"";
position:absolute;
width:30px;
height:30px;
border-color:var(--gold2);
}

.gold-frame::before{
top:-1px;
right:-1px;
border-top:2px solid;
border-right:2px solid;
border-radius:0 25px 0 0;
}

.gold-frame::after{
bottom:-1px;
left:-1px;
border-bottom:2px solid;
border-left:2px solid;
border-radius:0 0 0 25px;
}

/* =========================================================
SECTION
========================================================= */

.section{
position:relative;
z-index:2;
padding:27px 0 0;
}

.section-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:10px;

margin-bottom:15px;

text-align:right;
}

.section-title{
font-family:"Lalezar",sans-serif;
font-size:28px;
line-height:1;
margin:0;
}

.section-title span{
color:var(--gold2);
}

.section-desc{
color:var(--muted);
font-size:10px;
margin-top:6px;
}

.section-more{
color:var(--gold2);
font-size:10px;
white-space:nowrap;
}

/* =========================================================
FEATURE GRID
========================================================= */

.feature-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.feature{
position:relative;
min-height:150px;

padding:18px 14px;

text-align:right;

border-radius:24px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.085),
rgba(255,255,255,.025)
);

border:1px solid var(--border);

box-shadow:var(--shadow);

overflow:hidden;

transition:
transform .35s cubic-bezier(.2,.8,.2,1),
border-color .35s ease;
}

.feature::before{
content:"";
position:absolute;
width:90px;
height:90px;
background:rgba(217,164,65,.14);
border-radius:50%;
filter:blur(35px);
top:-40px;
right:-40px;
}

.feature::after{
content:"";
position:absolute;
width:55px;
height:150%;
top:-20%;
left:-100px;
transform:rotate(25deg);
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);
transition:left .6s ease;
}

.feature:active{
transform:scale(.96);
}

.feature:active::after{
left:150%;
}

.feature-icon{
width:45px;
height:45px;

display:flex;
align-items:center;
justify-content:center;

border-radius:15px;

background:rgba(217,164,65,.09);
border:1px solid rgba(217,164,65,.18);

color:var(--gold2);

font-size:19px;

margin-bottom:20px;
}

.feature h3{
margin:0;
font-size:14px;
}

.feature p{
margin:6px 0 0;
color:var(--muted);
font-size:9px;
line-height:1.7;
}

/* =========================================================
HORIZONTAL MOCKUP
========================================================= */

.mock-scroll{
display:flex;
gap:12px;

overflow-x:auto;
overflow-y:hidden;

padding:3px 2px 12px;

scroll-snap-type:x mandatory;

scrollbar-width:none;
}

.mock-scroll::-webkit-scrollbar{
display:none;
}

.mock{
flex:0 0 84%;
min-height:190px;

scroll-snap-align:center;

border-radius:28px;

position:relative;
overflow:hidden;

padding:20px;

text-align:right;

background:
radial-gradient(
circle at 100% 0%,
rgba(217,164,65,.2),
transparent 40%
),
linear-gradient(
145deg,
#17130d,
#0c0c0c
);

border:1px solid rgba(217,164,65,.18);

box-shadow:
0 25px 60px rgba(0,0,0,.45),
inset 0 1px rgba(255,255,255,.07);
}

.mock-number{
font-family:Inter,sans-serif;
color:rgba(255,255,255,.12);
font-size:55px;
font-weight:900;
position:absolute;
left:15px;
bottom:-10px;
}

.mock-icon{
width:50px;
height:50px;
border-radius:17px;
background:rgba(255,255,255,.07);
display:flex;
align-items:center;
justify-content:center;
color:var(--gold2);
font-size:21px;
}

.mock h3{
font-size:17px;
margin:18px 0 5px;
}

.mock p{
font-size:10px;
color:#aaa;
line-height:1.8;
max-width:240px;
}

/* =========================================================
GOLD CTA
========================================================= */

.gold-button{
width:100%;
min-height:54px;

display:flex;
align-items:center;
justify-content:center;
gap:9px;

color:#0b0b0b;

background:
linear-gradient(
110deg,
#9b6b1e,
#ffe7a0,
#c69331,
#fff1ba
);

background-size:250% 100%;

border-radius:18px;

font-weight:900;
font-size:13px;

box-shadow:
0 15px 35px rgba(217,164,65,.16),
inset 0 1px rgba(255,255,255,.55);

position:relative;
overflow:hidden;

animation:goldButton 5s linear infinite;

transition:transform .2s ease;
}

.gold-button:active{
transform:scale(.97);
}

@keyframes goldButton{
to{background-position:250% 0}
}

/* =========================================================
SOCIALS
========================================================= */

.social-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:9px;
}

.social{
min-width:0;
height:72px;

border-radius:20px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;

background:rgba(255,255,255,.045);
border:1px solid var(--border);

color:var(--muted);

transition:.25s ease;
}

.social i{
font-size:20px;
color:var(--gold2);
}

.social span{
font-size:8px;
}

.social:active{
transform:translateY(-3px) scale(.96);
border-color:rgba(217,164,65,.4);
}

/* =========================================================
BOTTOM NAV
========================================================= */

.bottom-nav{
position:fixed;

left:50%;
bottom:
max(10px,env(safe-area-inset-bottom));

transform:translateX(-50%);

width:min(calc(100% - 22px),520px);

z-index:500;

padding:7px;

display:grid;
grid-template-columns:repeat(5,1fr);
gap:5px;

border-radius:25px;

background:
linear-gradient(
145deg,
rgba(28,28,28,.88),
rgba(8,8,8,.92)
);

border:1px solid rgba(255,255,255,.09);

box-shadow:
0 20px 70px rgba(0,0,0,.65),
inset 0 1px rgba(255,255,255,.08);

backdrop-filter:blur(25px);
-webkit-backdrop-filter:blur(25px);
}

body.light .bottom-nav{
background:rgba(255,255,255,.88);
}

.nav-item{
min-height:57px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;

color:#777;

border-radius:19px;

transition:.25s ease;

position:relative;
overflow:hidden;
}

.nav-item i{
font-size:17px;
}

.nav-item span{
font-size:8px;
}

.nav-item.active{
color:var(--gold2);
background:rgba(217,164,65,.08);
}

.nav-item.active::before{
content:"";
position:absolute;
top:0;
width:20px;
height:2px;
background:var(--gold2);
border-radius:20px;
box-shadow:0 0 15px var(--gold2);
}

/* =========================================================
FULLSCREEN MENU
========================================================= */

.menu-overlay{
position:fixed;
inset:0;
z-index:10000;

visibility:hidden;
opacity:0;

background:
radial-gradient(
circle at 50% 10%,
rgba(217,164,65,.13),
transparent 32%
),
rgba(3,3,3,.97);

backdrop-filter:blur(30px);
-webkit-backdrop-filter:blur(30px);

transition:.45s ease;

overflow-y:auto;
}

.menu-overlay.open{
visibility:visible;
opacity:1;
}

.menu-content{
width:min(100% - 32px,520px);
min-height:100%;
margin:auto;

padding:
max(30px,env(safe-area-inset-top))
0
40px;

display:flex;
flex-direction:column;
}

.menu-top{
display:flex;
align-items:center;
justify-content:space-between;

margin-bottom:35px;
}

.menu-brand{
font-family:"Lalezar",sans-serif;
font-size:28px;
}

.close-menu{
width:46px;
height:46px;

border-radius:16px;

background:rgba(255,255,255,.06);
color:white;

border:1px solid rgba(255,255,255,.1);
}

.menu-items{
display:flex;
flex-direction:column;
gap:9px;
}

.menu-link{
width:100%;
min-height:72px;

display:flex;
align-items:center;

gap:15px;

padding:12px 15px;

border-radius:23px;

text-align:right;

background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);

transition:.3s ease;

transform:translateY(20px);
opacity:0;
}

.menu-overlay.open .menu-link{
transform:translateY(0);
opacity:1;
}

.menu-link:nth-child(1){transition-delay:.04s}
.menu-link:nth-child(2){transition-delay:.08s}
.menu-link:nth-child(3){transition-delay:.12s}
.menu-link:nth-child(4){transition-delay:.16s}
.menu-link:nth-child(5){transition-delay:.20s}
.menu-link:nth-child(6){transition-delay:.24s}
.menu-link:nth-child(7){transition-delay:.28s}
.menu-link:nth-child(8){transition-delay:.32s}

.menu-icon{
width:48px;
height:48px;
flex:0 0 48px;

display:flex;
align-items:center;
justify-content:center;

border-radius:17px;

background:
linear-gradient(
145deg,
rgba(217,164,65,.16),
rgba(255,255,255,.035)
);

border:1px solid rgba(217,164,65,.15);

color:var(--gold2);

font-size:19px;
}

.menu-text{
flex:1;
}

.menu-text strong{
display:block;
font-size:14px;
}

.menu-text small{
color:#888;
font-size:9px;
}

.menu-arrow{
color:#666;
font-size:12px;
}

/* =========================================================
FULL PAGE VIEW
========================================================= */

.view{
display:none;
min-height:calc(100vh - 65px);
animation:viewIn .5s ease both;
}

.view.active{
display:block;
}

@keyframes viewIn{
from{
opacity:0;
transform:translateY(18px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.view-inner{
padding:28px 0 30px;
}

/* =========================================================
PAGE HEADER
========================================================= */

.page-heading{
margin:5px 0 25px;
}

.page-heading .eyebrow{
color:var(--gold2);
font-family:Inter,sans-serif;
font-size:9px;
letter-spacing:3px;
}

.page-heading h1{
font-family:"Lalezar",sans-serif;
font-size:40px;
line-height:1;
margin:9px 0 8px;
}

.page-heading p{
color:var(--muted);
font-size:10px;
line-height:1.8;
margin:0 auto;
max-width:370px;
}

/* =========================================================
CARDS
========================================================= */

.big-card{
padding:20px;
border-radius:27px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.075),
rgba(255,255,255,.025)
);

border:1px solid var(--border);

box-shadow:var(--shadow);

margin-bottom:12px;

text-align:right;
}

.big-card h3{
margin:0 0 8px;
font-size:16px;
}

.big-card p{
color:var(--muted);
font-size:10px;
line-height:2;
}

/* =========================================================
PROJECTS
========================================================= */

.project{
padding:15px;
border-radius:23px;

display:flex;
align-items:center;
gap:12px;

background:rgba(255,255,255,.045);
border:1px solid var(--border);

margin-bottom:9px;

text-align:right;
}

.project-icon{
width:54px;
height:54px;
flex:0 0 54px;

border-radius:17px;

display:flex;
align-items:center;
justify-content:center;

color:var(--gold2);
background:rgba(217,164,65,.09);
}

.project-info{
min-width:0;
flex:1;
}

.project-info strong{
font-size:13px;
display:block;
}

.project-info span{
display:block;
color:#888;
font-size:9px;
margin-top:4px;
}

.project-action{
width:38px;
height:38px;
border-radius:13px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(255,255,255,.05);
color:var(--gold2);
}

/* =========================================================
SUBSCRIPTIONS
========================================================= */

.plans{
display:flex;
flex-direction:column;
gap:12px;
}

.plan{
position:relative;

padding:23px 18px;

border-radius:27px;

background:
linear-gradient(
145deg,
rgba(255,255,255,.07),
rgba(255,255,255,.02)
);

border:1px solid var(--border);

overflow:hidden;

text-align:right;
}

.plan.featured{
border-color:rgba(217,164,65,.42);
box-shadow:
0 20px 55px rgba(217,164,65,.09),
inset 0 0 50px rgba(217,164,65,.025);
}

.plan-badge{
position:absolute;
top:15px;
left:15px;

font-size:8px;
padding:5px 9px;

border-radius:20px;

color:#111;
background:linear-gradient(100deg,#c69230,#ffe6a0);
}

.plan h3{
font-family:"Lalezar",sans-serif;
font-size:25px;
margin:0;
}

.price{
margin:10px 0 15px;

font-family:Inter,sans-serif;
font-size:24px;
font-weight:900;

color:var(--gold2);
}

.price small{
font-size:9px;
color:#888;
font-weight:500;
}

.plan ul{
list-style:none;
margin:0;
padding:0;
}

.plan li{
font-size:10px;
color:#aaa;
margin:10px 0;
}

.plan li i{
color:var(--green);
margin-left:7px;
}

/* =========================================================
ABOUT
========================================================= */

.about-photo{
width:100%;
aspect-ratio:1 / 1.05;

border-radius:30px;
overflow:hidden;

background:
radial-gradient(circle,#29200e,#070707 70%);

border:1px solid rgba(217,164,65,.24);

margin-bottom:15px;

position:relative;
}

.about-photo img{
width:100%;
height:100%;
object-fit:cover;
}

.about-photo .gold-frame{
inset:8px;
}

/* =========================================================
SETTINGS
========================================================= */

.setting-row{
min-height:65px;

display:flex;
align-items:center;
gap:12px;

padding:10px 13px;

background:rgba(255,255,255,.04);
border:1px solid var(--border);

border-radius:19px;

margin-bottom:8px;

text-align:right;
}

.setting-icon{
width:42px;
height:42px;
flex:0 0 42px;

border-radius:14px;

display:flex;
align-items:center;
justify-content:center;

background:rgba(217,164,65,.08);
color:var(--gold2);
}

.setting-info{
flex:1;
}

.setting-info strong{
font-size:12px;
display:block;
}

.setting-info small{
color:#777;
font-size:8px;
}

.switch{
width:45px;
height:25px;

border-radius:30px;

background:#222;

position:relative;
transition:.3s ease;
}

.switch::after{
content:"";
position:absolute;

width:19px;
height:19px;

border-radius:50%;

top:3px;
right:3px;

background:#777;

transition:.3s ease;
}

.switch.on{
background:rgba(217,164,65,.25);
}

.switch.on::after{
right:23px;
background:var(--gold2);
}

/* =========================================================
TOAST
========================================================= */

#toast{
position:fixed;

left:50%;
bottom:105px;

transform:translate(-50%,20px);

z-index:30000;

width:max-content;
max-width:calc(100% - 35px);

padding:12px 17px;

border-radius:17px;

background:
linear-gradient(
145deg,
rgba(35,35,35,.95),
rgba(10,10,10,.96)
);

border:1px solid rgba(217,164,65,.25);

box-shadow:0 20px 50px rgba(0,0,0,.5);

font-size:10px;

opacity:0;
pointer-events:none;

transition:.35s ease;
}

#toast.show{
opacity:1;
transform:translate(-50%,0);
}

/* =========================================================
MODAL
========================================================= */

.modal{
position:fixed;
inset:0;
z-index:25000;

display:flex;
align-items:flex-end;
justify-content:center;

background:rgba(0,0,0,.72);

backdrop-filter:blur(12px);

opacity:0;
visibility:hidden;

transition:.3s ease;
}

.modal.open{
opacity:1;
visibility:visible;
}

.modal-box{
width:min(100% - 20px,520px);

padding:22px;

margin-bottom:10px;

border-radius:30px;

background:
linear-gradient(
145deg,
#171717,
#0a0a0a
);

border:1px solid rgba(255,255,255,.09);

box-shadow:0 -20px 80px rgba(0,0,0,.7);

transform:translateY(40px);
transition:.4s cubic-bezier(.2,.8,.2,1);

text-align:right;
}

.modal.open .modal-box{
transform:translateY(0);
}

.modal-title{
font-family:"Lalezar",sans-serif;
font-size:25px;
margin-bottom:7px;
}

.modal-desc{
color:#888;
font-size:9px;
line-height:1.8;
margin-bottom:15px;
}

.input{
width:100%;
min-height:50px;

border-radius:16px;

background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.08);

color:white;

outline:none;

padding:12px;

margin-bottom:8px;
}

textarea.input{
min-height:100px;
resize:none;
}

.modal-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}

.dark-button{
min-height:50px;
border-radius:16px;

background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);

color:white;
}

/* =========================================================
REVEAL
========================================================= */

.reveal{
opacity:0;
transform:translateY(18px);
transition:
opacity .7s ease,
transform .7s cubic-bezier(.2,.8,.2,1);
}

.reveal.show{
opacity:1;
transform:none;
}

/* =========================================================
MOBILE SAFETY
========================================================= */

@media(max-width:360px){

.container{
width:calc(100% - 20px);
}

.hero-title{
font-size:41px;
gap:6px;
}

.verify{
width:17px;
height:17px;
font-size:8px;
}

.feature{
min-height:140px;
padding:14px 11px;
}

.social-grid{
grid-template-columns:repeat(2,1fr);
}

.profile-card{
min-height:325px;
}
}

@media(min-width:561px){

body{
background:#020202;
}

.page{
max-width:560px;
}
}

/* PREVENT ANY HORIZONTAL SHIFT */

html,
body,
#app,
.page,
.view{
max-width:100%;
}

*{
max-width:100%;
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:.01ms !important;
}
}

/* =========================================================
USER-FRIENDLY PATCH — PRESERVE EXISTING SITE
========================================================= */

/* All visible text remains readable in dark mode */
body:not(.light),
body:not(.light) .view,
body:not(.light) .big-card,
body:not(.light) .feature,
body:not(.light) .project,
body:not(.light) .plan,
body:not(.light) .setting-row,
body:not(.light) .mock,
body:not(.light) .menu-link,
body:not(.light) .section,
body:not(.light) .page-heading {
color:#fff;
}

body:not(.light) .project-info strong,
body:not(.light) .feature h3,
body:not(.light) .big-card h3,
body:not(.light) .plan h3,
body:not(.light) .mock h3,
body:not(.light) .setting-info strong,
body:not(.light) .menu-text strong,
body:not(.light) .page-heading h1,
body:not(.light) .section-title {
color:#fff !important;
}

body:not(.light) .project-info span,
body:not(.light) .feature p,
body:not(.light) .big-card p,
body:not(.light) .plan li,
body:not(.light) .mock p,
body:not(.light) .setting-info small,
body:not(.light) .menu-text small,
body:not(.light) .section-desc,
body:not(.light) .page-heading p {
color:#e9e9e9 !important;
}

/* Center all boxes and text */
.page, .container, .view-inner, .hero, .section, .section-head,
.section-head > div, .page-heading, .big-card, .feature,
.project, .project-info, .plan, .mock, .menu-content, .menu-top,
.menu-items, .menu-link, .menu-text, .setting-row, .setting-info {
text-align:center !important;
}

.section-head{
align-items:center !important;
justify-content:center !important;
}

.feature, .project, .menu-link, .setting-row{
justify-content:center !important;
align-items:center !important;
}

.project{
height:96px !important;
min-height:96px !important;
width:100% !important;
margin-bottom:10px !important;
}

.project-info{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
}

.project-action{
flex:0 0 38px;
}

/* Instagram-like verified badge: blue badge shape, not a generic
Font Awesome check inside a circle */
.verify{
width:21px !important;
height:21px !important;
border-radius:6px 7px 7px 6px !important;
background:#1d9bf0 !important;
color:#fff !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
position:relative !important;
box-shadow:0 0 16px rgba(29,155,240,.28) !important;
clip-path:polygon(50% 0%,61% 7%,74% 5%,82% 15%,95% 20%,94% 34%,100% 50%,94% 64%,95% 78%,82% 84%,74% 95%,61% 93%,50% 100%,39% 93%,26% 95%,18% 84%,5% 78%,6% 64%,0% 50%,6% 36%,5% 22%,18% 16%,26% 5%,39% 7%);
}
.verify i{
display:none !important;
}
.verify::before{
content:"";
width:8px;
height:4px;
border-left:2px solid #fff;
border-bottom:2px solid #fff;
transform:rotate(-45deg) translateY(-1px);
display:block;
}

/* Keep the light theme readable too */
body.light .project-info strong,
body.light .feature h3,
body.light .big-card h3,
body.light .plan h3,
body.light .mock h3,
body.light .setting-info strong,
body.light .menu-text strong,
body.light .page-heading h1,
body.light .section-title{
color:#111 !important;
}

body.light .project-info span,
body.light .feature p,
body.light .big-card p,
body.light .plan li,
body.light .mock p,
body.light .setting-info small,
body.light .menu-text small,
body.light .section-desc,
body.light .page-heading p{
color:#444 !important;
}

.ai-mockup-frame{
width:min(100%,270px);
height:360px;
margin:18px auto 20px;
padding:8px;
border-radius:34px;
background:linear-gradient(145deg,#262626,#0b0b0b);
border:1px solid rgba(217,164,65,.35);
box-shadow:0 25px 60px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.12);
}
.ai-mockup-screen{
width:100%;
height:100%;
border-radius:27px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
background:
radial-gradient(circle at 50% 25%,rgba(217,164,65,.18),transparent 30%),
linear-gradient(180deg,#171717,#080808);
color:#fff;
}
.ai-mockup-screen i{font-size:58px;color:var(--gold2);}
.ai-mockup-screen strong{font-family:"Lalezar";font-size:28px;color:#fff;}
.ai-mockup-screen small{color:#ddd;font-size:9px;letter-spacing:2px;}
.download-note{margin-top:10px;font-size:9px;color:#ddd !important;}

/* FINAL RESPONSIVE / READABILITY PATCH */
body, body *{text-align:center;}

.loader-logo{padding:8px; background:#0b0b0b;}
.loader-logo img{width:100%;height:100%;object-fit:contain;display:block;border-radius:22px;}

.brand-text{text-align:center;min-width:0;overflow:hidden;}
.brand-name{font-size:clamp(16px,4.5vw,21px);max-width:130px;overflow:visible;text-overflow:clip;}
.brand-en{font-size:7px;letter-spacing:1.5px;}

.hero-title{font-size:clamp(30px,8.5vw,58px);line-height:1.15;gap:6px;white-space:normal;flex-wrap:wrap;padding:0 8px;overflow:visible;}
.hero-title>span:first-child{max-width:100%;overflow-wrap:anywhere;}
.hero-en{font-size:8px;letter-spacing:2.5px;}

.verify{width:20px!important;height:20px!important;min-width:20px!important;flex:0 0 20px!important;}

.profile-image img,.about-photo img{object-fit:contain!important;object-position:center!important;background:#080808;}

.project{height:96px!important;min-height:96px!important;}
.project-info{min-width:0;text-align:center!important;}
.project-info strong,.project-info span{width:100%;text-align:center!important;}

/* Force readable white text in dark mode across every content component. */
body:not(.light) .page,
body:not(.light) .page p,
body:not(.light) .page span,
body:not(.light) .page small,
body:not(.light) .page strong,
body:not(.light) .page h1,
body:not(.light) .page h2,
body:not(.light) .page h3,
body:not(.light) .page label,
body:not(.light) .page button,
body:not(.light) .menu-content,
body:not(.light) .menu-content p,
body:not(.light) .menu-content span,
body:not(.light) .menu-content small,
body:not(.light) .menu-content strong{color:#fff;}
body:not(.light) .muted,body:not(.light) .section-desc{color:#fff!important;}

.about-story-card{margin-top:14px;padding:26px 20px;border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));border:1px solid rgba(217,164,65,.30);box-shadow:var(--shadow);text-align:center;}
.about-story-heading .about-story-kicker{display:block;color:var(--gold2)!important;font-family:Inter,sans-serif;font-size:9px;letter-spacing:3px;margin-bottom:8px;}
.about-story-heading h2{margin:0;color:var(--gold2)!important;font-family:"Lalezar",sans-serif;font-size:30px;line-height:1.15;}
.about-story-heading h3{margin:10px 0 18px;color:#fff!important;font-size:15px;line-height:1.8;font-weight:700;}
.about-story-paragraph{margin:0;color:#fff!important;font-size:12px;line-height:2.25;font-weight:400;text-align:center;}
body.light .about-story-heading h3,body.light .about-story-paragraph{color:#222!important;}

@media(max-width:380px){
.brand-name{font-size:15px;max-width:105px;}
.hero-title{font-size:24px;gap:5px;padding:0 4px;}
.verify{width:18px!important;height:18px!important;min-width:18px!important;flex-basis:18px!important;}
.hero-en{font-size:7px;letter-spacing:2px;}
.about-story-card{padding:22px 15px;}
.about-story-heading h2{font-size:27px;}
.about-story-heading h3{font-size:13px;}
.about-story-paragraph{font-size:11px;line-height:2.15;}
}

@media(min-width:381px) and (max-width:560px){
.hero-title{font-size:clamp(27px,7vw,38px);}
}

</style>

<style id="seyed-final-fixes">
/* Bottom navigation: remove browser's default white button border/outline */
.bottom-nav .nav-item,
.bottom-nav .nav-item:focus,
.bottom-nav .nav-item:focus-visible,
.bottom-nav .nav-item:active{
border:0 !important;
outline:0 !important;
-webkit-appearance:none;
appearance:none;
box-shadow:none;
}
.bottom-nav .nav-item:not(.active){
background:transparent !important;
color:#b8b8b8 !important;
}
.bottom-nav .nav-item:not(.active)::before{display:none !important;}
.bottom-nav .nav-item.active{
border:0 !important;
outline:0 !important;
color:var(--gold2) !important;
background:rgba(217,164,65,.10) !important;
}
.bottom-nav .nav-item i,
.bottom-nav .nav-item span{position:relative;z-index:2;}

/* Header logo: show the complete source image, never crop it */
.brand-logo{
overflow:hidden !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
background:#080808 !important;
}
.brand-logo img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center !important;
border-radius:0 !important;
}

/* Loading logo: use the whole image rather than a cropped square */
.loader-logo{
width:min(82vw,330px) !important;
height:auto !important;
min-height:0 !important;
aspect-ratio:auto !important;
padding:10px !important;
border-radius:26px !important;
overflow:hidden !important;
background:#080808 !important;
}
.loader-logo img{
display:block !important;
width:100% !important;
height:auto !important;
max-height:38vh !important;
object-fit:contain !important;
object-position:center !important;
border-radius:16px !important;
}

/* Prevent the top title from overflowing on any phone */
.hero-title{
width:100% !important;
max-width:100% !important;
justify-content:center !important;
align-items:center !important;
overflow:visible !important;
flex-wrap:wrap !important;
word-break:normal !important;
overflow-wrap:anywhere !important;
}
.hero-title > span:first-child{
max-width:calc(100% - 28px) !important;
min-width:0 !important;
overflow-wrap:anywhere !important;
word-break:break-word !important;
}
.verify{
flex:0 0 auto !important;
display:inline-flex !important;
vertical-align:middle !important;
}

/* Restore a real visual app mockup for Seyed AI */
.ai-mockup-frame{
width:min(82%,300px) !important;
margin:20px auto !important;
padding:9px !important;
border-radius:30px !important;
background:linear-gradient(145deg,#292929,#0a0a0a) !important;
border:1px solid rgba(217,164,65,.45) !important;
box-shadow:0 25px 55px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.10) !important;
}
.ai-mockup-screen{
position:relative !important;
min-height:360px !important;
border-radius:23px !important;
overflow:hidden !important;
padding:22px 16px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
background:
radial-gradient(circle at 50% 0%,rgba(217,164,65,.20),transparent 42%),
linear-gradient(180deg,#151515,#080808) !important;
color:#fff !important;
}
.ai-mockup-screen::before{
content:"";
width:48px;
height:5px;
border-radius:20px;
background:#3a3a3a;
margin-bottom:16px;
}
.ai-mockup-screen::after{
content:"Seyed AI • هوش مصنوعی";
position:absolute;
left:14px;
right:14px;
bottom:16px;
padding:10px;
border-radius:14px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
color:#ddd;
font-size:9px;
text-align:center;
}
.ai-mockup-screen i{
width:58px !important;
height:58px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:18px !important;
background:rgba(217,164,65,.12) !important;
border:1px solid rgba(217,164,65,.30) !important;
color:var(--gold2) !important;
font-size:25px !important;
margin-top:4px !important;
}
.ai-mockup-screen strong{
font-family:Inter,sans-serif !important;
font-size:19px !important;
color:#fff !important;
}
.ai-mockup-screen small{
color:#d9d9d9 !important;
font-size:10px !important;
margin-bottom:15px !important;
}

/* Remove accidental literal newline escape if it ever exists as visible text */
body{white-space:normal;}

@media(max-width:380px){
.loader-logo{width:min(88vw,300px) !important;}
.loader-logo img{max-height:32vh !important;}
.ai-mockup-frame{width:min(88%,285px) !important;}
.ai-mockup-screen{min-height:330px !important;}
}
</style>

<body>

<div class="loader-title">
وبسایت رسمی سید بزرگ
</div>

<div class="loader-sub">
دنیای رسمی و شخصی سید بزرگ
</div>

</div>
</div>

<div class="brand-en">
SEYED BOZORG
</div>

</div>

</div>

</header>

<div class="hero-small" data-fa="دنیای شخصی و بیزینسی"
data-en="PERSONAL & BUSINESS WORLD">
دنیای شخصی و بیزینسی
</div>

</h1>

<div class="hero-en">
SEYED BOZORG
</div>

</section>

</div>

</div>

</section>

<div>
<h2 class="section-title">
<span data-fa="دنیای">دنیای</span>
<span data-fa="سید ابوالفضل میرمعینی"
data-en="SEYED WORLD">
ابوالفضل میرمعینی
</span>
</h2>

</div>

<h3>Seyed AI</h3>

<p data-fa="هوش مصنوعی و ابزارهای هوشمند"
data-en="AI and smart tools">
هوش مصنوعی و ابزارهای هوشمند
</p>

</button>

<h3 data-fa="پروژه‌های من"
data-en="My Projects">
پروژه‌های من
</h3>

<p data-fa="پروژه‌ها و محصولات دیجیتال"
data-en="Digital projects and products">
پروژه‌ها و محصولات دیجیتال
</p>

</button>

<h3 data-fa="دوره‌های آموزشی"
data-en="Courses">
دوره‌های آموزشی
</h3>

<p data-fa="آموزش، تجربه و مهارت"
data-en="Learning, experience and skills">
آموزش، تجربه و مهارت
</p>

</button>

<h3 data-fa="اشتراک‌ها"
data-en="Subscriptions">
اشتراک‌ها
</h3>

<p data-fa="پلن‌های واقعی به تومان"
data-en="Real plans in toman">
پلن‌های واقعی به تومان
</p>

</button>

</div>

</section>

<div>

<h2 class="section-title"
data-fa="ویترین دیجیتال"
data-en="Digital Showcase">
ویترین دیجیتال
</h2>

<div class="section-desc"
data-fa="بخشی کوچک از دنیای من"
data-en="A small part of my world">
بخشی کوچک از دنیای من
</div>

</div>

<h3>Seyed AI</h3>

<p data-fa="ابزارهای هوشمند برای آینده دیجیتال."
data-en="Smart tools for the digital future.">
ابزارهای هوشمند برای آینده دیجیتال.
</p>

</div>

<h3 data-fa="محصولات دیجیتال"
data-en="Digital Products">
محصولات دیجیتال
</h3>

<p data-fa="پروژه‌هایی که با ایده شروع می‌شوند."
data-en="Projects that start with an idea.">
پروژه‌هایی که با ایده شروع می‌شوند.
</p>

</div>

<h3 data-fa="آینده"
data-en="Future">
آینده
</h3>

<p data-fa="ساخت، رشد و تبدیل ایده به محصول."
data-en="Build, grow and turn ideas into products.">
ساخت، رشد و تبدیل ایده به محصول.
</p>

</div>

</section>

<div>

<h2 class="section-title"
data-fa="شبکه‌های اجتماعی"
data-en="Social Media">
شبکه‌های اجتماعی
</h2>

</div>

<i class="fa-brands fa-instagram"></i>
<span data-fa="اینستاگرام" data-en="Instagram">اینستاگرام</span>

</a>

<i class="fa-brands fa-youtube"></i>
<span data-fa="یوتیوب" data-en="YouTube">یوتیوب</span>

</a>

</a>

<i class="fa-brands fa-telegram"></i>
<span data-fa="تلگرام" data-en="Telegram">تلگرام</span>

</a>

</div>

</section>

</div>

</main>

<div class="eyebrow">SEYED AI</div>

<h1 data-fa="هوش مصنوعی"
data-en="Artificial Intelligence">
هوش مصنوعی
</h1>

<p data-fa="ابزارها و سرویس‌های هوشمند دنیای سید بزرگ."
data-en="Smart tools and services from Seyed Bozorg.">
ابزارها و سرویس‌های هوشمند دنیای سید بزرگ.
</p>

</div>

<h3>Seyed AI</h3>

<p data-fa="نمایش موکاپ برنامه Seyed AI و دریافت مستقیم نسخه برنامه."
data-en="Preview the Seyed AI app mockup and download the app directly.">
نمایش موکاپ برنامه Seyed AI و دریافت مستقیم نسخه برنامه.
</p>

<div class="ai-mockup-frame">
<div class="ai-mockup-screen">
<i class="fa-solid fa-robot"></i>
<strong>Seyed AI</strong>
<small data-fa="موکاپ برنامه" data-en="APP MOCKUP">موکاپ برنامه</small>
</div>
</div>

<button class="gold-button" onclick="downloadSeyedAI()">
<i class="fa-solid fa-download"></i>
<span data-fa="دانلود مستقیم Seyed AI" data-en="Direct Seyed AI Download">
دانلود مستقیم Seyed AI
</span>
</button>

<div class="download-note"
data-fa="لینک دانلود را از بخش CONFIG قرار دهید."
data-en="Set your download link in CONFIG.">
لینک دانلود را از بخش CONFIG قرار دهید.
</div>

</div>

<h3 data-fa="ابزارهای AI"
data-en="AI Tools">
ابزارهای AI
</h3>

<p data-fa="ابزارهای کاربردی"
data-en="Useful tools">
ابزارهای کاربردی
</p>

</button>

<p data-fa="اتصال سرویس"
data-en="Service connection">
اتصال سرویس
</p>

</button>

</div>

</section>

<h1 data-fa="پروژه‌های من"
data-en="My Projects">
پروژه‌های من
</h1>

<p data-fa="محصولات، پروژه‌ها و ایده‌هایی که در مسیر ساخت قرار دارند."
data-en="Products, projects and ideas currently being built.">
محصولات، پروژه‌ها و ایده‌هایی که در مسیر ساخت قرار دارند.
</p>

</div>

</div>

</section>

<div class="eyebrow">LEARNING</div>

<h1 data-fa="دوره‌های آموزشی"
data-en="Courses">
دوره‌های آموزشی
</h1>

<p data-fa="آموزش‌های کاربردی و پروژه‌محور."
data-en="Practical and project-based learning.">
آموزش‌های کاربردی و پروژه‌محور.
</p>

</div>

<h3 data-fa="آموزش ساخت محصول دیجیتال"
data-en="Building Digital Products">
آموزش ساخت محصول دیجیتال
</h3>

<p data-fa="مسیر ایده تا ساخت یک محصول واقعی." data-en="From idea to building a real product.">مسیر ایده تا ساخت یک محصول واقعی.</p>
<div class="course-meta"><span>۸ ساعت آموزش</span><span>تولید: ۱۲ ساعت</span></div>
<div class="course-price">۲٬۴۹۰٬۰۰۰ تومان</div>

<span data-fa="مشاهده دوره"
data-en="View Course">
مشاهده دوره
</span>

</button>

</div>

<h3 data-fa="ساخت اپلیکیشن موبایل"
data-en="Mobile App Development">
ساخت اپلیکیشن موبایل
</h3>

<p data-fa="آشنایی با مسیر طراحی تا انتشار." data-en="From design to publishing.">آشنایی با مسیر طراحی تا انتشار.</p>
<div class="course-meta"><span>۶ ساعت آموزش</span><span>تولید: ۹ ساعت</span></div>
<div class="course-price">۱٬۹۹۰٬۰۰۰ تومان</div>

</div>

<div class="big-card">
<div class="feature-icon"><i class="fa-solid fa-code"></i></div>
<h3 data-fa="برنامه‌نویسی و ساخت وب‌سایت" data-en="Programming & Web Development">برنامه‌نویسی و ساخت وب‌سایت</h3>
<p data-fa="از طراحی رابط تا ساخت یک وب‌سایت حرفه‌ای و واکنش‌گرا." data-en="From UI design to building a professional responsive website.">از طراحی رابط تا ساخت یک وب‌سایت حرفه‌ای و واکنش‌گرا.</p>
<div class="course-meta"><span>۱۰ ساعت آموزش</span><span>تولید: ۱۶ ساعت</span></div>
<div class="course-price">۳٬۴۹۰٬۰۰۰ تومان</div>
</div>
<div class="big-card">
<div class="feature-icon"><i class="fa-solid fa-robot"></i></div>
<h3 data-fa="ساخت ابزارهای هوش مصنوعی" data-en="Building AI Tools">ساخت ابزارهای هوش مصنوعی</h3>
<p data-fa="مسیر ساخت ابزارهای هوشمند و اتصال آن‌ها به پروژه‌های واقعی." data-en="Build smart tools and connect them to real projects.">مسیر ساخت ابزارهای هوشمند و اتصال آن‌ها به پروژه‌های واقعی.</p>
<div class="course-meta"><span>۱۲ ساعت آموزش</span><span>تولید: ۲۰ ساعت</span></div>
<div class="course-price">۴٬۹۹۰٬۰۰۰ تومان</div>
</div>

</div>

</section>

<div class="eyebrow">PREMIUM</div>

<h1 data-fa="اشتراک‌ها"
data-en="Subscriptions">
اشتراک‌ها
</h1>

<p data-fa="پلن‌های قابل استفاده برای امکانات مختلف."
data-en="Plans for different levels of access.">
پلن‌های قابل استفاده برای امکانات مختلف.
</p>

</div>

<div class="price">
۷۹۹٬۰۰۰
<small data-fa="تومان / ماه"
data-en="Toman / month">
تومان / ماه
</small>
</div>

<ul>

<li>
<i class="fa-solid fa-check"></i>
دسترسی پایه
</li>

<li>
<i class="fa-solid fa-check"></i>
ابزارهای منتخب
</li>

<li>
<i class="fa-solid fa-check"></i>
پشتیبانی
</li>

</ul>

انتخاب پلن

</button>

</div>

<div class="plan-badge">
محبوب‌ترین
</div>

<div class="price">
۱٬۹۹۰٬۰۰۰
<small>تومان / ماه</small>
</div>

<ul>

<li>
<i class="fa-solid fa-check"></i>
امکانات حرفه‌ای
</li>

<li>
<i class="fa-solid fa-check"></i>
دسترسی بیشتر به Seyed AI
</li>

<li>
<i class="fa-solid fa-check"></i>
اولویت پشتیبانی
</li>

<li>
<i class="fa-solid fa-check"></i>
امکانات اختصاصی
</li>

</ul>

انتخاب پلن

</button>

</div>

<h3 data-fa="الماس"
data-en="Diamond">
الماس
</h3>

<div class="price">
۳٬۹۹۰٬۰۰۰
<small>تومان / ماه</small>
</div>

<ul>

<li>
<i class="fa-solid fa-check"></i>
تمام امکانات
</li>

<li>
<i class="fa-solid fa-check"></i>
دسترسی کامل AI
</li>

<li>
<i class="fa-solid fa-check"></i>
امکانات VIP
</li>

<li>
<i class="fa-solid fa-check"></i>
پشتیبانی ویژه
</li>

</ul>

انتخاب پلن

</button>

</div>

</section>

<div class="eyebrow">ABOUT ME</div>

<h1 data-fa="درباره من"
data-en="About Me">
درباره من
</h1>

</div>

</div>

<h3>
سید ابوالفضل میرمعینی

</h3>

<p data-fa="اینجا فضای معرفی شخصی، مسیر کاری، اهداف، پروژه‌ها و داستان برند شخصی شما قرار می‌گیرد."
data-en="Your personal story, career path, goals, projects and personal brand story can be presented here.">
اینجا فضای معرفی شخصی، مسیر کاری، اهداف، پروژه‌ها و داستان برند شخصی شما قرار می‌گیرد.
</p>

</div>

<div class="about-story-heading">
<span class="about-story-kicker">SEYED BOZORG</span>
<h2 data-fa="داستان من" data-en="My Story">داستان من</h2>
<h3 data-fa="ساختن، یاد گرفتن و تبدیل ایده‌ها به تجربه‌های واقعی" data-en="Building, learning and turning ideas into real experiences">
ساختن، یاد گرفتن و تبدیل ایده‌ها به تجربه‌های واقعی
</h3>
</div>

<p class="about-story-paragraph"
data-fa="من سید ابوالفضل میرمعینی هستم؛ فردی علاقه‌مند به دنیای فناوری، هوش مصنوعی، طراحی و ساخت پروژه‌های دیجیتال. این وبسایت فضای شخصی من برای معرفی مسیر، ایده‌ها، پروژه‌ها و محصولاتی است که روی آن‌ها کار می‌کنم. از ساخت تجربه‌های دیجیتال و ابزارهای هوشمند گرفته تا پروژه‌های بازی، لانچر و برند شخصی، تلاش می‌کنم ایده‌ها را مرحله‌به‌مرحله به چیزهایی قابل استفاده و واقعی تبدیل کنم. برای من یادگیری فقط مطالعه نیست؛ ساختن، آزمون کردن، اصلاح کردن و ادامه دادن بخش مهمی از این مسیر است. اینجا قرار است با رشد پروژه‌ها، بخش‌های جدید هم به مرور فعال شوند و داستان این مسیر را با شما به اشتراک بگذارم."
data-en="I am Seyed Abolfazl Mirmaeini, passionate about technology, artificial intelligence, design and building digital projects. This website is my personal space for sharing my journey, ideas, projects and products. From digital experiences and smart tools to game projects, launchers and personal branding, I try to turn ideas into real and useful experiences step by step. For me, learning is not only about studying; building, testing, improving and continuing are all part of the journey. As the projects grow, new sections will be activated here and this journey will continue to take shape.">
من سید ابوالفضل میرمعینی هستم؛ فردی علاقه‌مند به دنیای فناوری، هوش مصنوعی، طراحی و ساخت پروژه‌های دیجیتال. این وبسایت فضای شخصی من برای معرفی مسیر، ایده‌ها، پروژه‌ها و محصولاتی است که روی آن‌ها کار می‌کنم. از ساخت تجربه‌های دیجیتال و ابزارهای هوشمند گرفته تا پروژه‌های بازی، لانچر و برند شخصی، تلاش می‌کنم ایده‌ها را مرحله‌به‌مرحله به چیزهایی قابل استفاده و واقعی تبدیل کنم. برای من یادگیری فقط مطالعه نیست؛ ساختن، آزمون کردن، اصلاح کردن و ادامه دادن بخش مهمی از این مسیر است. اینجا قرار است با رشد پروژه‌ها، بخش‌های جدید هم به مرور فعال شوند و داستان این مسیر را با شما به اشتراک بگذارم.
</p>

</div>

</section>

<div class="eyebrow">CONNECT</div>

<h1 data-fa="شبکه‌های اجتماعی"
data-en="Social Media">
شبکه‌های اجتماعی
</h1>

</div>

<a class="social"
href="#"
onclick="socialLink(event,'instagram')">
<i class="fa-brands fa-instagram"></i>
<span data-fa="اینستاگرام" data-en="Instagram">اینستاگرام</span>
</a>

<a class="social"
href="#"
onclick="socialLink(event,'youtube')">
<i class="fa-brands fa-youtube"></i>
<span data-fa="یوتیوب" data-en="YouTube">یوتیوب</span>
</a>

<a class="social"
href="#"
onclick="socialLink(event,'telegram')">
<i class="fa-brands fa-telegram"></i>
<span data-fa="تلگرام" data-en="Telegram">تلگرام</span>
</a>

<a class="social"
href="#"
onclick="socialLink(event,'linkedin')">
<i class="fa-brands fa-linkedin-in"></i>
<span data-fa="لینکدین" data-en="LinkedIn">لینکدین</span>
</a>

<a class="social"
href="#"
onclick="socialLink(event,'rubika')">
<i class="fa-solid fa-comments"></i>
<span>Rubika</span>
</a>

</div>

</section>

<div class="eyebrow">CONTROL CENTER</div>

<h1 data-fa="تنظیمات"
data-en="Settings">
تنظیمات
</h1>

<p data-fa="شخصی‌سازی تجربه شما"
data-en="Customize your experience">
شخصی‌سازی تجربه شما
</p>

</div>

<small data-fa="تغییر ظاهر سایت"
data-en="Change website appearance">
تغییر ظاهر سایت
</small>

</div>

</div>

<small id="languageText">
فارسی
</small>

</div>

</div>

<strong data-fa="اعلان‌ها"
data-en="Notifications">
اعلان‌ها
</strong>

<small data-fa="وضعیت اعلان‌ها"
data-en="Notification status">
وضعیت اعلان‌ها
</small>

</div>

</div>

</section>

</button>

<span data-fa="Seyed AI"
data-en="Seyed AI">
Seyed AI
</span>

</button>

<span data-fa="پروژه‌ها"
data-en="Projects">
پروژه‌ها
</span>

</button>

<span data-fa="درباره"
data-en="About">
درباره
</span>

</button>

<span data-fa="تنظیمات"
data-en="Settings">
تنظیمات
</span>

</button>

</nav>

</div>

<div class="menu-brand">
سید ابوالفضل میرمعینی
</div>

</button>

</div>

</button>

<div class="menu-text">
<strong>Seyed AI</strong>

<small data-fa="هوش مصنوعی و ابزارها"
data-en="AI & smart tools">
هوش مصنوعی و ابزارها
</small>
</div>

</button>

<div class="menu-text">
<strong data-fa="پروژه‌های من"
data-en="My Projects">
پروژه‌های من
</strong>

<small data-fa="محصولات و پروژه‌ها"
data-en="Products & projects">
محصولات و پروژه‌ها
</small>
</div>

</button>

<div class="menu-text">
<strong data-fa="دوره‌های آموزشی"
data-en="Courses">
دوره‌های آموزشی
</strong>

<small data-fa="آموزش‌های کاربردی"
data-en="Practical learning">
آموزش‌های کاربردی
</small>
</div>

</button>

<div class="menu-text">
<strong data-fa="اشتراک‌ها"
data-en="Subscriptions">
اشتراک‌ها
</strong>

</button>

<div class="menu-text">
<strong data-fa="درباره من"
data-en="About Me">
درباره من
</strong>

<small data-fa="معرفی شخصی"
data-en="Personal profile">
معرفی شخصی
</small>
</div>

</button>

<div class="menu-text">
<strong data-fa="شبکه‌های اجتماعی"
data-en="Social Media">
شبکه‌های اجتماعی
</strong>

<small data-fa="ارتباط با من"
data-en="Connect with me">
ارتباط با من
</small>
</div>

</button>

<div class="menu-text">
<strong data-fa="تنظیمات"
data-en="Settings">
تنظیمات
</strong>

</button>

</div>

<div class="modal-title"
id="modalTitle">
افزودن لینک
</div>

<div class="modal-desc"
id="modalDesc">
لینک یا کد مربوط به این بخش را وارد کنید.
</div>

بستن

</button>

ذخیره

</button>

</div>

const CONFIG = {

images:{
logo:"https://uploadkon.ir/uploads/71f629_26IMG-20260830-002648.jpg",
profile:"https://uploadkon.ir/uploads/7dee29_261788036818195.jpg",
about:"https://uploadkon.ir/uploads/2c5629_261788036952782.jpg"
},

links:{
seyedAI:"",
seyedAIDownload:"",
course:"",
api:"",
instagram:"https://www.instagram.com/seyedbozorge?igsi=eHhhY2NyeDY5eGMy",
youtube:"",
github:"",
telegram:"https://t.me/seyedbozorge",
linkedin:"",
x:"",
rubika:"",
bale:""
}

};

/* =========================================================
STATE
========================================================= */

let currentLang =
localStorage.getItem("seyed_lang") || "fa";

let currentTheme =
localStorage.getItem("seyed_theme") || "dark";

let currentModalItem = "";

/* =========================================================
DOM
========================================================= */

const loader =
document.getElementById("loader");

const menuOverlay =
document.getElementById("menuOverlay");

const modal =
document.getElementById("modal");

const toast =
document.getElementById("toast");

/* =========================================================
LOADING
هیچ Promise یا Event خارجی باعث گیر کردن نمی‌شود
========================================================= */

function finishLoading(){

setTimeout(()=>{

loader.classList.add("hide");

setTimeout(()=>{

loader.style.display = "none";

},900);

},3000);
}

if(document.readyState === "loading"){

document.addEventListener(
"DOMContentLoaded",
finishLoading
);

}else{

finishLoading();

}

/* تضمین خروج اضطراری از لودینگ */
setTimeout(()=>{

loader.classList.add("hide");

},6500);

/* =========================================================
THEME
========================================================= */

function applyTheme(){

document.body.classList.toggle(
"light",
currentTheme === "light"
);

const icon =
document.querySelector("#themeBtn i");

if(icon){

icon.className =
currentTheme === "light"
? "fa-solid fa-sun"
: "fa-solid fa-moon";

}

const sw =
document.getElementById("themeSwitch");

if(sw){

sw.classList.toggle(
"on",
currentTheme === "light"
);

}

localStorage.setItem(
"seyed_theme",
currentTheme
);
}

function toggleTheme(){

currentTheme =
currentTheme === "dark"
? "light"
: "dark";

applyTheme();

showToast(
currentLang === "fa"
? currentTheme === "light"
? "حالت روز فعال شد"
: "حالت شب فعال شد"
: currentTheme === "light"
? "Light mode enabled"
: "Dark mode enabled"
);
}

document
.getElementById("themeBtn")
.addEventListener(
"click",
toggleTheme
);

/* =========================================================
LANGUAGE
========================================================= */

function translatePage(){

document.querySelectorAll("[data-fa]").forEach(el=>{

const text =
currentLang === "fa"
? el.getAttribute("data-fa")
: el.getAttribute("data-en");

if(text !== null){

el.textContent = text;

}

});

document.documentElement.lang =
currentLang === "fa"
? "fa"
: "en";

document.documentElement.dir =
currentLang === "fa"
? "rtl"
: "ltr";

const langBtn =
document.getElementById("langBtn");

if(langBtn){

langBtn.textContent =
currentLang === "fa"
? "EN"
: "FA";

}

const languageValue =
document.getElementById("languageValue");

const languageText =
document.getElementById("languageText");

if(languageValue)
languageValue.textContent =
currentLang === "fa"
? "FA"
: "EN";

if(languageText)
languageText.textContent =
currentLang === "fa"
? "فارسی"
: "English";

localStorage.setItem(
"seyed_lang",
currentLang
);
}

function toggleLanguage(){

currentLang =
currentLang === "fa"
? "en"
: "fa";

translatePage();

showToast(
currentLang === "fa"
? "زبان فارسی فعال شد"
: "English language enabled"
);
}

document
.getElementById("langBtn")
.addEventListener(
"click",
toggleLanguage
);

/* =========================================================
MENU
========================================================= */

function openMenu(){

menuOverlay.classList.add("open");

document.body.style.overflow = "hidden";

}

function closeMenu(){

menuOverlay.classList.remove("open");

document.body.style.overflow = "";

}

document
.getElementById("menuBtn")
.addEventListener(
"click",
openMenu
);

function menuGo(view){

closeMenu();

setTimeout(()=>{

openView(view);

},120);

}

/* =========================================================
VIEWS
========================================================= */

function openView(view){

const views =
document.querySelectorAll(".view");

views.forEach(v=>{
v.classList.remove("active");
});

const target =
document.getElementById(
view + "View"
);

if(target){

target.classList.add("active");

}

document
.querySelectorAll(".nav-item")
.forEach(item=>{

item.classList.toggle(
"active",
item.dataset.view === view
);

});

window.scrollTo({
top:0,
behavior:"smooth"
});

setTimeout(initReveal,80);

}

/* =========================================================
PROJECTS
========================================================= */

const projects = [

{
icon:"fa-gamepad",
titleFa:"Seyed RolePlay",
titleEn:"Seyed RolePlay",
descFa:"پروژه گیم و رول‌پلی",
descEn:"Gaming & roleplay project"
},

{
icon:"fa-mobile-screen-button",
titleFa:"Seyed AI Launcher",
titleEn:"Seyed AI Launcher",
descFa:"لانچر و تجربه موبایلی",
descEn:"Mobile launcher experience"
},

{
icon:"fa-car",
titleFa:"Seyed Auto",
titleEn:"Seyed Auto",
descFa:"پروژه بازی و خودرو",
descEn:"Game & automotive project"
},

{
icon:"fa-globe",
titleFa:"وبسایت شخصی",
titleEn:"Personal Website",
descFa:"پلتفرم شخصی و بیزینسی",
descEn:"Personal business platform"
}

];

function renderProjects(){

const list =
document.getElementById(
"projectList"
);

list.innerHTML = "";

projects.forEach((p,index)=>{

const title =
currentLang === "fa"
? p.titleFa
: p.titleEn;

const desc =
currentLang === "fa"
? p.descFa
: p.descEn;

list.innerHTML += `

<strong>${title}</strong>

</div>

</div>

</button>

});

}

/* =========================================================
USER-FRIENDLY LINK HANDLING
========================================================= */

function showComingSoon(item){
showToast(
currentLang === "fa"
? `این قسمت «${item}» در آپدیت بعدی که به‌زودی منتشر می‌شود فعال خواهد شد.`
: `${item} will be available in the next update, coming soon.`
);
}

function openLinkModal(item){

currentModalItem = item;

const configured =
(item === "Seyed AI" && CONFIG.links.seyedAI) ||
(item === "Course" && CONFIG.links.course) ||
(item === "API" && CONFIG.links.api) ||
localStorage.getItem("seyed_link_" + item);

if(configured){
window.open(configured, "_blank", "noopener,noreferrer");
return;
}

showComingSoon(item);
}

function closeModal(){

modal.classList.remove("open");

document.body.style.overflow = "";

}

function closeModalOutside(e){

if(e.target === modal){

closeModal();

}

function saveCustomLink(){

const link =
document.getElementById(
"linkInput"
).value.trim();

const code =
document.getElementById(
"codeInput"
).value.trim();

if(!link && !code){

showToast(
currentLang === "fa"
? "ابتدا لینک یا کد را وارد کنید"
: "Enter a link or code first"
);

return;
}

if(link){

localStorage.setItem(
"seyed_link_" + currentModalItem,
link
);

}

if(code){

localStorage.setItem(
"seyed_code_" + currentModalItem,
code
);

}

showToast(
currentLang === "fa"
? "با موفقیت ذخیره شد"
: "Saved successfully"
);

closeModal();

}

/* =========================================================
PLAN
========================================================= */

function selectPlan(name,price){

showToast(
currentLang === "fa"
? `پلن ${name} با مبلغ ${price} تومان انتخاب شد`
: `${name} plan selected — ${price} toman`
);

setTimeout(()=>{

openLinkModal(
currentLang === "fa"
? `خرید ${name}`
: `${name} Purchase`
);

},500);

}

/* =========================================================
SOCIAL LINKS
========================================================= */

function socialLink(event,type){

event.preventDefault();

const link =
CONFIG.links[type];

if(link){

window.open(
link,
"_blank",
"noopener,noreferrer"
);

return;

}

const names = {

instagram:"اینستاگرام",
youtube:"یوتیوب",
github:"گیت‌هاب",
telegram:"تلگرام",
linkedin:"LinkedIn",
x:"X",
rubika:"Rubika",
bale:"Bale"

};

showComingSoon(
names[type] || type
);

}

/* =========================================================
TOAST
========================================================= */

let toastTimer;

function showToast(message){

clearTimeout(toastTimer);

toast.textContent = message;

toast.classList.add("show");

toastTimer =
setTimeout(()=>{

toast.classList.remove("show");

},2600);

}

/* =========================================================
REVEAL
========================================================= */

function initReveal(){

const elements =
document.querySelectorAll(
".view.active .reveal"
);

elements.forEach((el,i)=>{

setTimeout(()=>{

el.classList.add("show");

},i*70);

});

}

/* =========================================================
IMAGE CONFIG
========================================================= */

function loadConfiguredImages(){

if(CONFIG.images.logo){

const logo =
document.querySelector(
".brand-logo"
);

logo.innerHTML =
`<img src="${CONFIG.images.logo}"
alt="Seyed Bozorg">`;

}

if(CONFIG.images.profile){

document
.querySelectorAll(
".profile-image"
)
.forEach(box=>{

box.innerHTML =
`<img src="${CONFIG.images.profile}"
alt="Seyed Bozorg">`;

});

}

if(CONFIG.images.about){

const box =
document.querySelector(
".about-photo"
);

box.innerHTML = `

}

/* =========================================================
INITIALIZATION
========================================================= */

applyTheme();

translatePage();

renderProjects();

loadConfiguredImages();

setTimeout(initReveal,300);

/* =========================================================
HARD MOBILE OVERFLOW PROTECTION
========================================================= */

function preventHorizontalOverflow(){

document.documentElement.style.overflowX =
"hidden";

document.body.style.overflowX =
"hidden";

}

preventHorizontalOverflow();

/* =========================================================
ESCAPE
========================================================= */

document.addEventListener(
"keydown",
e=>{

if(e.key === "Escape"){

closeMenu();
closeModal();

}

}
);

/* =========================================================
BACK BUTTON SUPPORT
========================================================= */

window.addEventListener(
"popstate",
()=>{

openView("home");

}
);

/* =========================================================
TOUCH FEEDBACK
========================================================= */

document.addEventListener(
"touchstart",
e=>{

const target =
e.target.closest(
"button,.social,.feature,.project,.menu-link"
);

if(target){

target.style.setProperty(
"--touch-scale",
".97"
);

}

},
{passive:true}
);

</script>

</body>
</html>

صفحه 1 از 1

سید ابوالفضل میرمعینی

وبسایت رسمی سید بزرگ

ابوالفضل میرمعینی‬‎

نویسنده

مقاله

1405/06/08

تاریخ ایجاد

صفحه رسمی سید بزرگ

سید ابوالفضل میرمعینی

لینک های مفید

خرید پوشاک از ترکیه

خرید خانه در ترکیه

اخذ اقامت ترکیه

آموزش برنامه نویسی

پیش بینی مسابقات فوتبال

کسب درآمد اینترنتی