* {
    font-family: 'Vazir', sans-serif;
}

body {
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
}

.search-box {
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-box:focus {
    box-shadow: 0 2px 15px rgba(0, 102, 204, 0.2);
    border-color: #0066cc;
}

.result-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* انیمیشن‌ها */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

/* استایل‌های موبایل */
@media (max-width: 768px) {
    .mobile-hidden {
display: none;
    }
    
    .mobile-menu {
transition: all 0.3s ease;
    }
    
    .mobile-menu.active {
transform: translateX(0);
    }
}

/* استایل‌های دسکتاپ */
@media (min-width: 769px) {
    .desktop-hidden {
display: none;
    }
}

/* استایل‌های دکمه‌ها */
.btn-primary {
    background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
    color: white;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0052a3 0%, #004080 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
}
.logo{
   max-height:300px;
   display: block;
   margin:auto;
   margin-top: 20vh!important;
}
.search-btn{
   width:48px;
}
/* استایل‌های فوتر */
footer {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}
.type-site { background-color: #dbeafe; color: #1e40af; }
.type-page { background-color: #dcfce7; color: #166534; }
.type-video { background-color: #fef3c7; color: #92400e; }
.type-book { background-color: #f3e8ff; color: #6b21a8; }
.type-music { background-color: #fce7f3; color: #9d174d; }
.adminlogin { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.login-box { 
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}
.search-box { 
    border-radius: 50px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.search-box:focus {
    box-shadow: 0 2px 15px rgba(0,102,204,0.2);
}
.result-card {
    transition: all 0.3s ease;
    border-radius: 10px;
}
.result-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.type-tab {
    transition: all 0.2s ease;
}
.type-tab.active {
    background-color: #dbeafe;
    color: #1e40af;
    font-weight: 600;
}
.pagination-link {
    transition: all 0.2s ease;
}
.pagination-link.active {
    background-color: #3b82f6;
    color: white;
}
.pagination-link.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

 .media-player {
     max-width: 800px;
     margin: 0 auto;
 }
 audio, video {
     width: 100%;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.1);
 }
 .download-btn {
     transition: all 0.3s ease;
 }
 .download-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 }
 .aparat-embed-container {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
     overflow: hidden;
     max-width: 100%;
     background: #000;
     border-radius: 10px;
     margin-bottom: 20px;
     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
 }
 .aparat-embed-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 0;
 }
 .aparat-logo {
     display: inline-block;
     background: #FF5722;
     color: white;
     padding: 2px 8px;
     border-radius: 4px;
     font-size: 12px;
     font-weight: bold;
     vertical-align: middle;
 }
.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.profile-image-upload {
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-image-upload:hover {
    transform: scale(1.05);
}

.stats-card {
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.tab-button {
    transition: all 0.3s ease;
}

.tab-button.active {
    border-bottom: 3px solid #667eea;
    color: #667eea;
    font-weight: 600;
}

/* Mobile App Style */
@media (max-width: 768px) {
    body {
padding-bottom: env(safe-area-inset-bottom);
    }
    
    .hero-section {
padding: 3rem 1rem !important;
min-height: auto;
    }
    
    .hero-section h1 {
font-size: 2rem !important;
margin-bottom: 1rem !important;
    }
    
    .hero-section p {
font-size: 1rem !important;
margin-bottom: 1.5rem !important;
    }
    
    .service-card {
margin-bottom: 1rem;
padding: 1.5rem !important;
border-radius: 1rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .service-card h3 {
font-size: 1.25rem !important;
margin-bottom: 0.75rem !important;
    }
    
    .service-card p {
font-size: 0.875rem !important;
margin-bottom: 1rem !important;
    }
    
    .service-card ul {
font-size: 0.8rem !important;
margin-bottom: 1rem !important;
    }
    
    .service-card a {
padding: 0.75rem !important;
font-size: 0.875rem !important;
    }
    
    .w-16.h-16 {
width: 3rem !important;
height: 3rem !important;
    }
    
    .w-16.h-16 i {
font-size: 1.25rem !important;
    }
    
    /* App-like bottom navigation */
    .mobile-bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
border-top: 1px solid #e5e7eb;
padding: 0.5rem 0;
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
z-index: 50;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    
    .mobile-bottom-nav nav {
display: flex;
justify-content: space-around;
align-items: center;
    }
    
    .mobile-bottom-nav a {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
color: #6b7280;
text-decoration: none;
font-size: 0.75rem;
transition: color 0.2s;
    }
    
    .mobile-bottom-nav a.active {
color: #667eea;
    }
    
    .mobile-bottom-nav a i {
font-size: 1.25rem;
margin-bottom: 0.25rem;
    }
    
    /* Safe area for content */
    .main-content {
padding-bottom: 5rem;
    }
    
    /* Card spacing */
    .grid {
gap: 1rem !important;
    }
    
    /* Button improvements */
    .service-card a {
border-radius: 0.75rem;
font-weight: 600;
    }
}

/* Desktop styles */
.service-card {
    transition: all 0.3s ease;
}

@media (min-width: 769px) {
    .service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }
}

.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.gradient-bg-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.gradient-bg-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.gradient-bg-4 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.gradient-bg-5 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.gradient-bg-6 {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

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

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

/* Hide desktop header on mobile */
@media (max-width: 768px) {
    header .desktop-hidden {
display: none !important;
    }
}
 .contact-card {
   transition: all 0.3s ease;
   border-top: 4px solid transparent;
}
.contact-card:hover {
   transform: translateY(-5px);
   border-top-color: #4f46e5;
   box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.map-container {
   height: 400px;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.form-input:focus {
   box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.gradient-bg {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.feature-card {
   transition: all 0.3s ease;
   border-left: 4px solid transparent;
}
.feature-card:hover {
   transform: translateY(-5px);
   border-left-color: #4f46e5;
   box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.timeline-item {
   position: relative;
   padding-right: 30px;
}
.timeline-item::before {
   content: '';
   position: absolute;
   right: 0;
   top: 0;
   width: 2px;
   height: 100%;
   background: #e5e7eb;
}
.timeline-item::after {
   content: '';
   position: absolute;
   right: -6px;
   top: 10px;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #4f46e5;
}
.auth-tabs {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   border-radius: 20px;
   overflow: hidden;
}

.tab-button {
   transition: all 0.3s ease;
}

.tab-button.active {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
}

.form-group {
   transition: all 0.3s ease;
}

.form-group:focus-within {
   transform: translateY(-2px);
}
.login {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Vazir', sans-serif;
}
.error {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Vazir', sans-serif;
}