:root {
/* پالت اصلی */
--primary: #0F4D3A; /* سبز عمیق */
--primary-dark: #0a3528;
--primary-light: #1a6b51;
--accent: #C8A45C; /* طلایی فاخر */
--accent-light: #d9b97a;
--accent-dark: #a8843f;
--bg: #F4ECE0; /* کرم گرم */
--bg-alt: #EDE3D4;
--bg-card: #FAF3E7;
--text: #2A2A2A;
--text-soft: #5C5048;
--border-soft: #D4C8B5;
--border-softer: #E5D9C5;
/* رنگ محورها */
--civ: #C8A45C; /* تمدن — طلایی */
--imamat: #0F4D3A; /* امامت — سبز عمیق */
--mosque: #2A6B7C; /* مسجد — فیروزهای */
--tabyin: #7B4423; /* جهاد تبیین — اخرایی */
/* تایپوگرافی */
--font-display: 'Sahel', 'Vazirmatn', system-ui, sans-serif;
--font-body: 'Estedad', 'Vazirmatn', system-ui, sans-serif;
--font-accent: 'Vazirmatn', serif;
/* فاصله */
--container: 1240px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--bg) url('bg-pattern.png') top center / cover fixed;
color: var(--text);
font-size: 17px;
line-height: 1.7;
direction: rtl;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
.fa-num { font-feature-settings: "ss01"; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
}
.ornate-border {
position: relative;
border: 1px solid var(--accent);
}
.ornate-border::before,
.ornate-border::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border: 1px solid var(--accent);
}
.ornate-border::before { top: -1px; right: -1px; border-bottom: none; border-left: none; }
.ornate-border::after { bottom: -1px; left: -1px; border-top: none; border-right: none; }
.divider-diamond {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 24px 0;
}
.divider-diamond::before,
.divider-diamond::after {
content: '';
height: 1px;
width: 60px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.divider-diamond span {
color: var(--accent);
font-size: 14px;
transform: rotate(45deg);
display: inline-block;
letter-spacing: 0;
}
.geo-pattern {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.05;
background-image:
radial-gradient(circle at 25% 25%, var(--primary) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, var(--accent) 0%, transparent 50%);
background-size: 80px 80px;
}
.header {
position: fixed;
top: 0; right: 0; left: 0;
z-index: 100;
background:
linear-gradient(rgba(244,236,224,0.65), rgba(244,236,224,0.65)),
url('../img/bg-header-search.png') top center / cover no-repeat,
var(--bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
height: 110px;
transition: box-shadow 0.3s ease, background 0.3s ease;
border-bottom: 1px solid rgba(200, 164, 92, 0.3);
}
.header.scrolled {
box-shadow: 0 2px 12px rgba(15, 77, 58, 0.06);
border-bottom-color: rgba(200, 164, 92, 0.2);
}
.header-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.header-logo img {
height: 90px;
width: auto;
transition: transform 0.3s ease;
}
.header-logo:hover img { transform: scale(1.04); }
.nav-main {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
}
.nav-main a {
font-size: 16px;
font-weight: 500;
color: var(--primary);
padding: 8px 4px;
position: relative;
transition: color 0.25s ease;
}
.nav-main a::after {
content: '';
position: absolute;
bottom: 0; right: 0;
height: 2px;
width: 0;
background: var(--accent);
transition: width 0.3s ease;
}
.nav-main a:hover { color: var(--accent-dark); }
.nav-main a:hover::after { width: 100%; }
.nav-dropdown { position: relative; }
.nav-dropdown > a::before { content: '▾'; margin-left: 6px; font-size: 10px; }
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-top: 3px solid var(--accent);
border-radius: 8px;
box-shadow: 0 12px 40px rgba(15, 77, 58, 0.12);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li { list-style: none; }
.dropdown-menu a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
font-size: 15px;
border-radius: 6px;
transition: background 0.2s ease;
}
.dropdown-menu a::after { display: none; }
.dropdown-menu a:hover { background: var(--bg-alt); }
.axis-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.search-btn {
width: 42px; height: 42px;
border-radius: 50%;
border: 1px solid var(--border-soft);
display: grid;
place-items: center;
color: var(--primary);
transition: all 0.25s ease;
}
.search-btn:hover {
background: var(--accent);
color: var(--primary);
border-color: var(--accent);
}
.search-btn svg { width: 18px; height: 18px; }
.site-search{ position:relative; }
.search-box{ display:flex; align-items:center; gap:10px; width:clamp(300px,30vw,470px); height:52px; padding:0 20px;
background:#FFFDF8; border:1.5px solid #E3D6BF; border-radius:30px; transition:border-color .2s, box-shadow .2s; }
.search-box:focus-within{ border-color:var(--primary); box-shadow:0 8px 24px -12px rgba(15,77,58,.3); }
.search-ic{ width:20px; height:20px; color:var(--primary); opacity:.7; flex:none; }
.search-input{ flex:1; min-width:0; border:none; background:none; outline:none; font-family:inherit; font-size:15px; color:#2A2A2A; text-align:right; }
.search-input::placeholder{ color:#A79B85; }
.search-panel{ position:absolute; top:62px; inset-inline:0; background:#FDFAF3; border:1px solid #E8DCC6; border-radius:18px;
box-shadow:0 26px 60px -18px rgba(15,77,58,.3); padding:16px; opacity:0; visibility:hidden; transform:translateY(-8px);
transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:300; max-height:72vh; overflow-y:auto; }
.site-search.open .search-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.sp-label{ font-family:var(--font-display); font-weight:800; font-size:12px; color:#B08D4B; margin:2px 4px 10px; letter-spacing:.02em; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--primary); background:#F4ECDE;
border:1px solid #E3D6BF; border-radius:999px; padding:7px 15px; transition:all .18s; }
.chip:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }
.sp-group{ margin-top:14px; }
.sp-group:first-child{ margin-top:2px; }
.sp-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:12px; text-decoration:none; color:#2A2A2A; font-size:14.5px; transition:background .15s; }
.sp-item:hover{ background:#F1E9D9; }
.sp-item .dot{ width:6px; height:6px; border-radius:50%; background:#C8A45C; flex:none; }
.sp-item mark{ background:rgba(200,164,92,.4); color:inherit; border-radius:3px; padding:0 1px; }
.search-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:12px; border-top:1px solid #EBE0CC; }
.see-all{ font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--primary); text-decoration:none; }
.see-all:hover{ text-decoration:underline; }
.browse-all{ font-family:var(--font-display); font-weight:700; font-size:13px; color:#B08D4B; text-decoration:none; }
.browse-all:hover{ color:var(--primary); }
.sp-empty{ text-align:center; color:#A79B85; font-size:14px; padding:22px 10px; }
.mobile-toggle { display: none; }
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 150px 24px 60px;
overflow: hidden;
background-image: url('../img/hero-main.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
padding: 60px 32px;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
letter-spacing: 0.2em;
color: var(--accent-light);
margin-bottom: 32px;
text-transform: uppercase;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.6);
opacity: 0;
animation: fadeUp 0.8s ease 0.2s forwards;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
content: '';
width: 32px;
height: 1px;
background: var(--accent);
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(40px, 7vw, 78px);
font-weight: 900;
color: #F4ECE0;
line-height: 1.15;
letter-spacing: -0.01em;
text-shadow:
0 0 4px rgba(0, 0, 0, 0.6),
0 2px 12px rgba(0, 0, 0, 0.85),
0 4px 32px rgba(0, 0, 0, 0.7),
0 0 80px rgba(15, 77, 58, 0.5);
opacity: 0;
animation: fadeUp 1s ease 0.4s forwards;
}
.hero-title .dot { color: var(--accent); margin: 0 0.3em; display: inline-block; }
.hero-title .title-sep {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 18px auto;
font-size: 22px;
line-height: 1;
}
.hero-title .sep-line {
height: 1px;
width: clamp(60px, 14vw, 140px);
background: linear-gradient(90deg, transparent, var(--accent), transparent);
display: inline-block;
}
.hero-title .sep-diamond {
color: var(--accent);
font-size: 18px;
transform: rotate(45deg);
display: inline-block;
text-shadow: 0 0 12px rgba(200, 164, 92, 0.5);
}
.hero-subtitle {
font-size: clamp(16px, 2vw, 22px);
font-weight: 300;
color: rgba(244, 236, 224, 0.98);
margin-top: 28px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.85),
0 4px 20px rgba(0, 0, 0, 0.6);
opacity: 0;
animation: fadeUp 1s ease 0.7s forwards;
}
.hero-actions {
margin-top: 48px;
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 1s ease 1s forwards;
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
border-radius: 8px;
font-weight: 600;
font-size: 16px;
transition: all 0.3s ease;
cursor: pointer;
font-family: inherit;
}
.btn-primary {
background: var(--accent);
color: var(--primary);
box-shadow: 0 4px 16px rgba(200, 164, 92, 0.3);
}
.btn-primary:hover {
background: var(--accent-light);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(200, 164, 92, 0.45);
}
.btn-ghost {
background: transparent;
color: #F4ECE0;
border: 1px solid rgba(244, 236, 224, 0.4);
}
.btn-ghost:hover {
background: rgba(244, 236, 224, 0.15);
border-color: rgba(244, 236, 224, 0.7);
}
.scroll-indicator {
position: absolute;
bottom: 40px;
right: 50%;
transform: translateX(50%);
z-index: 2;
color: var(--accent-light);
font-size: 12px;
letter-spacing: 0.2em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
opacity: 0;
animation: fadeUp 1s ease 1.4s forwards, bobble 2.4s ease-in-out 2s infinite;
}
.scroll-indicator::after {
content: '';
display: block;
width: 1px;
height: 32px;
background: linear-gradient(180deg, var(--accent), transparent);
margin: 8px auto 0;
}
.hero-corner {
position: absolute;
width: 80px;
height: 80px;
border: 1.5px solid var(--accent);
opacity: 0.85;
z-index: 2;
pointer-events: none;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.hero-corner.tl { top: 100px; right: 32px; border-left: none; border-bottom: none; }
.hero-corner.tr { top: 100px; left: 32px; border-right: none; border-bottom: none; }
.hero-corner.bl { bottom: 32px; right: 32px; border-left: none; border-top: none; }
.hero-corner.br { bottom: 32px; left: 32px; border-right: none; border-top: none; }
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
from { opacity: 0; transform: translateY(20px); }
}
@keyframes bobble {
0%, 100% { transform: translateX(50%) translateY(0); }
50% { transform: translateX(50%) translateY(8px); }
}
section { position: relative; }
.chapter-mark {
text-align: center;
margin-bottom: 28px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.chapter-mark .ch-num {
font-family: var(--font-accent);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.35em;
color: var(--accent-dark);
padding: 6px 18px;
border: 1px solid rgba(200, 164, 92, 0.4);
border-radius: 999px;
background: rgba(200, 164, 92, 0.06);
}
.chapter-mark .ch-label {
font-family: var(--font-accent);
font-size: 14px;
letter-spacing: 0.18em;
color: var(--text-soft);
font-weight: 400;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 48px);
font-weight: 900;
color: var(--primary);
line-height: 1.25;
text-align: center;
}
.section-lead {
font-size: clamp(16px, 1.8vw, 19px);
color: var(--text-soft);
line-height: 1.85;
max-width: 680px;
margin: 24px auto 0;
text-align: center;
}
.chapter-gap {
position: relative;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: transparent;
}
.chapter-gap::before {
content: '';
position: absolute;
top: 50%;
right: 0; left: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(200, 164, 92, 0.3) 20%,
rgba(200, 164, 92, 0.5) 50%,
rgba(200, 164, 92, 0.3) 80%,
transparent 100%);
}
.chapter-gap .gap-ornament {
position: relative;
z-index: 2;
padding: 0 24px;
display: flex;
align-items: center;
gap: 14px;
}
.chapter-gap .gap-ornament span {
color: var(--accent);
font-size: 14px;
transform: rotate(45deg);
display: inline-block;
}
.chapter-gap .gap-ornament .gap-dot {
width: 4px;
height: 4px;
background: var(--accent);
border-radius: 50%;
transform: none;
}
.chapter-gap.from-bg { background: transparent; }
.chapter-gap.from-bg-alt { background: transparent; }
.chapter-gap.from-bg-paper { background: transparent; }
.chapter-gap.from-dark {
background: linear-gradient(180deg, #0F4D3A 0%, var(--bg-alt) 100%);
}
.chapter-gap.from-dark::before {
background: linear-gradient(90deg,
transparent 0%,
rgba(200, 164, 92, 0.5) 20%,
rgba(200, 164, 92, 0.7) 50%,
rgba(200, 164, 92, 0.5) 80%,
transparent 100%);
}
.chapter-gap.from-dark .gap-ornament span {
color: var(--accent-light);
}
.chapter-gap.from-dark .gap-ornament .gap-dot {
background: var(--accent-light);
}
.narrow {
max-width: 720px;
margin: 0 auto;
}
.pull-quote {
max-width: 760px;
margin: 0 auto 80px;
text-align: center;
padding: 0 24px;
position: relative;
}
.pull-quote::before,
.pull-quote::after {
content: '﴾';
position: absolute;
font-family: var(--font-accent);
font-size: 56px;
color: var(--accent);
opacity: 0.4;
top: -20px;
}
.pull-quote::before { right: -10px; }
.pull-quote::after { content: '﴿'; left: -10px; }
.pull-quote p {
font-family: var(--font-accent);
font-size: clamp(20px, 2.4vw, 26px);
line-height: 1.9;
color: var(--primary);
font-weight: 500;
font-style: normal;
}
.manzumeh {
padding: 100px 0 120px;
background: transparent;
position: relative;
overflow: hidden;
}
.manzumeh::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 120px 120px;
opacity: 0.05;
pointer-events: none;
}
.manzumeh-intro {
max-width: 680px;
margin: 56px auto 0;
text-align: center;
}
.manzumeh-intro p {
font-size: clamp(17px, 1.8vw, 20px);
line-height: 2;
color: var(--text);
font-weight: 400;
}
.manzumeh-hint {
text-align: center;
margin: 32px auto 56px;
font-size: 13px;
color: var(--text-soft);
letter-spacing: 0.05em;
}
.manzumeh-hint span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(200, 164, 92, 0.08);
border: 1px dashed rgba(200, 164, 92, 0.4);
border-radius: 999px;
}
.manzumeh-hint .pulse {
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.6); opacity: 0.4; }
}
.manzumeh-experience {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 56px;
align-items: start;
margin-top: 24px;
}
.pyramid-deluxe {
position: relative;
display: flex;
flex-direction: column;
gap: 22px;
padding: 24px;
}
.pyramid-deluxe::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 30%, rgba(200, 164, 92, 0.06), transparent 70%),
url("data:image/svg+xml;utf8,");
background-size: 40px 40px;
border-radius: 12px;
pointer-events: none;
z-index: 0;
}
.tier-card {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 90px 1fr;
align-items: stretch;
gap: 0;
background: var(--bg-card);
border: 1.5px solid var(--border-soft);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 2px 8px rgba(15, 77, 58, 0.04);
}
.tier-card::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: 12px;
pointer-events: none;
transition: border-color 0.4s ease;
margin: 4px;
}
.tier-card:hover {
transform: translateX(-6px);
box-shadow: 0 12px 30px rgba(15, 77, 58, 0.12);
border-color: var(--accent);
}
.tier-card:hover::before {
border-color: rgba(200, 164, 92, 0.4);
}
.tier-card.active {
transform: translateX(-10px);
border-color: var(--accent);
box-shadow: 0 16px 40px rgba(15, 77, 58, 0.15);
}
.tier-card.active::before {
border-color: rgba(200, 164, 92, 0.5);
}
.tier-number {
position: relative;
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(200, 164, 92, 0.12), rgba(200, 164, 92, 0.02));
border-left: 1px solid var(--border-softer);
}
.tier-number .num {
font-family: var(--font-accent);
font-size: 56px;
font-weight: 300;
line-height: 1;
color: var(--accent);
opacity: 0.7;
transition: all 0.5s ease;
}
.tier-card.active .tier-number .num {
opacity: 1;
transform: scale(1.08);
}
.tier-number::after {
content: '';
position: absolute;
bottom: 12px;
right: 50%;
transform: translateX(50%);
width: 24px;
height: 1px;
background: var(--accent);
opacity: 0.5;
}
.tier-content {
padding: 22px 24px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
position: relative;
}
.tier-role {
font-size: 11.5px;
letter-spacing: 0.2em;
font-weight: 500;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
}
.tier-role::before {
content: '';
width: 16px;
height: 1px;
background: currentColor;
}
.tier-name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.3;
color: var(--text);
}
.tier-card.active .tier-name {
color: var(--primary);
}
.tier-card[data-axis="civ"] .tier-role { color: var(--civ); }
.tier-card[data-axis="imamat"] .tier-role { color: var(--imamat); }
.tier-card[data-axis="mosque"] .tier-role { color: var(--mosque); }
.tier-card[data-axis="tabyin"] .tier-role { color: var(--tabyin); }
.tier-card[data-axis="civ"].active { border-color: var(--civ); }
.tier-card[data-axis="imamat"].active { border-color: var(--imamat); }
.tier-card[data-axis="mosque"].active { border-color: var(--mosque); }
.tier-card[data-axis="tabyin"].active { border-color: var(--tabyin); }
.tier-flow {
position: relative;
z-index: 2;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
margin: -22px 0;
pointer-events: none;
}
.tier-flow svg {
width: 60px;
height: 22px;
overflow: visible;
}
.tier-flow path {
stroke: var(--accent);
stroke-width: 1.5;
fill: none;
stroke-dasharray: 4 4;
opacity: 0.6;
}
.tier-flow .flow-diamond {
position: absolute;
width: 8px;
height: 8px;
background: var(--accent);
transform: rotate(45deg);
box-shadow: 0 0 8px rgba(200, 164, 92, 0.5);
}
.tier-panel {
position: sticky;
top: 140px;
border-radius: 16px;
overflow: hidden;
min-height: 580px;
box-shadow: 0 12px 40px rgba(15, 77, 58, 0.18);
isolation: isolate;
}
.panel-bg {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.panel-bg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.5s ease, transform 1.5s ease;
position: absolute;
inset: 0;
opacity: 0;
}
.panel-bg img.active {
opacity: 1;
}
.tier-panel::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(15, 30, 25, 0.25) 0%, rgba(15, 30, 25, 0.55) 45%, rgba(15, 30, 25, 0.92) 100%);
transition: background 0.6s ease;
}
.tier-panel[data-active="civ"]::before {
background:
linear-gradient(180deg, rgba(74, 52, 18, 0.2) 0%, rgba(74, 52, 18, 0.55) 45%, rgba(74, 52, 18, 0.94) 100%),
linear-gradient(135deg, rgba(200, 164, 92, 0.22), transparent 70%);
}
.tier-panel[data-active="imamat"]::before {
background:
linear-gradient(180deg, rgba(10, 53, 40, 0.2) 0%, rgba(10, 53, 40, 0.55) 45%, rgba(10, 53, 40, 0.95) 100%),
linear-gradient(135deg, rgba(15, 77, 58, 0.22), transparent 70%);
}
.tier-panel[data-active="mosque"]::before {
background:
linear-gradient(180deg, rgba(15, 50, 60, 0.2) 0%, rgba(15, 50, 60, 0.55) 45%, rgba(15, 50, 60, 0.95) 100%),
linear-gradient(135deg, rgba(42, 107, 124, 0.22), transparent 70%);
}
.tier-panel[data-active="tabyin"]::before {
background:
linear-gradient(180deg, rgba(50, 25, 12, 0.2) 0%, rgba(50, 25, 12, 0.55) 45%, rgba(50, 25, 12, 0.95) 100%),
linear-gradient(135deg, rgba(123, 68, 35, 0.28), transparent 70%);
}
.panel-frame {
position: absolute;
inset: 12px;
border: 1px solid rgba(200, 164, 92, 0.5);
border-radius: 10px;
pointer-events: none;
z-index: 1;
}
.panel-bar {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: var(--accent);
transition: background 0.5s ease;
z-index: 2;
}
.panel-content {
position: relative;
z-index: 2;
padding: 44px 36px 36px;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 580px;
color: #F4ECE0;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px dashed rgba(200, 164, 92, 0.4);
}
.panel-pos {
font-family: var(--font-accent);
font-size: 13px;
color: rgba(244, 236, 224, 0.7);
letter-spacing: 0.1em;
}
.panel-pos b {
font-weight: 700;
color: var(--accent-light);
font-size: 16px;
margin: 0 4px;
}
.panel-role-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.1em;
background: rgba(244, 236, 224, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(200, 164, 92, 0.4);
color: var(--accent-light);
transition: all 0.5s ease;
}
.panel-role-tag::before {
content: '◆';
font-size: 8px;
}
.panel-name {
font-family: var(--font-display);
font-size: clamp(32px, 3.6vw, 44px);
font-weight: 900;
color: #F8EFD9;
line-height: 1.2;
margin-bottom: 20px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.panel-desc {
font-size: 16px;
line-height: 1.95;
color: rgba(244, 236, 224, 0.95);
margin-bottom: 24px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.panel-keys {
list-style: none;
padding: 0;
margin: 0 0 28px;
display: flex;
flex-direction: column;
gap: 10px;
}
.panel-keys li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
background: rgba(244, 236, 224, 0.08);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-right: 3px solid var(--accent);
border-radius: 4px;
font-size: 14.5px;
line-height: 1.7;
color: rgba(244, 236, 224, 0.95);
transition: all 0.4s ease;
}
.panel-keys li::before {
content: '◆';
color: var(--accent);
font-size: 8px;
margin-top: 8px;
flex-shrink: 0;
}
.panel-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
background: var(--accent);
color: var(--primary-dark);
border-radius: 8px;
font-weight: 700;
font-size: 15px;
align-self: flex-start;
transition: all 0.3s ease;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.panel-cta:hover {
background: var(--accent-light);
transform: translateX(-4px);
box-shadow: 0 10px 26px rgba(200, 164, 92, 0.4);
}
.panel-cta::after {
content: '←';
font-size: 18px;
}
.panel-content.switching .panel-header,
.panel-content.switching .panel-name,
.panel-content.switching .panel-desc,
.panel-content.switching .panel-keys,
.panel-content.switching .panel-cta {
opacity: 0;
transform: translateY(8px);
}
.panel-content .panel-header,
.panel-content .panel-name,
.panel-content .panel-desc,
.panel-content .panel-keys,
.panel-content .panel-cta {
transition: opacity 0.4s ease, transform 0.4s ease;
}
.tier-panel[data-active="civ"] .panel-bar { background: var(--civ); }
.tier-panel[data-active="imamat"] .panel-bar { background: var(--imamat); }
.tier-panel[data-active="mosque"] .panel-bar { background: var(--mosque); }
.tier-panel[data-active="tabyin"] .panel-bar { background: var(--tabyin); }
.tier-panel[data-active="civ"] .panel-keys li { border-right-color: var(--civ); }
.tier-panel[data-active="imamat"] .panel-keys li { border-right-color: rgba(200, 164, 92, 0.7); }
.tier-panel[data-active="mosque"] .panel-keys li { border-right-color: rgba(200, 164, 92, 0.7); }
.tier-panel[data-active="tabyin"] .panel-keys li { border-right-color: rgba(200, 164, 92, 0.7); }
@media (max-width: 900px){.manzumeh-experience {
grid-template-columns: 1fr;
gap: 0;
}
.manzumeh-hint span {
font-size: 12px;
padding: 6px 14px;
}
.pyramid-deluxe {
padding: 16px 8px;
gap: 0;
}
.tier-card {
grid-template-columns: 56px 1fr;
margin-bottom: 0;
border-radius: 10px;
transition: all 0.4s ease;
position: relative;
padding-left: 110px;
}
.tier-card::after {
content: 'بیشتر بدانید';
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
padding: 8px 14px 8px 32px;
background: var(--accent);
color: var(--primary-dark);
border: 1px solid var(--accent);
border-radius: 999px;
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
white-space: nowrap;
transition: all 0.3s ease;
z-index: 3;
box-shadow: 0 3px 10px rgba(200, 164, 92, 0.35);
cursor: pointer;
}
.tier-card::before {
content: '';
position: absolute;
left: 16px;
top: 50%;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--primary-dark);
border-bottom: 1.5px solid var(--primary-dark);
transform: translateY(-65%) rotate(45deg);
transition: transform 0.4s ease;
z-index: 4;
pointer-events: none;
border-radius: 1px;
background: transparent;
inset: auto;
margin: 0;
}
.tier-card.active::after {
content: 'بستن';
background: var(--primary);
color: var(--bg);
border-color: var(--primary);
box-shadow: 0 3px 10px rgba(15, 77, 58, 0.3);
}
.tier-card.active::before {
transform: translateY(-35%) rotate(-135deg);
border-color: var(--bg);
}
.tier-card:hover {
transform: none;
}
.tier-card.active {
transform: none;
border-radius: 10px 10px 0 0;
margin-bottom: 0;
}
.tier-card:hover::after {
background: var(--accent-light);
box-shadow: 0 4px 14px rgba(200, 164, 92, 0.5);
}
.tier-number .num { font-size: 36px; }
.tier-content { padding: 16px 14px 16px 8px; }
.tier-name { font-size: 17px; }
.tier-role { font-size: 10.5px; letter-spacing: 0.15em; }
.tier-flow {
height: 16px;
margin: -8px 0;
}
.tier-flow svg { width: 40px; height: 16px; }
.tier-card.active + .tier-flow,
.tier-panel + .tier-flow {
display: none;
}
.tier-panel {
position: relative !important;
top: 0;
min-height: 0;
max-height: 0;
opacity: 0;
margin: 0;
border-radius: 0 0 10px 10px;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease;
box-shadow: 0 8px 20px rgba(15, 77, 58, 0.15);
}
.tier-panel.mobile-open {
max-height: 1400px;
opacity: 1;
margin-bottom: 14px;
}
.panel-content {
padding: 28px 24px 28px;
min-height: 0;
}
.panel-bg { height: 100%; }
.panel-name { font-size: 26px; margin-bottom: 14px; }
.panel-desc { font-size: 15px; line-height: 1.85; margin-bottom: 20px; }
.panel-keys li { font-size: 13.5px; padding: 10px 14px; }
.panel-keys { margin-bottom: 22px; }
.panel-cta { font-size: 14px; padding: 12px 20px; }
.panel-header {
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
padding-bottom: 14px;
}
.panel-pos { font-size: 11.5px; }
.panel-role-tag { font-size: 10.5px; padding: 5px 12px; }}
@media (max-width: 480px){.pyramid-deluxe { padding: 12px 0; }
.tier-card {
grid-template-columns: 44px 1fr;
padding-left: 56px;
}
.tier-card::after {
content: '';
left: 10px;
padding: 0;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
}
.tier-card.active::after {
content: '';
}
.tier-card::before {
left: 24px;
width: 7px;
height: 7px;
}
.tier-card.active::before {
border-color: var(--bg);
}
.tier-number .num { font-size: 28px; }
.tier-content { padding: 14px 12px 14px 6px; }
.tier-name { font-size: 15.5px; }
.tier-role { font-size: 9.5px; }
.panel-content { padding: 24px 20px; }
.panel-name { font-size: 22px; }
.panel-desc { font-size: 14.5px; }
.manzumeh-hint span { font-size: 11.5px; }}
.manzumeh-text h3 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 800;
color: var(--primary);
margin-bottom: 24px;
line-height: 1.4;
}
.manzumeh-text p {
font-size: 18px;
line-height: 1.95;
color: var(--text);
}
.pyramid {
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
}
.pyramid-tier {
position: relative;
padding: 24px 28px;
border-radius: 10px;
color: #F4ECE0;
cursor: pointer;
transition: transform 0.35s ease, box-shadow 0.35s ease;
overflow: hidden;
}
.pyramid-tier::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid rgba(244, 236, 224, 0.3);
border-radius: 6px;
pointer-events: none;
}
.pyramid-tier:hover {
transform: scale(1.03) translateY(-2px);
box-shadow: 0 14px 36px rgba(200, 164, 92, 0.28);
}
.pyramid-tier .tier-name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
margin-bottom: 4px;
}
.pyramid-tier .tier-role {
font-size: 13px;
opacity: 0.85;
letter-spacing: 0.05em;
}
.pyramid-tier .tier-num {
position: absolute;
top: 16px;
left: 24px;
font-size: 28px;
font-weight: 300;
opacity: 0.35;
font-family: var(--font-accent);
}
.pyramid-tier.t1 { background: linear-gradient(135deg, var(--civ), #b89045); }
.pyramid-tier.t1 .tier-name { color: #fff; }
.pyramid-tier.t2 { background: linear-gradient(135deg, var(--imamat), #0a3a2c); }
.pyramid-tier.t3 { background: linear-gradient(135deg, var(--mosque), #1f5060); }
.pyramid-tier.t4 { background: linear-gradient(135deg, var(--tabyin), #5e3219); }
.pyramid-arrow {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 4px 0;
}
.pyramid-arrow::before {
content: '';
width: 1px;
height: 18px;
background: var(--accent);
}
.pyramid-arrow span {
color: var(--accent);
font-size: 14px;
transform: rotate(45deg);
display: inline-block;
}
.pyramid-arrow::after {
content: '↑';
color: var(--accent);
font-weight: 700;
}
.why {
padding: 100px 0 120px;
background: transparent;
position: relative;
overflow: hidden;
}
.why::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(200, 164, 92, 0.06), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(15, 77, 58, 0.04), transparent 40%),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 200px 200px;
opacity: 0.5;
pointer-events: none;
}
.why .container { position: relative; z-index: 1; }
.why-header {
text-align: center;
margin-bottom: 56px;
}
.pull-quote {
max-width: 820px;
margin: 0 auto 64px;
text-align: center;
padding: 0 32px;
position: relative;
}
.pull-quote::before,
.pull-quote::after {
content: '﴾';
position: absolute;
font-family: var(--font-accent);
font-size: 56px;
color: var(--accent);
opacity: 0.4;
top: -16px;
}
.pull-quote::before { right: -4px; }
.pull-quote::after { content: '﴿'; left: -4px; }
.pull-quote p {
font-family: var(--font-accent);
font-size: clamp(19px, 2.2vw, 24px);
line-height: 1.95;
color: var(--primary);
font-weight: 500;
}
.logic-flow {
max-width: 1080px;
margin: 0 auto 64px;
padding: 32px 24px;
background: linear-gradient(135deg, var(--bg-card), #f6ecd9);
border: 1px solid var(--border-soft);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(15, 77, 58, 0.06);
position: relative;
}
.logic-flow::before {
content: '';
position: absolute;
inset: 8px;
border: 1px solid rgba(200, 164, 92, 0.3);
border-radius: 10px;
pointer-events: none;
}
.logic-flow-title {
text-align: center;
font-size: 12px;
letter-spacing: 0.35em;
color: var(--accent-dark);
font-weight: 700;
margin-bottom: 28px;
position: relative;
z-index: 1;
}
.logic-flow-title::before,
.logic-flow-title::after {
content: '◆';
margin: 0 12px;
font-size: 8px;
vertical-align: middle;
opacity: 0.7;
}
.logic-chain {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: 8px;
position: relative;
z-index: 1;
}
.logic-node {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 18px 12px;
background: var(--bg);
border-radius: 12px;
border: 1.5px solid;
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
}
.logic-node[data-axis="civ"] { border-color: rgba(200, 164, 92, 0.4); }
.logic-node[data-axis="imamat"] { border-color: rgba(15, 77, 58, 0.4); }
.logic-node[data-axis="mosque"] { border-color: rgba(42, 107, 124, 0.4); }
.logic-node[data-axis="tabyin"] { border-color: rgba(123, 68, 35, 0.4); }
.logic-node:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(15, 77, 58, 0.1);
}
.logic-node[data-axis="civ"]:hover { border-color: var(--civ); }
.logic-node[data-axis="imamat"]:hover { border-color: var(--imamat); }
.logic-node[data-axis="mosque"]:hover { border-color: var(--mosque); }
.logic-node[data-axis="tabyin"]:hover { border-color: var(--tabyin); }
.logic-node .node-role {
font-size: 11px;
letter-spacing: 0.18em;
font-weight: 600;
margin-bottom: 6px;
opacity: 0.85;
}
.logic-node[data-axis="civ"] .node-role { color: var(--civ); }
.logic-node[data-axis="imamat"] .node-role { color: var(--imamat); }
.logic-node[data-axis="mosque"] .node-role { color: var(--mosque); }
.logic-node[data-axis="tabyin"] .node-role { color: var(--tabyin); }
.logic-node .node-name {
font-family: var(--font-display);
font-size: clamp(14px, 1.5vw, 17px);
font-weight: 800;
color: var(--primary);
line-height: 1.3;
}
.logic-arrow {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
flex: 0 0 auto;
padding: 0 2px;
}
.logic-arrow svg {
width: 24px;
height: 24px;
color: var(--accent);
opacity: 0.7;
}
.logic-arrow .arrow-label {
font-size: 9px;
color: var(--accent-dark);
font-weight: 600;
letter-spacing: 0.1em;
white-space: nowrap;
opacity: 0.7;
}
.reasoning-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 56px;
}
.reason-col {
background: var(--bg-card);
border: 1px solid var(--border-soft);
border-radius: 14px;
padding: 32px 28px 28px;
position: relative;
box-shadow: 0 4px 16px rgba(15, 77, 58, 0.05);
transition: all 0.4s ease;
overflow: hidden;
}
.reason-col::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid rgba(200, 164, 92, 0.2);
border-radius: 9px;
pointer-events: none;
}
.reason-col::after {
content: '';
position: absolute;
top: 0;
right: 16px;
left: 16px;
height: 3px;
border-radius: 0 0 3px 3px;
}
.reason-col[data-color="civ"]::after { background: var(--civ); }
.reason-col[data-color="mosque"]::after { background: var(--mosque); }
.reason-col[data-color="tabyin"]::after { background: var(--tabyin); }
.reason-col:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(15, 77, 58, 0.1);
}
.reason-col .col-num {
position: absolute;
top: 16px;
left: 20px;
font-family: var(--font-accent);
font-size: 80px;
font-weight: 200;
line-height: 0.85;
color: var(--accent);
opacity: 0.15;
letter-spacing: -0.05em;
pointer-events: none;
z-index: 0;
}
.reason-col > * {
position: relative;
z-index: 1;
}
.col-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 999px;
background: rgba(200, 164, 92, 0.1);
border: 1px solid rgba(200, 164, 92, 0.35);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--accent-dark);
margin-bottom: 18px;
}
.col-label::before {
content: '◆';
font-size: 7px;
}
.reason-col .col-text {
font-size: 17px;
line-height: 1.85;
color: var(--text);
font-weight: 500;
}
.reason-col .col-text strong {
font-weight: 700;
}
.strong-civ { color: var(--civ); }
.strong-imamat { color: var(--imamat); }
.strong-mosque { color: var(--mosque); }
.strong-tabyin { color: var(--tabyin); }
.why-summary {
max-width: 720px;
margin: 0 auto;
text-align: center;
padding: 36px 32px;
background:
linear-gradient(135deg, rgba(15, 77, 58, 0.04), rgba(200, 164, 92, 0.06)),
var(--bg-card);
border: 1px solid var(--accent);
border-radius: 14px;
position: relative;
box-shadow: 0 8px 28px rgba(15, 77, 58, 0.06);
}
.why-summary::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid rgba(200, 164, 92, 0.3);
border-radius: 9px;
pointer-events: none;
}
.why-summary .summary-mark {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.why-summary .summary-mark::before,
.why-summary .summary-mark::after {
content: '';
width: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.why-summary .summary-mark span {
color: var(--accent);
font-size: 12px;
letter-spacing: 0.3em;
font-weight: 600;
}
.why-summary p {
font-family: var(--font-display);
font-size: clamp(18px, 2.2vw, 22px);
line-height: 1.7;
color: var(--primary);
font-weight: 700;
}
.why-summary p .highlight {
color: var(--accent-dark);
}
@media (max-width: 1024px){.logic-node .node-name { font-size: 13px; }
.logic-arrow svg { width: 20px; height: 20px; }
.logic-arrow .arrow-label { display: none; }}
@media (max-width: 768px){.why { padding: 80px 0; }
.pull-quote { margin-bottom: 48px; }
.logic-flow { padding: 24px 16px; margin-bottom: 48px; }
.logic-chain {
flex-direction: column;
gap: 0;
}
.logic-node { padding: 16px; }
.logic-arrow {
padding: 8px 0;
}
.logic-arrow svg {
transform: rotate(90deg);
width: 22px;
height: 22px;
}
.reasoning-grid {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 40px;
}
.reason-col { padding: 24px 22px; }
.reason-col .col-text { font-size: 15.5px; }
.reason-col .col-num { font-size: 60px; }}
.axes {
padding: 100px 0 120px;
background: transparent;
position: relative;
}
.axes::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
opacity: 0.4;
pointer-events: none;
}
.axes .container { position: relative; z-index: 2; }
.axes-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 72px;
}
.axis-card {
position: relative;
border-radius: 10px;
min-height: 440px;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-shadow: 0 6px 20px rgba(15, 77, 58, 0.12);
transition: all 0.5s ease;
overflow: hidden;
isolation: isolate;
color: #F4ECE0;
}
.axis-card .axis-bg {
position: absolute;
inset: 0;
z-index: -2;
}
.axis-card .axis-bg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.9s ease;
}
.axis-card::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.axis-card.civ::before {
background:
linear-gradient(180deg, rgba(74, 52, 18, 0.15) 0%, rgba(74, 52, 18, 0.55) 50%, rgba(74, 52, 18, 0.92) 100%),
linear-gradient(135deg, rgba(200, 164, 92, 0.25), transparent 70%);
}
.axis-card.imamat::before {
background:
linear-gradient(180deg, rgba(10, 53, 40, 0.2) 0%, rgba(10, 53, 40, 0.6) 50%, rgba(10, 53, 40, 0.95) 100%),
linear-gradient(135deg, rgba(15, 77, 58, 0.25), transparent 70%);
}
.axis-card.mosque::before {
background:
linear-gradient(180deg, rgba(15, 50, 60, 0.2) 0%, rgba(15, 50, 60, 0.6) 50%, rgba(15, 50, 60, 0.95) 100%),
linear-gradient(135deg, rgba(42, 107, 124, 0.25), transparent 70%);
}
.axis-card.tabyin::before {
background:
linear-gradient(180deg, rgba(50, 25, 12, 0.2) 0%, rgba(50, 25, 12, 0.6) 50%, rgba(50, 25, 12, 0.95) 100%),
linear-gradient(135deg, rgba(123, 68, 35, 0.3), transparent 70%);
}
.axis-card .axis-frame {
position: absolute;
inset: 8px;
border: 1px solid rgba(200, 164, 92, 0.5);
border-radius: 6px;
pointer-events: none;
z-index: 1;
}
.axis-card:hover {
transform: translateY(-10px);
box-shadow: 0 24px 50px rgba(15, 77, 58, 0.25);
}
.axis-card:hover .axis-bg img {
transform: scale(1.08);
}
.axis-icon {
position: absolute;
top: 24px;
right: 24px;
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 12px;
z-index: 2;
background: rgba(244, 236, 224, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(200, 164, 92, 0.5);
color: var(--accent-light);
transition: all 0.4s ease;
}
.axis-card:hover .axis-icon {
background: var(--accent);
color: var(--primary-dark);
border-color: var(--accent);
transform: scale(1.08);
}
.axis-icon svg { width: 26px; height: 26px; }
.axis-body {
position: relative;
z-index: 2;
padding: 24px 28px 28px;
}
.axis-card .axis-name {
font-family: var(--font-display);
font-size: 28px;
font-weight: 900;
margin-bottom: 6px;
color: #F8EFD9;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
line-height: 1.25;
}
.axis-card .axis-role {
font-size: 13px;
letter-spacing: 0.15em;
color: var(--accent-light);
margin-bottom: 18px;
font-weight: 500;
}
.axis-card .axis-role::before {
content: '◆';
margin-left: 8px;
font-size: 8px;
vertical-align: middle;
}
.axis-card .axis-text {
font-size: 14.5px;
line-height: 1.85;
color: rgba(244, 236, 224, 0.92);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
margin-bottom: 22px;
}
.axis-card .axis-foot {
padding-top: 16px;
border-top: 1px solid rgba(200, 164, 92, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.axis-card .axis-foot .count {
color: rgba(244, 236, 224, 0.7);
font-size: 13px;
}
.axis-card .axis-foot .enter {
font-weight: 600;
color: var(--accent-light);
transition: transform 0.3s ease;
}
.axis-card:hover .axis-foot .enter {
transform: translateX(-6px);
color: var(--accent);
}
.concepts {
padding: 120px 0;
background:
linear-gradient(180deg, rgba(15,77,58,0.0) 0%, rgba(26,58,44,0.92) 6%, rgba(15,77,58,0.92) 100%),
url('bg-pattern.png') top center / cover fixed;
position: relative;
overflow: hidden;
color: #F4ECE0;
}
.concepts::before {
content: '';
position: absolute;
inset: 0;
background-image:
url('bg-pattern.png');
background-size: cover;
background-position: top center;
opacity: 0.18;
pointer-events: none;
}
.concepts::after {
content: '';
position: absolute;
top: 30%;
right: 50%;
transform: translateX(50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(200, 164, 92, 0.15) 0%, transparent 60%);
pointer-events: none;
}
.concepts .container { position: relative; z-index: 2; }
.concepts .chapter-mark .ch-num {
color: var(--accent-light);
border-color: rgba(200, 164, 92, 0.5);
background: rgba(200, 164, 92, 0.1);
}
.concepts .chapter-mark .ch-label {
color: rgba(244, 236, 224, 0.8);
}
.concepts .section-title {
color: #F8EFD9;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.concepts .section-lead {
color: rgba(244, 236, 224, 0.8);
}
.concept-filter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin: 56px auto 64px;
padding: 16px 20px;
background: rgba(244, 236, 224, 0.04);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(200, 164, 92, 0.2);
border-radius: 999px;
max-width: fit-content;
}
.filter-btn {
padding: 10px 22px;
border-radius: 999px;
background: transparent;
color: rgba(244, 236, 224, 0.7);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid transparent;
font-family: inherit;
}
.filter-btn .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
}
.filter-btn[data-axis="all"] .dot { display: none; }
.filter-btn[data-axis="civ"] .dot { background: var(--civ); }
.filter-btn[data-axis="imamat"] .dot { background: var(--accent-light); }
.filter-btn[data-axis="mosque"] .dot { background: #6dacc0; }
.filter-btn[data-axis="tabyin"] .dot { background: #d68a5a; }
.filter-btn:hover {
color: var(--accent-light);
background: rgba(244, 236, 224, 0.06);
}
.filter-btn.active {
background: var(--accent);
color: var(--primary-dark);
font-weight: 700;
border-color: var(--accent);
}
.filter-btn.active .dot { opacity: 1; }
.filter-btn .count {
font-size: 11px;
opacity: 0.7;
margin-right: 4px;
}
.concepts-mosaic {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 180px;
gap: 18px;
margin-bottom: 64px;
}
.concept-cell {
position: relative;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
background: rgba(244, 236, 224, 0.04);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(200, 164, 92, 0.2);
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
isolation: isolate;
}
.concept-cell.size-featured {
grid-column: span 3;
grid-row: span 2;
padding: 36px 32px;
}
.concept-cell.size-wide {
grid-column: span 3;
grid-row: span 1;
}
.concept-cell.size-normal {
grid-column: span 2;
grid-row: span 1;
}
.concept-cell.size-tall {
grid-column: span 2;
grid-row: span 2;
padding: 32px;
}
.concept-cell .bg-num {
position: absolute;
bottom: -30px;
left: -10px;
font-family: var(--font-accent);
font-size: 180px;
font-weight: 200;
line-height: 0.8;
color: var(--accent);
opacity: 0.08;
letter-spacing: -0.08em;
pointer-events: none;
z-index: 0;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.concept-cell.size-featured .bg-num {
font-size: 280px;
bottom: -50px;
}
.concept-cell:hover .bg-num {
opacity: 0.18;
transform: scale(1.05);
}
.concept-cell > * {
position: relative;
z-index: 1;
}
.concept-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.concept-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
background: rgba(244, 236, 224, 0.1);
border: 1px solid rgba(200, 164, 92, 0.3);
color: var(--accent-light);
}
.concept-badge .badge-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.concept-cell[data-axis="civ"] .badge-dot { background: var(--civ); }
.concept-cell[data-axis="imamat"] .badge-dot { background: #76bf9d; }
.concept-cell[data-axis="mosque"] .badge-dot { background: #6dacc0; }
.concept-cell[data-axis="tabyin"] .badge-dot { background: #d68a5a; }
.concept-index {
font-family: var(--font-accent);
font-size: 13px;
color: rgba(200, 164, 92, 0.6);
font-weight: 500;
}
.concept-body {
margin-top: auto;
padding-top: 16px;
}
.concept-name {
font-family: var(--font-display);
font-weight: 800;
color: #F8EFD9;
line-height: 1.3;
margin-bottom: 8px;
}
.concept-cell.size-featured .concept-name {
font-size: 32px;
margin-bottom: 14px;
}
.concept-cell.size-tall .concept-name {
font-size: 24px;
}
.concept-cell.size-wide .concept-name,
.concept-cell.size-normal .concept-name {
font-size: 18px;
}
.concept-desc {
font-size: 13px;
line-height: 1.7;
color: rgba(244, 236, 224, 0.7);
margin-bottom: 14px;
}
.concept-cell.size-featured .concept-desc {
font-size: 15px;
line-height: 1.85;
color: rgba(244, 236, 224, 0.85);
}
.concept-cell.size-tall .concept-desc {
font-size: 14px;
}
.concept-cell.size-wide .concept-desc,
.concept-cell.size-normal .concept-desc {
display: none;
}
.concept-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--accent-light);
font-weight: 600;
transition: transform 0.3s ease;
}
.concept-cta::after {
content: '←';
font-size: 15px;
}
.concept-cell::before {
content: '';
position: absolute;
top: 16px;
bottom: 16px;
right: 0;
width: 3px;
border-radius: 0 3px 3px 0;
transition: all 0.4s ease;
background: rgba(200, 164, 92, 0.4);
}
.concept-cell[data-axis="civ"]::before { background: var(--civ); }
.concept-cell[data-axis="imamat"]::before { background: rgba(118, 191, 157, 0.7); }
.concept-cell[data-axis="mosque"]::before { background: rgba(109, 172, 192, 0.7); }
.concept-cell[data-axis="tabyin"]::before { background: rgba(214, 138, 90, 0.7); }
.concept-cell:hover {
background: rgba(244, 236, 224, 0.08);
border-color: var(--accent);
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.concept-cell:hover::before {
width: 4px;
box-shadow: 0 0 12px currentColor;
}
.concept-cell:hover .concept-cta {
transform: translateX(-4px);
}
.concept-cell.dimmed {
opacity: 0.15;
pointer-events: none;
filter: blur(2px);
}
.all-concepts {
text-align: center;
margin-top: 24px;
}
.all-concepts a {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: rgba(244, 236, 224, 0.05);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--accent);
color: #F8EFD9;
border-radius: 12px;
font-weight: 600;
font-size: 15px;
transition: all 0.3s ease;
}
.all-concepts a::after {
content: '←';
font-size: 20px;
color: var(--accent-light);
transition: transform 0.3s ease;
}
.all-concepts a:hover {
background: var(--accent);
color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(200, 164, 92, 0.4);
}
.all-concepts a:hover::after {
transform: translateX(-6px);
color: var(--primary-dark);
}
@media (max-width: 1024px){.concepts-mosaic {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 160px;
}
.concept-cell.size-featured { grid-column: span 4; grid-row: span 2; }
.concept-cell.size-tall { grid-column: span 2; grid-row: span 2; }
.concept-cell.size-wide { grid-column: span 4; grid-row: span 1; }
.concept-cell.size-normal { grid-column: span 2; grid-row: span 1; }}
@media (max-width: 640px){.concepts-mosaic {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 14px;
}
.concept-cell,
.concept-cell.size-featured,
.concept-cell.size-tall,
.concept-cell.size-wide,
.concept-cell.size-normal {
grid-column: span 1;
grid-row: span 1;
min-height: 160px;
padding: 24px;
}
.concept-cell .concept-desc { display: block; font-size: 13.5px; }
.concept-cell.size-featured .concept-name { font-size: 24px; }
.concept-filter { margin: 40px 0 48px; gap: 8px; padding: 12px; }
.filter-btn { padding: 8px 14px; font-size: 13px; }}
.author {
padding: 100px 0 120px;
background: transparent;
}
.author-grid {
display: grid;
grid-template-columns: 320px 1fr;
gap: 64px;
align-items: center;
}
.author-img-wrap {
position: relative;
padding: 12px;
}
.author-img-wrap::before {
content: '';
position: absolute;
inset: 0;
border: 1px solid var(--accent);
border-radius: 16px;
}
.author-img-wrap::after {
content: '';
position: absolute;
inset: 6px;
border: 1px solid rgba(200, 164, 92, 0.3);
border-radius: 12px;
pointer-events: none;
}
.author-img-wrap img {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 12px 36px rgba(15, 77, 58, 0.15);
display: block;
}
.author-content h2 {
font-family: var(--font-display);
font-size: clamp(28px, 3.5vw, 36px);
font-weight: 800;
color: var(--primary);
margin-bottom: 28px;
}
.author-content p {
font-size: 18px;
line-height: 2;
color: var(--text);
}
.author-signature {
font-family: var(--font-accent);
font-size: 26px;
font-weight: 600;
color: var(--accent-dark);
margin-top: 28px;
text-align: right;
}
.author-cta {
margin-top: 28px;
}
.author-cta a {
display: inline-block;
padding: 12px 24px;
border: 1px solid var(--primary);
color: var(--primary);
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
.author-cta a:hover {
background: var(--primary);
color: var(--bg);
transform: translateY(-2px);
}
.footer {
position: relative;
background-image: url('../img/footer-bg.webp');
background-size: cover;
background-position: center;
color: #F4ECE0;
padding: 96px 0 32px;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
}
.footer-inner { position: relative; z-index: 2; }
.footer-brand {
text-align: center;
margin-bottom: 64px;
}
.footer-brand .logo-wrap {
width: 120px;
height: 120px;
margin: 0 auto;
border-radius: 50%;
background: rgba(244, 236, 224, 0.96);
display: grid;
place-items: center;
border: 1px solid rgba(200, 164, 92, 0.5);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), inset 0 0 0 6px rgba(200, 164, 92, 0.1);
position: relative;
}
.footer-brand .logo-wrap::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
border: 1px solid rgba(200, 164, 92, 0.25);
}
.footer-brand .logo-wrap img {
width: 80px;
height: 80px;
object-fit: contain;
}
.footer-brand h3 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
margin-top: 16px;
color: #F4ECE0;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.9);
}
.footer-brand p {
font-size: 14px;
color: rgba(244, 236, 224, 0.92);
margin-top: 8px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 48px;
margin-bottom: 48px;
}
.footer-col h4 {
font-size: 15px;
font-weight: 600;
color: var(--accent-light);
margin-bottom: 20px;
letter-spacing: 0.05em;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
font-size: 14.5px;
color: rgba(244, 236, 224, 0.95);
transition: color 0.25s ease;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.footer-col a:hover { color: var(--accent); }
.footer-social {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 8px;
}
.social-btn {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: 12px;
background: rgba(15, 30, 22, 0.45);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(200, 164, 92, 0.4);
transition: all 0.3s ease;
}
.social-btn .social-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(244, 236, 224, 0.95);
display: grid;
place-items: center;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.social-btn .social-icon img {
width: 26px;
height: 26px;
object-fit: contain;
}
.social-btn .social-info {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.3;
}
.social-btn .social-info .name {
font-size: 15px;
font-weight: 600;
color: #F4ECE0;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.social-btn .social-info .handle {
font-size: 12px;
color: rgba(244, 236, 224, 0.85);
font-family: var(--font-accent);
letter-spacing: 0.02em;
direction: ltr;
text-align: right;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.social-btn:hover {
background: rgba(200, 164, 92, 0.16);
border-color: var(--accent);
transform: translateY(-2px);
}
.social-btn:hover .social-icon {
transform: scale(1.06);
}
.social-btn:hover .social-info .name {
color: var(--accent-light);
}
.footer-bottom {
border-top: 1px solid rgba(244, 236, 224, 0.25);
padding-top: 24px;
text-align: center;
font-size: 13px;
color: rgba(244, 236, 224, 0.85);
line-height: 1.8;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
@media (max-width: 1024px){.nav-main { gap: 24px; }
.nav-main a { font-size: 15px; }
.manzumeh-grid { gap: 48px; }
.why-grid { grid-template-columns: 320px 1fr; gap: 48px; }
.axes-grid { grid-template-columns: repeat(2, 1fr); }
.concepts-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }}
@media (max-width: 768px){.container { padding: 0 20px; }
.nn{padding-top:86px}
.header { height: 86px; }
.header-inner { padding: 0 20px; gap: 16px; }
.header-logo img { height: 56px; }
.nav-main { display: none; }
.site-search { display: block; flex: 1; min-width: 0; }
.search-box { width: 100%; height: 46px; padding: 0 16px; }
.search-input { font-size: 16px; }
.search-panel { position: fixed; left: 12px; right: 12px; top: 80px; inset-inline: auto; }
.mobile-toggle {
display: grid;
place-items: center;
width: 42px; height: 42px;
color: var(--primary);
}
.mobile-toggle svg { width: 22px; height: 22px; }
.header.nav-open .nav-main { display: flex; flex-direction: column; gap: 2px; position: absolute; top: 100%; right: 0; left: 0; background: #F7F0E5; padding: 14px 22px 18px; border-top: 1px solid rgba(200,164,92,.35); box-shadow: 0 24px 44px -20px rgba(15,77,58,.35); max-height: 78vh; overflow: auto; }
.header.nav-open .nav-main > li { width: 100%; }
.header.nav-open .nav-main > li > a { display: block; padding: 13px 6px; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 16.5px; }
.header.nav-open .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-top: 0; min-width: 0; padding: 2px 0 6px; }
.hero { padding: 100px 16px 80px; min-height: 90vh; }
.hero-content { padding: 40px 16px; }
.hero-corner { display: none; }
.manzumeh, .why, .axes, .concepts, .author { padding: 80px 0; }
.manzumeh-grid { grid-template-columns: 1fr; gap: 48px; }
.why-grid { grid-template-columns: 1fr; gap: 32px; }
.why-sticky { position: relative; top: 0; }
.why-corner { width: 100px; height: 100px; }
.axes-grid { grid-template-columns: 1fr; }
.concepts-grid { grid-template-columns: 1fr; }
.author-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
.author-img-wrap { max-width: 280px; margin: 0 auto; }
.author-signature { text-align: center; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-col { text-align: center; }
.footer-social { justify-content: center; }}
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.4s; }
.ed.fam-chisti i{ color:#0F4D3A; background:color-mix(in srgb,#0F4D3A 12%,transparent); }
.ed.fam-karkard i{ color:#2F6E63; background:color-mix(in srgb,#2F6E63 12%,transparent); }
.ed.fam-taghabol i{ color:#B23A2E; background:color-mix(in srgb,#B23A2E 12%,transparent); }
.fam-chisti{--l:#0F4D3A}
.fam-karkard{--l:#2F6E63}
.fam-taghabol{--l:#B23A2E}
.tg{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 10px 6px 6px;border-radius:10px;background:var(--bg-card);border:1px dashed var(--border-soft)}
.tg .tgl{font-family:var(--font-display);font-size:.82rem;color:var(--primary);opacity:.8;margin-inline-end:2px}
.tg .tt{background:#efe6d0;color:#5C5048;border:1px solid var(--border-softer);border-radius:999px;padding:3px 11px;font-size:.85rem}
.tg .tt.mix{background:#e7d8c6;color:#7B4423;border-color:#e0cdb8;font-weight:600}
/* ===== صفحهی نگاهی نو به مسجد (/noonegah) ===== */
.nn{--navy:#0b2b45;--navy-d:#071d2f;--teal:#2AA0C4;--teal-d:#17788f;--gold:#C8A45C;--gold-d:#a8843f;
--cream:#F4ECE0;--card:#FAF3E7;--ink:#22303c;--soft:#5c6b77;--line:#e3d9c6;
--civ:#C8A45C;--imamat:#0F4D3A;--mosque:#2F6E63;--tabyin:#7B4423;
--fdisplay:'Sahel',var(--font-display,sans-serif);--fbody:'Estedad','Vazirmatn',sans-serif}
.nn *{box-sizing:border-box}
.nn{font-family:var(--fbody);color:var(--ink);overflow-x:hidden;padding-top:110px}
.nn .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.nn section{position:relative}
.nn .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--fdisplay);font-size:.92rem;letter-spacing:.02em;color:var(--teal-d)}
.nn .eyebrow::before,.nn .eyebrow::after{content:"";width:26px;height:1px;background:var(--gold)}
.nn h2.t{font-family:var(--fdisplay);font-weight:800;font-size:clamp(1.7rem,3.3vw,2.5rem);color:var(--navy);margin:.35em 0 .5em;line-height:1.25}
.nn .lead{color:var(--soft);font-size:1.06rem;line-height:2;max-width:820px}
.nn .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fdisplay);font-weight:700;font-size:1rem;
padding:13px 26px;border-radius:14px;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;border:0}
.nn .btn .ar{transition:transform .2s}
.nn .btn:hover{transform:translateY(-3px)}.nn .btn:hover .ar{transform:translateX(-4px)}
.nn .btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff;box-shadow:0 16px 30px -16px var(--teal-d)}
.nn .btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#20170a;box-shadow:0 16px 30px -16px var(--gold-d)}
.nn .btn-ghost{background:transparent;color:#eaf3f7;border:1.5px solid rgba(255,255,255,.4)}
.nn .btn-ghost.dark{color:var(--navy);border-color:rgba(11,43,69,.35)}
/* reveal */
.nn .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.nn .rv.in{opacity:1;transform:none}
/* HERO */
.nn-hero{background:var(--navy-d)}
.nn-hero .heroimg{display:block;width:100%;height:auto}
.nn-hero .herocta{background:linear-gradient(180deg,var(--navy-d),var(--navy));padding:30px 24px 46px;text-align:center}
.nn-hero .herocta p{color:#cbd9e3;max-width:720px;margin:0 auto 22px;line-height:2;font-size:1.05rem}
.nn-hero .herobtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* generic section spacing */
.nn .sec{padding:64px 0}
.nn .sec.alt{background:var(--cream)}
/* WHY */
.nn-why .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.nn-callout{margin:18px 0;padding:18px 22px;border-radius:14px;background:#fff;
border:1px solid var(--line);border-right:5px solid var(--teal);box-shadow:0 14px 34px -26px rgba(11,43,69,.4)}
.nn-callout b{font-family:var(--fdisplay);color:var(--navy);font-size:1.18rem;line-height:1.7}
.nn .figure{border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(11,43,69,.6);border:1px solid var(--line)}
.nn .figure img{display:block;width:100%;height:auto}
/* AXES */
.nn-axes{background:var(--cream)}
.nn-axgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.nn-axcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px;position:relative;overflow:hidden;
transition:transform .22s,box-shadow .22s}
.nn-axcard::before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:var(--a)}
.nn-axcard:hover{transform:translateY(-5px);box-shadow:0 22px 44px -30px rgba(11,43,69,.5)}
.nn-axcard h3{font-family:var(--fdisplay);font-size:1.28rem;color:var(--a);margin:.5em 0 .15em}
.nn-axcard .role{color:var(--soft);font-size:.96rem;margin-bottom:16px;min-height:2.4em}
.nn-axcard a{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:700;font-size:.92rem;text-decoration:none}
.nn-axcard a .ar{transition:transform .2s}.nn-axcard a:hover .ar{transform:translateX(-4px)}
.nn-sum{margin-top:26px;padding:22px 26px;border-radius:16px;text-align:center;line-height:2.1;font-size:1.08rem;
background:linear-gradient(135deg,var(--navy),var(--navy-d));color:#eaf3f7}
.nn-sum b{color:var(--gold)}
/* FORMATS */
.nn-fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.nn-fcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
box-shadow:0 18px 44px -34px rgba(11,43,69,.5);transition:transform .22s,box-shadow .22s}
.nn-fcard:hover{transform:translateY(-6px);box-shadow:0 30px 56px -32px rgba(11,43,69,.55)}
.nn-fimg{aspect-ratio:1/1;overflow:hidden;background:var(--navy-d)}
.nn-fimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.nn-fcard:hover .nn-fimg img{transform:scale(1.05)}
.nn-fbody{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.nn-fbody h3{font-family:var(--fdisplay);font-size:1.24rem;color:var(--navy);margin:0 0 8px;display:flex;align-items:center;gap:9px}
.nn-fbody h3 .ic{font-size:1.1rem}
.nn-fbody p{color:var(--soft);font-size:.95rem;line-height:1.85;margin:0 0 16px;flex:1}
.nn-frow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.nn-count{display:inline-flex;align-items:center;gap:7px;font-family:var(--fdisplay);font-size:.86rem;color:var(--teal-d);
background:rgba(42,160,196,.12);border:1px solid rgba(42,160,196,.28);border-radius:999px;padding:5px 13px}
.nn-count b{font-size:1.05rem}
.nn-fcta{color:var(--navy);font-weight:700;font-size:.9rem;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nn-fcta .ar{transition:transform .2s}.nn-fcta:hover .ar{transform:translateX(-4px)}
/* RELATE */
.nn-relate{background:var(--cream)}
.nn-relate .box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 32px;
box-shadow:0 22px 50px -34px rgba(11,43,69,.4)}
.nn-relate .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
/* FINAL */
.nn-final{background:linear-gradient(160deg,var(--navy),var(--navy-d));color:#eaf3f7;text-align:center;padding:70px 0}
.nn-final h2{font-family:var(--fdisplay);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.7rem);color:#fff;margin:0 0 6px}
.nn-final .sub{color:var(--teal);font-family:var(--fdisplay);font-size:1.05rem;margin-bottom:20px}
.nn-final p{color:#c7d6e0;max-width:760px;margin:0 auto 30px;line-height:2.05}
.nn-chanbtn{display:inline-block;max-width:360px;width:100%;border-radius:20px;overflow:hidden;
box-shadow:0 26px 54px -26px #000;transition:transform .22s,box-shadow .22s}
.nn-chanbtn:hover{transform:translateY(-4px)}
.nn-chanbtn img{display:block;width:100%;height:auto}
.nn-handle{margin-top:20px;font-family:var(--fdisplay);font-size:1.05rem;color:#eaf3f7;letter-spacing:.04em}
.nn-handle span{color:var(--teal)}
@media(max-width:880px){
.nn-axgrid{grid-template-columns:repeat(2,1fr)}
.nn-fgrid{grid-template-columns:repeat(2,1fr)}
.nn-why .grid{grid-template-columns:1fr}
.nn-why .figure{max-width:460px;margin:0 auto}
}
@media(max-width:560px){
.nn-fgrid{grid-template-columns:1fr}
.nn-axgrid{grid-template-columns:1fr}
}
.nn-stwrap{text-align:center;max-width:980px}
.nn-statement{font-family:var(--fdisplay);font-weight:600;color:var(--navy);font-size:clamp(1.45rem,2.9vw,2.1rem);line-height:2.15;margin:.55em auto .8em;max-width:900px;letter-spacing:-.005em}
.nn-statement .mv{font-weight:800;text-decoration:none;white-space:nowrap;padding-bottom:2px;background:linear-gradient(var(--mc),var(--mc)) right bottom / 100% 2px no-repeat;transition:background-size .3s ease,filter .2s}
.nn-statement .mv:hover{background-size:100% 7px;filter:brightness(1.06)}
.nn-statement .mv-civ{--mc:#C8A45C;color:#a8843f}
.nn-statement .mv-imamat{--mc:#0F4D3A;color:#0F4D3A}
.nn-statement .mv-mosque{--mc:#2F6E63;color:#2F6E63}
.nn-statement .mv-tabyin{--mc:#7B4423;color:#7B4423}
.nn-stlink{display:inline-flex;align-items:center;gap:7px;color:var(--navy);font-family:var(--fdisplay);font-weight:700;text-decoration:none;border:1.5px solid var(--line);padding:9px 20px;border-radius:12px;transition:border-color .2s,color .2s}
.nn-stlink:hover{border-color:var(--gold);color:var(--gold-d)}
.nn-stlink .ar{transition:transform .2s}.nn-stlink:hover .ar{transform:translateX(-4px)}
/* ===== چرا این رسانه؟ (نسخهی سرمهای رسانهای) ===== */
.nn-why2{position:relative;overflow:hidden;color:#dbe7ef;padding:80px 0 86px;
background:linear-gradient(165deg,#0c2c47 0%,#071d2f 58%,#05131f 100%);border-top:1px solid rgba(200,164,92,.25)}
.nn-why2::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(60% 45% at 78% 6%,rgba(42,160,196,.16),transparent 60%),radial-gradient(50% 40% at 12% 96%,rgba(200,164,92,.10),transparent 60%)}
.nn-why2 .wm{position:absolute;left:-60px;top:40px;width:360px;opacity:.05;color:#fff;pointer-events:none}
.nn-why2 .wrap{position:relative}
.nn-why2 .eyebrow{color:var(--teal);justify-content:center;display:inline-flex}
.nn-why2-top{text-align:center}
.nn-kick{color:#9fb6c6;max-width:680px;margin:14px auto 0;line-height:1.95;font-size:1.03rem}
.nn-bigq{font-family:var(--fdisplay);font-weight:800;color:#fff;font-size:clamp(1.85rem,4vw,3rem);line-height:1.45;text-align:center;max-width:920px;margin:16px auto 0}
.nn-bigq .hl{color:#E7C173;background:linear-gradient(var(--gold),var(--gold)) right bottom / 0% 5px no-repeat;padding-bottom:6px;transition:background-size .95s cubic-bezier(.2,.7,.2,1) .35s}
.nn-why2-top.in .nn-bigq .hl{background-size:100% 5px}
.nn-why2-mid{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center;margin-top:50px}
.nn-why2-text p{color:#cddae5;font-size:1.09rem;line-height:2.08;margin:0}
.nn-why2-text b{color:#fff}
.nn-phone{display:flex;justify-content:center}
.nn-phone-frame{width:298px;max-width:82%;background:#0d2033;border:2px solid rgba(255,255,255,.14);border-radius:36px;padding:34px 12px 14px;position:relative;
box-shadow:0 46px 90px -34px #000,inset 0 0 0 1px rgba(255,255,255,.05);animation:nnfloat 5.5s ease-in-out infinite}
.nn-phone-frame::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);width:92px;height:6px;border-radius:6px;background:rgba(255,255,255,.2)}
.nn-phone-bar{display:flex;align-items:center;justify-content:center;gap:8px;color:#bcd0dd;font-family:var(--fdisplay);font-size:.86rem;padding:0 0 10px}
.nn-phone-bar .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(42,160,196,.22)}
.nn-phone-scr{position:relative;border-radius:22px;overflow:hidden;line-height:0}
.nn-phone-scr img{width:100%;display:block}
.nn-play{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:rgba(42,160,196,.94);color:#fff;display:grid;place-items:center;font-size:1.15rem;box-shadow:0 12px 26px -8px #000}
@keyframes nnfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.nn-contrast{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;max-width:880px;margin:54px auto 0}
.nn-cpanel{border-radius:18px;padding:22px 24px}
.nn-cpanel .clabel{display:inline-block;font-family:var(--fdisplay);font-size:.9rem;margin-bottom:14px;padding:4px 14px;border-radius:999px}
.nn-cpanel ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.nn-cpanel li{font-size:1.02rem;line-height:1.55;position:relative;padding-right:20px}
.nn-cpanel li::before{content:"";position:absolute;right:0;top:.55em;width:8px;height:8px;border-radius:50%}
.nn-cpanel.old{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}
.nn-cpanel.old .clabel{background:rgba(255,255,255,.08);color:#9fb3c2}
.nn-cpanel.old li{color:#899fb0;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.22)}
.nn-cpanel.old li::before{background:#5b7183}
.nn-cpanel.new{background:linear-gradient(160deg,rgba(42,160,196,.15),rgba(200,164,92,.09));border:1px solid rgba(42,160,196,.42);box-shadow:0 24px 50px -32px rgba(42,160,196,.7)}
.nn-cpanel.new .clabel{background:linear-gradient(135deg,var(--teal),var(--teal-d));color:#fff}
.nn-cpanel.new li{color:#eef5f9;font-weight:600}
.nn-cpanel.new li::before{background:var(--gold);box-shadow:0 0 0 3px rgba(200,164,92,.2)}
.nn-carrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--gold)}
.nn-carrow i{font-size:1.9rem;font-style:normal;line-height:1}
.nn-carrow span{font-size:.74rem;color:#9fb3c2;white-space:nowrap}
@media(max-width:860px){
.nn-why2-mid{grid-template-columns:1fr;gap:30px}
.nn-contrast{grid-template-columns:1fr;max-width:460px}
.nn-carrow{flex-direction:row}.nn-carrow i{transform:rotate(-90deg)}
}
/* ===== منظومهی فکری (بیانیهی غنیشده + ریبونِ توالی) ===== */
.nn-manz{position:relative;overflow:hidden;background:
radial-gradient(60% 60% at 50% 0%,rgba(200,164,92,.10),transparent 60%),
radial-gradient(50% 50% at 50% 100%,rgba(42,160,196,.08),transparent 60%),
linear-gradient(180deg,#F7F0E4,#F1E7D6)}
.nn-orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:760px;max-width:120%;opacity:.09;pointer-events:none}
.nn-manz .wrap{position:relative}
.nn-stwrap{text-align:center;max-width:1000px}
.nn-statement{font-family:var(--fdisplay);font-weight:600;color:var(--navy);font-size:clamp(1.5rem,3vw,2.15rem);line-height:2.2;margin:.55em auto .6em;max-width:920px;letter-spacing:-.005em}
.nn-statement .mv{font-weight:800;text-decoration:none;white-space:nowrap;padding-bottom:3px;color:#97a2ac;cursor:pointer;
background:linear-gradient(var(--mc),var(--mc)) right bottom / 0% 3px no-repeat;transition:color .55s ease,background-size .6s cubic-bezier(.2,.7,.2,1),filter .2s}
.nn-statement .mv-civ{--mc:#C8A45C}.nn-statement .mv-imamat{--mc:#0F4D3A}.nn-statement .mv-mosque{--mc:#2F6E63}.nn-statement .mv-tabyin{--mc:#7B4423}
.nn-stwrap.in .mv{background-size:100% 3px}
.nn-stwrap.in .mv-civ{color:#a8843f;transition-delay:.10s}
.nn-stwrap.in .mv-imamat{color:#0F4D3A;transition-delay:.45s}
.nn-stwrap.in .mv-mosque{color:#2F6E63;transition-delay:.80s}
.nn-stwrap.in .mv-tabyin{color:#7B4423;transition-delay:1.15s}
.nn-statement .mv:hover,.nn-statement .mv.hot{filter:brightness(1.07);background-size:100% 7px !important}
/* sequence ribbon */
.nn-seq{position:relative;display:flex;justify-content:space-between;align-items:flex-start;max-width:660px;margin:40px auto 10px;padding:0 14px}
.nn-seqline{position:absolute;top:39px;right:34px;left:34px;height:2px;border-radius:2px;
background:linear-gradient(90deg,#7B4423,#2F6E63,#0F4D3A,#C8A45C);opacity:.4}
.nn-seqnode{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;width:90px;
opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.nn-stwrap.in .nn-seqnode.n-civ{opacity:1;transform:none;transition-delay:.10s}
.nn-stwrap.in .nn-seqnode.n-imamat{opacity:1;transform:none;transition-delay:.45s}
.nn-stwrap.in .nn-seqnode.n-mosque{opacity:1;transform:none;transition-delay:.80s}
.nn-stwrap.in .nn-seqnode.n-tabyin{opacity:1;transform:none;transition-delay:1.15s}
.nn-seqnode .nr{font-family:var(--fdisplay);font-size:.72rem;color:var(--soft);background:#FCF7EE;border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.nn-seqnode .nd{width:20px;height:20px;border-radius:50%;background:var(--c);border:3px solid #F2E9D8;
box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 45%,transparent),0 6px 14px -6px var(--c);transition:transform .2s,box-shadow .2s}
.nn-seqnode .nm{font-family:var(--fdisplay);font-weight:700;color:var(--navy);font-size:.94rem;white-space:nowrap}
.nn-seqnode:hover .nd,.nn-seqnode.hot .nd{transform:scale(1.35);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 40%,transparent),0 10px 20px -6px var(--c)}
.nn-seqnode:hover .nr,.nn-seqnode.hot .nr{border-color:var(--c);color:var(--navy)}
.nn-stlink{display:inline-flex;align-items:center;gap:7px;color:var(--navy);font-family:var(--fdisplay);font-weight:700;text-decoration:none;border:1.5px solid var(--line);padding:9px 20px;border-radius:12px;transition:border-color .2s,color .2s;margin-top:18px}
.nn-stlink:hover{border-color:var(--gold);color:var(--gold-d)}
.nn-stlink .ar{transition:transform .2s}.nn-stlink:hover .ar{transform:translateX(-4px)}
@media(max-width:560px){.nn-seq{max-width:340px}.nn-seqnode{width:74px}.nn-seqnode .nm{font-size:.82rem}.nn-seqline{right:28px;left:28px}}
/* ===== کاتالوگِ برنامهها (استودیو) ===== */
.nn-catsec{position:relative;overflow:hidden}
.nn-catsec .wrap{position:relative;z-index:1}
/* اتمسفرِ پسزمینه (موجِ صوتی) */
.nn-ambient{position:absolute;left:0;right:0;bottom:0;height:140px;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding:0 3%;opacity:.06;pointer-events:none;z-index:0}
.nn-ambient span{flex:1;background:linear-gradient(var(--teal),transparent);border-radius:5px 5px 0 0;height:22%;animation:nnamb 3.2s ease-in-out infinite}
.nn-ambient span:nth-child(2n){animation-duration:2.6s}.nn-ambient span:nth-child(3n){animation-duration:3.8s}
.nn-ambient span:nth-child(1){animation-delay:-.2s}.nn-ambient span:nth-child(2){animation-delay:-1.1s}.nn-ambient span:nth-child(3){animation-delay:-.6s}.nn-ambient span:nth-child(4){animation-delay:-1.8s}.nn-ambient span:nth-child(5){animation-delay:-.9s}.nn-ambient span:nth-child(6){animation-delay:-1.4s}.nn-ambient span:nth-child(7){animation-delay:-.3s}.nn-ambient span:nth-child(8){animation-delay:-2s}.nn-ambient span:nth-child(9){animation-delay:-.7s}.nn-ambient span:nth-child(10){animation-delay:-1.6s}.nn-ambient span:nth-child(11){animation-delay:-.5s}.nn-ambient span:nth-child(12){animation-delay:-1.2s}
@keyframes nnamb{0%,100%{height:18%}50%{height:78%}}
/* داشبورد + فیلتر */
.nn-dash{display:inline-flex;align-items:center;gap:26px;margin:2px 0 16px;padding:11px 24px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.nn-stat{display:flex;flex-direction:column;align-items:center;line-height:1}
.nn-stat b{font-family:var(--fdisplay);font-weight:800;font-size:1.55rem;color:#fff}
.nn-stat span{font-size:.76rem;color:#9fb6c6;margin-top:5px}
.nn-stat.live{flex-direction:row;gap:7px;align-items:center}
.nn-stat.live span{margin:0;color:var(--teal);font-size:.86rem;font-family:var(--fdisplay)}
.nn-stat.live .dot{width:9px;height:9px;border-radius:50%;background:var(--teal);animation:nnpulse 2s infinite}
.nn-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:4px}
.ftab{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);color:#c3d3de;font-family:var(--fdisplay);font-size:.88rem;padding:7px 15px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ftab i{font-style:normal;font-size:.95rem}
.ftab:hover{border-color:rgba(42,160,196,.55);color:#eaf3f7}
.ftab.active{background:linear-gradient(135deg,var(--teal),var(--teal-d));border-color:transparent;color:#fff}
/* گرید */
.nn-catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.nn-tile{position:relative;aspect-ratio:1/1;border-radius:20px;display:block;text-decoration:none;perspective:1000px;transition:opacity .3s,filter .3s}
.nn-tile.featured{grid-column:span 2;grid-row:span 2}
.nn-tin{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#0b2b45;
transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .3s;
box-shadow:0 16px 40px -30px rgba(0,0,0,.7)}
.nn-tile:hover .nn-tin{box-shadow:0 36px 64px -28px rgba(0,0,0,.8)}
.nn-timg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);z-index:0}
.nn-tile:hover .nn-timg{transform:scale(1.05)}
/* براقیِ متحرکِ عمق (glare) */
.nn-tin::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s;
background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.16),transparent 60%);mix-blend-mode:soft-light}
.nn-tile:hover .nn-tin::after{opacity:1}
/* حلقهی هاور */
.nn-tile::after{content:"";position:absolute;inset:0;z-index:5;border-radius:20px;box-shadow:inset 0 0 0 0 var(--ac);transition:box-shadow .28s;pointer-events:none}
.nn-tile:hover::after{box-shadow:inset 0 0 0 3px var(--ac)}
/* بَج نوع */
.nn-badge{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:var(--ac);color:#fff;font-family:var(--fdisplay);font-weight:700;font-size:.82rem;padding:5px 13px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(0,0,0,.55)}
.nn-badge i{font-style:normal;font-size:.95rem;line-height:1}
/* play */
.nn-play{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:3;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--navy);display:grid;place-items:center;font-size:1.1rem;padding-right:3px;box-shadow:0 10px 26px -8px rgba(0,0,0,.55);transition:transform .25s,background .25s}
.nn-tile:hover .nn-play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
.featured .nn-play{width:74px;height:74px;font-size:1.5rem}
/* نوارِ اطلاعاتِ شیشهای */
.nn-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;color:#fff;background:rgba(4,16,27,.42);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-top:1px solid rgba(255,255,255,.09)}
.nn-cnt{display:inline-flex;align-items:center;gap:8px;font-family:var(--fdisplay);font-size:.9rem;white-space:nowrap}
.nn-cnt b{font-size:1.16rem;font-weight:800}
.nn-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--fdisplay);font-weight:700;font-size:.84rem;color:#fff;opacity:.72;transition:opacity .25s;white-space:nowrap}
.nn-more i{font-style:normal;transition:transform .2s}
.nn-tile:hover .nn-more{opacity:1}.nn-tile:hover .nn-more i{transform:translateX(-4px)}
/* اکولایزر */
.nn-eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;color:#fff}
.nn-eq i{width:3px;height:5px;background:currentColor;border-radius:2px;animation:nneq .9s ease-in-out infinite}
.nn-eq i:nth-child(2){animation-delay:.15s}.nn-eq i:nth-child(3){animation-delay:.3s}.nn-eq i:nth-child(4){animation-delay:.45s}.nn-eq i:nth-child(5){animation-delay:.6s}.nn-eq i:nth-child(6){animation-delay:.2s}.nn-eq i:nth-child(7){animation-delay:.5s}
.nn-eq.big{height:26px;gap:3px}.nn-eq.big i{width:4px}
@keyframes nneq{0%,100%{height:4px}50%{height:100%}}
/* اسکنلاینِ ویدیو + Ken-Burns */
.nn-scan{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);opacity:.35;mix-blend-mode:overlay;animation:nnscan 8s linear infinite}
@keyframes nnscan{to{background-position-y:8px}}
.t-mahi .nn-timg,.t-barmiayad .nn-timg{animation:nnkb 16s ease-in-out infinite alternate}
@keyframes nnkb{0%{transform:scale(1.03)}100%{transform:scale(1.11) translate(-1.5%,-1%)}}
.nn-tile:hover.t-mahi .nn-timg,.nn-tile:hover.t-barmiayad .nn-timg{animation-play-state:paused;transform:scale(1.08)}
/* موتیفِ نوشتار (قلم) */
.nn-pen{position:absolute;bottom:66px;right:18px;z-index:2;width:64px;height:2px;pointer-events:none}
.nn-pen i{display:block;height:2px;background:rgba(255,255,255,.65);border-radius:2px;transform-origin:right;animation:nnpen 4s ease-in-out infinite}
@keyframes nnpen{0%{transform:scaleX(0);opacity:.9}45%{transform:scaleX(1);opacity:.9}70%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
/* موتیفِ پرونده (زبانهی فولدر) */
.nn-folder{position:absolute;top:0;right:30px;z-index:2;width:72px;height:15px;background:var(--ac);border-radius:0 0 9px 9px;box-shadow:0 6px 12px -6px rgba(0,0,0,.5)}
/* برنامهی شاخصِ پریمیوم */
.nn-feat{position:absolute;left:16px;right:16px;bottom:62px;z-index:3;display:flex;flex-direction:column;gap:11px}
.nn-feat-top{display:flex;align-items:center;gap:13px}
.nn-tag{color:#eef5f9;font-family:var(--fdisplay);font-size:1.08rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.nn-plist{display:flex;align-items:center;gap:10px}
.nn-plist .pl-l{color:#c7d6e0;font-size:.8rem;font-family:var(--fdisplay)}
.nn-plist .pl-d{display:flex;gap:7px}
.nn-plist .pl-d i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4)}
.nn-plist .pl-d i:first-child{background:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 35%,transparent)}
/* فیلتر: کمرنگ/برجسته */
.nn-tile.dim{opacity:.3;filter:grayscale(.4)}
.nn-tile.pop::after{box-shadow:inset 0 0 0 3px var(--ac)}
.nn-tile.pop .nn-tin{box-shadow:0 30px 60px -26px rgba(0,0,0,.8)}
@media(max-width:880px){.nn-catalog{grid-template-columns:repeat(2,1fr)}.nn-tile.featured{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}}
@media(max-width:520px){.nn-catalog{grid-template-columns:1fr}.nn-tile.featured{grid-column:auto;grid-row:auto;aspect-ratio:1/1}.nn-dash{gap:18px;padding:10px 16px}}
/* ===== سرمهایسازی: منظومهی فکری + کاتالوگ ===== */
.nn-manz{background:
radial-gradient(60% 60% at 50% 0%,rgba(200,164,92,.10),transparent 60%),
radial-gradient(50% 50% at 50% 100%,rgba(42,160,196,.10),transparent 60%),
linear-gradient(180deg,#0c2c47 0%,#071d2f 62%,#05131f 100%)}
.nn-manz .nn-orbit{color:#8fb2c8;opacity:.14}
.nn-manz .eyebrow{color:var(--teal)}
.nn-manz .nn-statement{color:#cddae5}
.nn-statement .mv{color:#8394a1}
.nn-statement .mv-civ{--mc:#E7C173}.nn-statement .mv-imamat{--mc:#5FB894}.nn-statement .mv-mosque{--mc:#57B6A5}.nn-statement .mv-tabyin{--mc:#CE9E6E}
.nn-stwrap.in .mv-civ{color:#E7C173}
.nn-stwrap.in .mv-imamat{color:#5FB894}
.nn-stwrap.in .mv-mosque{color:#57B6A5}
.nn-stwrap.in .mv-tabyin{color:#CE9E6E}
.nn-manz .nn-seqnode .nm{color:#eaf3f7}
.nn-manz .nn-seqnode .nr{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#c7d6e0}
.nn-manz .nn-seqnode .nd{border-color:#0b243a}
.nn-manz .nn-seqline{opacity:.55}
.nn-manz .nn-stlink{border-color:rgba(255,255,255,.32);color:#eaf3f7}
.nn-manz .nn-stlink:hover{border-color:var(--gold);color:#E7C173}
/* کاتالوگ سرمهای */
.nn .sec.nn-catsec{background:
radial-gradient(70% 50% at 50% 0%,rgba(42,160,196,.10),transparent 60%),
linear-gradient(180deg,#0b2b45 0%,#071d2f 100%)}
.nn-catsec h2.t{color:#fff}
.nn-catsec .lead{color:#c3d3de}
.nn-catsec .nn-pulse{color:var(--teal);background:rgba(42,160,196,.12);border-color:rgba(42,160,196,.35)}
/* ===== ادامهی مسیر: کوچکتر و مینیمال ===== */
.nn-final{padding:54px 0 !important}
.nn-final-lead{color:#c3d3de;max-width:600px;margin:12px auto 26px;line-height:1.95;font-size:1.02rem}
.nn-chanbtn{max-width:300px !important;border-radius:16px !important;box-shadow:0 18px 40px -22px #000 !important}
.nn-handle{margin-top:16px;font-family:var(--fdisplay);font-size:.94rem;color:#9fb6c6;letter-spacing:0}
.nn-handle span{color:var(--teal);direction:ltr;unicode-bidi:isolate}
/* ===== دکمهی کانال (CSS، بدونِ هالهی سفید) ===== */
.nn-cbtn{display:inline-flex;align-items:center;gap:14px;max-width:430px;width:100%;box-sizing:border-box;
background:linear-gradient(135deg,#103254,#0a2439);border:1px solid rgba(42,160,196,.35);border-radius:999px;
padding:11px 15px 11px 11px;text-decoration:none;position:relative;isolation:isolate;
box-shadow:0 18px 40px -22px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.04);
transition:transform .26s cubic-bezier(.2,.7,.2,1),box-shadow .26s,border-color .26s}
.nn-cbtn::before{content:"";position:absolute;inset:-3px;border-radius:999px;z-index:-1;filter:blur(12px);opacity:0;
background:radial-gradient(60% 100% at 20% 50%,rgba(42,160,196,.55),transparent 70%);transition:opacity .26s}
.nn-cbtn:hover{transform:translateY(-3px) scale(1.012);border-color:rgba(42,160,196,.75);
box-shadow:0 26px 52px -20px rgba(42,160,196,.5),0 18px 40px -22px #000}
.nn-cbtn:hover::before{opacity:1}
.nn-cbtn:active{transform:translateY(-1px) scale(.997)}
.nn-cbtn-logo{flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#08283f;
border:2px solid rgba(42,160,196,.45);display:grid;place-items:center}
.nn-cbtn-logo img{width:100%;height:100%;object-fit:cover;display:block}
.nn-cbtn-div{width:1px;align-self:stretch;margin:8px 0;background:linear-gradient(rgba(42,160,196,0),rgba(42,160,196,.55),rgba(42,160,196,0))}
.nn-cbtn-text{display:flex;flex-direction:column;gap:3px;flex:1;text-align:right;min-width:0}
.nn-cbtn-text b{font-family:var(--fdisplay);font-weight:800;font-size:1.14rem;color:#fff;line-height:1.25;white-space:nowrap}
.nn-cbtn-text b .hl{color:var(--teal)}
.nn-cbtn-text i{font-style:normal;font-size:.8rem;color:#9fb6c6;white-space:nowrap}
.nn-cbtn-go{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(135deg,#2AA0C4,#17788f);box-shadow:0 8px 18px -6px rgba(42,160,196,.7);
transition:transform .26s;animation:cbtnpulse 2.6s ease-in-out infinite}
.nn-cbtn-go svg{width:20px;height:20px}
.nn-cbtn:hover .nn-cbtn-go{transform:translateX(-4px) scale(1.08);animation:none}
@keyframes cbtnpulse{0%,100%{box-shadow:0 8px 18px -6px rgba(42,160,196,.7),0 0 0 0 rgba(42,160,196,.45)}50%{box-shadow:0 8px 18px -6px rgba(42,160,196,.7),0 0 0 9px rgba(42,160,196,0)}}
@media(max-width:430px){.nn-cbtn-text b{font-size:1rem;white-space:normal}.nn-cbtn{gap:10px}}
/* ===== فاصلهی بالای صفحه بهاندازهی هدرِ ثابت ===== */
main.nn{padding-top:110px}
@media(max-width:768px){ main.nn{padding-top:86px} }
/* --- navbar single-line fix --- */
.nav-main{flex-wrap:nowrap}
.nav-main>li{flex:0 0 auto}
.nav-main a{white-space:nowrap}