<!-- ويدجت تواصل معزول لن يؤثر على السلة أو بقية الموقع -->
<style>
/* كل شيء داخل .berc فقط — لا تأثير خارج الودجت */
.berc{ --brand:#dc2626; --brand-2:#b91c1c; --border:#e2e8f0; --muted:#64748b; --text:#1e293b; --green:#22c55e; --green2:#16a34a; --bg:#fff; }
.berc, .berc *{ box-sizing:border-box; font-family:"Segoe UI",Tahoma,Arial,sans-serif; }
.berc__wrap{ max-width:720px; margin:8px auto 16px; padding:0 10px; }
.berc__card{ background:var(--bg); border:1px solid var(--border); border-radius:12px; box-shadow:0 4px 14px rgba(0,0,0,.06); padding:12px; }
.berc__head{ text-align:center; margin:0 0 10px; }
.berc__title{ margin:0; font-size:22px; color:var(--brand); font-weight:900; letter-spacing:.2px; }
.berc__sub{ margin:6px 0 0; color:var(--muted); font-size:13.5px; }
.berc__form{ display:grid; gap:10px; }
.berc__grid{ display:grid; gap:10px; grid-template-columns:1fr 1fr; }
@media (max-width:680px){ .berc__grid{ grid-template-columns:1fr; } }
.berc__label{ font-size:12.5px; font-weight:800; margin-bottom:4px; display:block; color:var(--text); }
.berc__req{ color:var(--brand); }
.berc__input, .berc__textarea{
width:100%; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text);
padding:10px; font-size:13.5px; outline:none; transition:border-color .2s, box-shadow .2s;
}
.berc__input:focus, .berc__textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px #fee2e2; }
.berc__textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.berc__hint{ font-size:12px; color:var(--muted); margin-top:4px; }
/* أزرار صغيرة جذابة داخل السكوب */
.berc__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; align-items:stretch; justify-content:center; }
.berc__btn, .berc__wh{
position:relative; flex:1 1 200px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-height:40px; padding:9px 12px; border:none; border-radius:10px; font-weight:900; font-size:13.5px; letter-spacing:.2px;
color:#fff; text-decoration:none; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.07);
transition:transform .06s ease, box-shadow .2s ease, filter .2s ease; overflow:hidden; isolation:isolate;
}
.berc__btn{ background:linear-gradient(135deg,#ef4444 0%,var(--brand) 60%,var(--brand-2) 100%); box-shadow:0 10px 22px rgba(220,38,38,.22); }
.berc__btn:hover{ transform:translateY(-1px); box-shadow:0 14px 26px rgba(220,38,38,.28); filter:saturate(1.05) }
.berc__btn:active{ transform:translateY(0); box-shadow:0 8px 16px rgba(220,38,38,.22) }
.berc__wh{ background:linear-gradient(135deg,#34d399 0%,var(--green) 65%,var(--green2) 100%); box-shadow:0 10px 22px rgba(34,197,94,.22); }
.berc__wh:hover{ transform:translateY(-1px); box-shadow:0 14px 26px rgba(34,197,94,.28); filter:saturate(1.05) }
.berc__wh:active{ transform:translateY(0); box-shadow:0 8px 16px rgba(34,197,94,.22) }
.berc__btn::after, .berc__wh::after{
content:""; position:absolute; inset:-60% -20%;
background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
transform:translateX(-200%); opacity:.0; pointer-events:none;
}
.berc__btn:hover::after, .berc__wh:hover::after{ animation:berc-shine 1.1s ease; opacity:.9 }
@keyframes berc-shine{ to{ transform:translateX(200%) } }
.berc__ico{ inline-size:16px; block-size:16px; display:block; }
@media (max-width:420px){
.berc__wrap{ padding:0 8px }
.berc__card{ padding:12px }
.berc__btn, .berc__wh{ min-height:38px; padding:8px 10px; font-size:13px }
.berc__input, .berc__textarea{ padding:10px; font-size:13px }
}
</style>
<header class="berc__head">
تواصل معنا
أرسل رسالتك عبر النموذج أو تواصل على واتساب مباشرة.
<form class="berc__form" action="https://formsubmit.co/
[email protected]" method="POST">
<!-- FormSubmit -->
<input type="hidden" name="_captcha" value="false" />
<input type="hidden" name="_template" value="table" />
<input type="hidden" name="_subject" value="رسالة جديدة من موقع برلين" />
<input type="hidden" name="_next" value="#" />
<input type="text" name="_honey" style="display:none" />
<input class="berc__input" id="berc-name" name="name" required placeholder="مثال: سارة السبيعي" autocomplete="name" />
<input class="berc__input" id="berc-email" type="email" name="email" required placeholder="
[email protected]" autocomplete="email" dir="ltr" />
<input class="berc__input" id="berc-subject" name="subject" required placeholder="موضوع الرسالة" />
<input class="berc__input" id="berc-phone" name="phone" placeholder="05xxxxxxxx" inputmode="tel" dir="ltr" />
<textarea class="berc__textarea" id="berc-msg" name="message" required placeholder="اكتب رسالتك هنا..."></textarea>
* جميع الحقول المطلوبة يجب تعبئتها قبل الإرسال.
</form>
