@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Vazirmatn', sans-serif;
  background: linear-gradient(to bottom, #0a0a0a, #050505);
  color: #00f0ff;
  overflow-x: hidden;
}









header {
  position: sticky;
  top: 0;
  background-color: #0d0d0d;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 255, 255, 0.2);
}

header h1 {
  color: #00f0ff;
  font-weight: 700;
  font-size: 1.6rem;
  text-shadow: 0 0 10px #00f0ff;
}

.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: #00f0ff;
  cursor: pointer;
}

nav {
  position: relative;
}

.menu {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.menu li {
  position: relative;
}

.menu li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  padding: 8px 12px;
  transition: all 0.5s ease;
  position: relative;
  display: inline-block;
}

.menu li a::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: all 0.5s ease;
  border-radius: 8px;
  pointer-events: none;
}

.menu li a:hover {
  color: #00f0ff;
  text-shadow: 0 0 5px #00f0ff;
}

.menu li a:hover::before {
  border-color: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
}

/* زیرمنو */
.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #0d0d0d;
  border: 1px solid #00f0ff;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
  z-index: 1000;
  min-width: 300px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.has-submenu:hover .submenu {
  display: block;
}

.submenu li a {
  display: block;
  padding: 10px 15px;
  transition: all 0.5s ease;
  border-radius: 6px;
}

.submenu li a:hover {
  padding-right: 25px;
  background-color: rgba(0, 255, 255, 0.1);
  color: #00f0ff;
  text-shadow: 0 0 5px #00f0ff;
}

/* فلش کنار زیرمنو در همه حالات */
.has-submenu > a {
  position: relative;
  padding-left: 20px; /* جا برای فلش سمت چپ (rtl) */
}
.has-submenu > a .arrow {
  position: absolute;
  /* left: 5px;
  right: 80px; */
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: #00f0ff;
  transition: transform 0.5s ease;
  pointer-events: none;
  user-select: none;
}

/* وقتی زیرمنو بازه، فلش بچرخه */
.has-submenu:hover > a .arrow,
.has-submenu.open > a .arrow {
  transform: translateY(-50%) rotate(180deg);
}





/* موبایل */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}

nav {
position: relative;
z-index: 1001;
}

.menu {
flex-direction: column;
position: fixed;
top: 0;
right: -280px; /* کاملا خارج از صفحه */
width: 280px;
height: 100vh;
background-color: #0d0d0d;
padding: 60px 20px 20px;
transition: right 0.4s ease;
overflow-y: auto;
}

.menu.active {
right: 0;
}

.menu li {
margin-bottom: 15px;
}

/* زیرمنوهای موبایل: موقع hover نمایش نمیده، فقط با کلیک */
.has-submenu:hover .submenu {
display: none;
}

.has-submenu .submenu {
display: none;
position: static;
background: none;
border: none;
padding: 0;
margin: 0;
list-style: none;
}

.has-submenu.open .submenu {
display: block;
}

/* فلش در موبایل هم با چرخش هنگام باز بودن */
.has-submenu > a::after {
content: none; /* حذف فلش پیش‌فرض */
}
/* فلش سفارشی در موبایل قبلاً تعریف شده */

/* دکمه بستن منو */
.close-btn {
position: fixed;
top: 10px;
right: 280px; /* سمت راست داخل منو */
font-size: 1.8rem;
background: none;
border: none;
color: #00f0ff;
cursor: pointer;
display: none;
z-index: 1100;
}

.menu.active + .close-btn {
display: block;
}
}

/* دسکتاپ: دکمه بستن منو نباشه */
@media (min-width: 769px) {
.close-btn {
display: none !important;
}
}
@media (max-width: 768px) {
.menu {
right: -100%; /* منو کاملاً بیرون صفحه باشه وقتی بسته است */
}

.has-submenu > a .arrow {
position: relative;
right: 10px !important; 
font-size: 1rem;
transform: none !important;
pointer-events: none;
user-select: none;
}

}


/* ایکون های هدر */
.brand{
display: flex;
justify-content: center;
align-items: center;
}

.auth-icons{
/* border: 1px solid #00f0ff; */
margin-left: 10px;
padding: 10px;
}
.auth-icons a {
margin: 0 10px;
color: #00e0ff;
text-shadow: 0 0 5px #00e0ff;
text-decoration: none;
margin: 0 8px;
font-size: 1.4rem;
transition: transform 0.3s, color 0.3s;

}

.auth-icons a:hover {
color: #ffffff;
transform: scale(1.2);
}
.auth-icons a i {
margin-left: 5px;
}

.auth-icons a::title{
border-radius: 10px;
}


.tooltip {
position: relative;
cursor: pointer;
}

.tooltip::after {
content: attr(data-title);
position: absolute;
left: 25px;
transform: translateX(-50%);
background-color: #00e0ff;
color: black;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.1s;
font-size: 0.9rem;
transition: 0.5s;
}

.tooltip:hover::after {
opacity: 1;
}