:root {
    --primary: #d125eb;
    --accent: #5f0dda;
    --background: #1e293b;
    --text: #f9fafb;
    --card-bg: rgba(255,255,255,0.05);
    --nav-bg: rgba(30,41,59,0.95);
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; font-family:"Vazir",sans-serif; background:var(--background); color:var(--text); line-height:1.6; }

.main-content {
    background-color: var(--background);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.02),
        rgba(255,255,255,0.02) 5px,
        transparent 100px,
        transparent 50px
    );
}

.contact-form,
.socials {
    background-color: rgba(255,255,255,0.05); /* یا رنگ کارت قبلی ولی با alpha کم */
    backdrop-filter: blur(10px); /* اختیاری: برای شیشه‌ای شدن */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}


button {
    font-family: 'Vazir', sans-serif;
}

/* برای مرورگرهای مدرن */
::placeholder {
    font-family: 'Vazir', sans-serif;
}

/* برای مرورگرهای Webkit (کروم، سافاری) */
::-webkit-input-placeholder {
    font-family: 'Vazir', sans-serif;
}

/* برای مرورگر فایرفاکس */
::-moz-placeholder {
    font-family: 'Vazir', sans-serif;
}

/* برای مرورگر اینترنت اکسپلورر 10+ */
:-ms-input-placeholder {
    font-family: 'Vazir', sans-serif;
}

/* برای مرورگر Edge */
::-ms-input-placeholder {
    font-family: 'Vazir', sans-serif;
}


.container { width:92%; max-width:1100px; margin:0 auto; padding:20px; }


/* متن و تراز فرم در انگلیسی */
html[dir="ltr"] .contact h2,
html[dir="ltr"] .contact p,
html[dir="ltr"] .contact-form input,
html[dir="ltr"] .contact-form textarea,
html[dir="ltr"] .socials h3 {
    text-align: left;
}

/* آیکون و متن شبکه‌های اجتماعی */
html[dir="ltr"] .socials a {
    flex-direction: row; /* آیکون سمت چپ، متن سمت راست */
}

/* فرم کپچا و دکمه‌ها */
html[dir="ltr"] .g-recaptcha {
    justify-content: flex-start;
}

html[dir="rtl"] .g-recaptcha {
    justify-content: flex-end;
}

/* Contact Section */
.contact { padding:60px 0; }
.contact .container { display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; }
@media(max-width:880px) { .contact .container { grid-template-columns:1fr; } }

.contact h2 { font-size:26px; color:#fff; margin-bottom:12px; text-align:right; }
.contact p { color:#f9fafb; margin-bottom:18px; text-align:right; }

.success { background:#065f46; color:#ecfdf5; border:1px solid #bbf7d0; padding:12px; border-radius:10px; margin-bottom:16px; }
.error { background:#9f1239; color:#fff1f2; border:1px solid #fecaca; padding:12px; border-radius:10px; margin-bottom:16px; }

.contact-form { background: var(--card-bg); padding:24px; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,0.3); }
.contact-form input, .contact-form textarea {
    width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,0.2);
    border-radius:10px; margin-bottom:12px;
    background: rgba(255,255,255,0.05); color:#fff; font-size:14px;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline:none; border-color: var(--accent); box-shadow:0 4px 18px rgba(95,13,218,0.3);
}

.contact-form .btn {
    display:inline-block; background: var(--accent); color:#fff;
    padding:12px 18px; border-radius:10px; border:none;
    cursor:pointer; font-weight:600; transition:0.3s;
}
.contact-form .btn:hover { background:#fff; color: var(--primary); }

.g-recaptcha { display:flex; justify-content:flex-start; margin:12px 0 18px; transform: scale(0.92); transform-origin:0 0; }

.socials { background: var(--card-bg); padding:20px; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,0.3); margin-top:90px; }
.socials h3 { text-align:right; margin-bottom:12px; color:#fff; }
.socials a { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); transition:0.2s; margin-bottom:8px; }
.socials a i { width:34px; height:34px; border-radius:8px; background: rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; }
.socials a:hover { background: var(--accent); border-color:var(--accent); }


@media(max-width:768px){ .contact .container { display:block; } }


* {
  -webkit-tap-highlight-color: transparent;  
  -webkit-tap-highlight-color: rgba(0,0,0,0); 
  -webkit-focus-ring-color: rgba(0,0,0,0); 
  outline: none; 
}