:root {
	--bg: #1a222c;
	--bg-elevated: rgba(26, 34, 44, 0.75);
	--bg-elevated-hover: rgba(26, 34, 44, 0.95);
	--bg-solid: #1a222c;
	--text: #ffffff;
	--text-muted: #d8d8dc;
	--accent: #b0a4e3;
	--accent-contrast: #1a222c;
	--border: rgba(176, 164, 227, 0.35);
	--shadow: rgba(0, 0, 0, 0.25);
	--transition-duration: 500ms;
}

[data-theme="light"] {
	--bg: #f4f2fa;
	--bg-elevated: rgba(255, 255, 255, 0.75);
	--bg-elevated-hover: rgba(255, 255, 255, 0.95);
	--bg-solid: #ffffff;
	--text: #201a35;
	--text-muted: #4a4360;
	--accent: #6b56c2;
	--accent-contrast: #ffffff;
	--border: rgba(107, 86, 194, 0.35);
	--shadow: rgba(90, 70, 150, 0.15);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html, body {
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
}

body {
	font-family: 'Roboto', sans-serif;
	-ms-overflow-style: none;
	scrollbar-width: none;
	background-color: var(--bg);
	transition: background-color var(--transition-duration);
}

body::-webkit-scrollbar {
	display: none;
}

/* ===== Full section (مهم‌ترین تغییر) ===== */
.fullflex {
	display: flex;
	flex-direction: column;
	justify-content: center;   /* کارت‌ها عمودی وسط می‌شن */
	align-items: center;
	width: 100%;
	min-height: 100vh;
	position: relative;
	padding: 2rem 0;
}

#particles {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: var(--bg);
	transition: background-color var(--transition-duration);
}

#splash {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	color: var(--text);
	text-align: center;
	margin: auto;
	padding: 1.5rem 1rem;
}

#lang {
	position: absolute;
	top: 1%;
	right: 1%;
	margin: 0.5em;
	font-size: 1.5em;
}

#lang a {
	color: var(--text);
	font-variant: small-caps;
	text-decoration: none;
}

#name {
	display: inline;
	font-size: 2.2em;
	transition: var(--transition-duration);
	line-height: 1.2;
}

@media (min-width: 380px) { #name { font-size: 2.8em; } }
@media (min-width: 480px) { #name { font-size: 3.6em; } }
@media (min-width: 640px) { #name { font-size: 5em; } }
@media (min-width: 800px) { #name { font-size: 6.5em; } }

#name em {
	color: var(--accent);
	font-style: normal;
	transition: var(--transition-duration);
}

#name:hover { color: var(--accent); }
#name:hover em { color: var(--text); }

#roles p {
	font-size: 1.4em;
	margin-bottom: 0.7em;
	line-height: 1.5;
	text-align: center;
}

@media (min-width: 600px) { #roles p { font-size: 1.8em; } }

#roles span { transition: var(--transition-duration); }
#roles span:hover { color: var(--accent); }

#links { margin-bottom: 1.5em; }

#links p a i {
	color: var(--text);
	width: 1.6em;
	height: 1.6em;
	margin: 0 10px;
	padding: 10px;
	border-radius: 50%;
	border: 2px solid var(--accent);
	transition: var(--transition-duration);
}

#links p a i:hover {
	border: 2px solid var(--text);
	color: var(--accent);
	transform: rotate(30deg);
}

#internal_links p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8em 1.2em;
}

#internal_links p a {
	margin: 0;
	color: var(--text);
	font-size: 1.2em;
	text-underline-offset: 0.2em;
	text-decoration: underline var(--bg);
	transition: var(--transition-duration);
}

#internal_links p a:hover {
	color: var(--accent);
	text-decoration-color: var(--text);
}

@media (min-width: 600px) { #internal_links p a { font-size: 1.4em; } }

/* ===== Arrows (اصلاح‌شده) ===== */
/* ===== Arrows (نسخه نهایی و درست) ===== */
.arrows {
	position: absolute;
	inset: 0;                 /* کل سکشن رو می‌پوشونه */
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
}

.arrows .up {
	position: absolute;
	top: 1.2rem;
	left: 0;
	right: 0;
	text-align: center;
}

.arrows .down {
	position: absolute;
	bottom: 1.2rem;
	left: 0;
	right: 0;
	text-align: center;
}

.arrows a {
	pointer-events: auto;
}

.arrows i {
	padding: 0.6rem;
	color: var(--accent);
	animation-duration: 1s;
	animation-name: arrow_anim;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.7, 0, 0, .7);
}

@keyframes arrow_anim {
	50% {
		transform: scale(1.2) translateY(calc(var(--factor, 1) * 8px));
		color: var(--bg);
	}
}
/* ===== Card ===== */
.card {
	overflow: auto;
	margin: 0 auto;
	padding: 1.5em 1.2em;
	width: 92%;
	max-width: 720px;
	max-height: 85vh;
	color: var(--text);
	text-align: justify;
	text-align-last: center;
	background-color: var(--bg-solid);
	border-radius: 24px;
	border: 2px solid var(--accent);
	box-shadow: 0px 0px 15px 8px var(--shadow);
	transition: background-color var(--transition-duration), color var(--transition-duration);
}

.card :is(h1, h2) {
	text-align: center;
	margin-bottom: 1em;
	color: var(--accent);
	transition: var(--transition-duration);
}

.card h2 { margin: 0.5em; }

.card p {
	line-height: 1.6em;
	margin-bottom: 1.3em;
	transition: var(--transition-duration);
}

.card a { transition: var(--transition-duration); }

.card:hover :is(h1, h2) { color: var(--text); }
.card:hover p { color: var(--accent); }
.card:hover a { color: var(--text); }

/* جمله‌ی معرفی همیشه وسط‌چین */
.card > p:first-of-type {
	text-align: center !important;
	text-align-last: center !important;
}

/* ===== Columns ===== */
.columns {
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 1.5em;
	align-items: stretch;
}

.columns div { margin: 0; }
.columns i { margin: 0 0.25em 0.5em 0.25em; transition: var(--transition-duration); }
.columns i:hover { color: var(--accent); }

@media (min-width: 700px) {
	.columns { flex-direction: row; justify-content: space-between; align-items: center; }
	.columns div { margin: 1%; }
}

/* ===== List ===== */
.list {
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 1em;
	align-items: flex-start;
	margin-bottom: 1.5em;
	text-align: left;
}

.list p { margin: 0; text-align: left; }
.list a { color: var(--accent); }

.list a.list_link {
	padding: 0.5em 0.9em;
	margin: 0;
	text-decoration: none;
	color: var(--accent);
	border-radius: 5px;
	border: 2px solid var(--accent);
	transition: var(--transition-duration);
	display: inline-block;
}

.list a.list_link:hover {
	border-color: var(--text);
	background-color: var(--accent);
	color: var(--accent-contrast);
}

@media (min-width: 600px) {
	.list { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ===== Projects / Experience ===== */
.projects-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.3em;
	margin-top: 1.5em;
}

.project-card {
	position: relative;
	padding: 1.4em;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: 18px;
	transition:
		transform var(--transition-duration),
		border-color var(--transition-duration),
		box-shadow var(--transition-duration),
		background-color var(--transition-duration);
}

.project-card:hover {
	transform: translateY(-6px);
	border-color: var(--accent);
	background: var(--bg-elevated-hover);
	box-shadow: 0 10px 30px var(--shadow), 0 0 25px var(--border);
}

.project-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.project-card h2 {
	margin: 0;
	text-align: left;
	color: var(--text);
	font-size: 1.25em;
}

.project-github {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 50%;
	text-decoration: none;
	transition: var(--transition-duration);
	flex-shrink: 0;
}

.project-github:hover {
	color: var(--accent-contrast);
	background: var(--accent);
	transform: rotate(10deg) scale(1.08);
}

.project-description { margin-top: 1em; flex-grow: 1; }

.project-description p {
	margin-bottom: 1em;
	color: var(--text-muted);
	line-height: 1.6em;
	text-align: left;
}

.project-tech {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45em;
	margin: 0.5em 0 1.1em;
}

.project-tech span {
	padding: 0.3em 0.65em;
	color: var(--accent);
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 0.78em;
	transition: var(--transition-duration);
}

.project-tech span:hover {
	color: var(--text);
	border-color: var(--accent);
}

.project-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.5em 0.85em;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 8px;
	text-decoration: none;
	transition: var(--transition-duration);
	font-size: 0.95em;
}

.project-link:hover {
	color: var(--accent-contrast);
	background: var(--accent);
}

@media (min-width: 700px) {
	.projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em; }
	.project-card { min-height: 220px; }
}

/* ===== Language Switcher ===== */
#lang-switcher {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 9999;
}

.lang-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bg-elevated-hover);
	backdrop-filter: blur(8px);
	color: var(--accent);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 700;
	border: 1.5px solid var(--accent);
	box-shadow: 0 4px 20px var(--shadow);
	transition: all 0.3s ease;
}

.lang-btn:hover {
	background: var(--accent);
	color: var(--accent-contrast);
	transform: scale(1.1);
}

/* ===== Theme (Dark/Light) Switcher ===== */
#theme-switcher {
	position: fixed;
	bottom: 24px;
	right: 84px;
	z-index: 9999;
}

.theme-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bg-elevated-hover);
	backdrop-filter: blur(8px);
	color: var(--accent);
	border: 1.5px solid var(--accent);
	box-shadow: 0 4px 20px var(--shadow);
	transition: all 0.3s ease;
	cursor: pointer;
}

.theme-btn:hover {
	background: var(--accent);
	color: var(--accent-contrast);
	transform: scale(1.1);
}

@media (max-width: 600px) {
	#lang-switcher { bottom: 16px; right: 16px; }
	#theme-switcher { bottom: 16px; right: 76px; }
	.lang-btn, .theme-btn { width: 44px; height: 44px; font-size: 0.95rem; }
}

/* ===== RTL Support (Persian) ===== */
html[lang="fa"] {
	direction: rtl;
}

html[lang="fa"] body {
	font-family: 'Vazirmatn', 'Roboto', Tahoma, sans-serif;
}

html[lang="fa"] #roles p {
	direction: rtl;
	line-height: 1.7;
}

html[lang="fa"] .card p {
	text-align: right;
	text-align-last: right;
}

html[lang="fa"] .card > p:first-of-type {
	text-align: center !important;
	text-align-last: center !important;
}

html[lang="fa"] .card :is(h1, h2) {
	text-align: center;
}

html[lang="fa"] .list,
html[lang="fa"] .list p {
	text-align: right;
}

html[lang="fa"] .project-card h2,
html[lang="fa"] .project-description p {
	text-align: right;
}