/* Import Google Fonts - Using 'Orbitron' for heading, 'Share Tech Mono' for a techy feel, and 'Tajawal' for Arabic body text */
/* تأكد من إضافة هذا الرابط في قسم في ملف HTML الخاص بك */
/* */
/* */
/* */
/* General Body Styles - A Cosmic Canvas */
body {
font-family: 'Tajawal', sans-serif; /* للغة العربية */
margin: 0;
padding: 0;
/* خلفية متدرجة عميقة جداً مع نقاط نجمية صغيرة (يمكن استخدام صورة خلفية أو SVG أكثر تعقيداً) */
background: radial-gradient(circle at top left, #1a0a2a 0%, #0a0510 100%); /* بنفسجي داكن جداً إلى أسود عميق */
color: #e0f2f4; /* لون نص فاتح كنجوم متلألئة */
direction: rtl;
text-align: right;
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative; /* للسماح بتأثير النجوم */
}
/* Optional: Subtle Starfield Effect (CSS-only for simplicity, JS for more complex) */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url('data:image/svg+xml;utf8,') repeat;
opacity: 0.1; /* خفيف جداً */
z-index: -1; /* خلف المحتوى */
animation: starfieldMove 200s linear infinite;
}
@keyframes starfieldMove {
from { background-position: 0 0; }
to { background-position: 100% 100%; }
}
/* Header Styles - Floating Control Panel */
header {
background: rgba(40, 20, 60, 0.8); /* لوح تحكم زجاجي شفاف بنفسجي داكن */
padding: 20px 50px; /* بادينج مناسب */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 40px rgba(100, 50, 150, 0.4); /* ظل عميق مع توهج بنفسجي ناعم */
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(15px); /* ضبابية قوية جداً */
-webkit-backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(150, 100, 200, 0.2); /* حدود متوهجة قليلاً */
border-radius: 0 0 20px 20px; /* حواف دائرية سفلية */
}
header h1 {
font-family: 'Orbitron', sans-serif; /* خط مستقبلي */
margin: 0;
color: #8affc2; /* لون أخضر-أزرق نيون مشع */
font-size: 2em; /* حجم اسم الموقع كما طلبت */
text-shadow: 0 0 15px rgba(138, 255, 194, 0.8), 0 0 25px rgba(138, 255, 194, 0.6); /* توهج نيون */
letter-spacing: 4px; /* تباعد أكبر للحروف */
font-weight: 700;
transition: all 0.5s ease;
}
header h1:hover {
transform: scale(1.05);
color: #e0ffee; /* توهج أكثر عند التحويم */
text-shadow: 0 0 20px rgba(138, 255, 194, 1), 0 0 35px rgba(138, 255, 194, 0.8);
}
header ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 15px; /* مسافة أقل بين الأزرار */
}
header button {
font-family: 'Share Tech Mono', monospace; /* خط تقني */
background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%); /* تدرج أزرق-بنفسجي متوهج */
color: #e0f2f4; /* لون نص فاتح جداً */
border: none;
padding: 10px 25px; /* تصغير الأزرار قليلاً */
border-radius: 25px; /* حواف دائرية */
cursor: pointer;
font-size: 1em; /* تصغير حجم خط الأزرار */
font-weight: bold;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(106, 17, 203, 0.6); /* ظل مع توهج خفيف */
text-transform: uppercase;
letter-spacing: 1.5px;
position: relative;
overflow: hidden;
}
header button::before { /* تأثير ضوئي عند التحويم */
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transform: skewX(-20deg);
transition: all 0.7s ease-in-out;
}
header button:hover::before {
left: 100%;
}
header button:hover {
transform: translateY(-4px) scale(1.08);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 20px rgba(106, 17, 203, 0.8); /* توهج أقوى عند التحويم */
background: linear-gradient(45deg, #2575fc 0%, #6a11cb 100%); /* عكس التدرج */
}
/* Section Styles - Cosmic Display Area */
.sec1 {
padding: 120px 40px; /* بادينج أكبر لإعطاء مساحة */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
box-sizing: border-box;
}
.sec1 h1 {
font-family: 'Orbitron', sans-serif; /* خط مستقبلي */
color: #8affc2; /* نفس لون اسم الموقع */
font-size: 4.5em; /* حجم العنوان الرئيسي */
text-shadow: 0 0 20px rgba(138, 255, 194, 0.8), 0 0 35px rgba(138, 255, 194, 0.6); /* توهج نيون */
margin-bottom: 90px; /* مسافة أكبر أسفل العنوان */
width: 100%;
text-align: center;
letter-spacing: 5px; /* تباعد كبير للحروف */
font-weight: 800;
}
/* Card Holder for Grid Layout - Constellation of Data */
.card-holder {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* كارد أعرض قليلاً */
/* **المسافة بين الكروت: شيء من عالم آخر!** */
gap: 150px; /* مسافة ضخمة جداً على الشاشات الكبيرة */
padding: 60px; /* بادينج أكبر حول الشبكة */
max-width: 1800px; /* زيادة أقصى عرض للشبكة */
margin: 0 auto;
justify-items: center;
}
/* Individual Card Styles - Floating Data Modules */
.card {
/* تأثير "Aero Glass" مع عمق */
background: rgba(255, 255, 255, 0.03); /* شفافية ضعيفة جداً */
border: 1px solid rgba(200, 200, 255, 0.1); /* حدود شفافة متوهجة قليلاً */
backdrop-filter: blur(20px); /* ضبابية شديدة جداً */
-webkit-backdrop-filter: blur(20px);
border-radius: 30px; /* حواف أكثر دائرية */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(100, 50, 150, 0.3); /* ظل عميق مع توهج خفيف */
padding: 40px; /* بادينج أكبر داخل الكارد */
width: 100%;
max-width: 450px; /* زيادة أقصى عرض للكارد */
text-align: center;
overflow: hidden;
position: relative; /* لإضافة تأثيرات داخلية */
opacity: 0;
transform: translateY(150px) scale(0.9); /* ظهور من مسافة أبعد وحجم أصغر */
transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), transform 1.2s cubic-bezier(0.23, 1, 0.32, 1); /* انتقال أبطأ وأكثر دراماتيكية */
/* *** تأكدنا من عدم وجود pointer-events: none; هنا *** */
}
/* Internal Glow Effect for Cards */
.card::before {
content: '';
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
background: radial-gradient(circle at center, rgba(138, 255, 194, 0.05) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: -1;
pointer-events: none; /* مهم جداً: جعلها لا تستقبل أحداث النقر */
}
.card:hover::before {
opacity: 1; /* يظهر التوهج الداخلي عند التحويم */
}
/* Animated Border Glow on Hover */
.card::after {
content: '';
position: absolute;
inset: -2px; /* يغطي الحدود تماماً */
border: 2px solid transparent;
border-image: linear-gradient(45deg, #8affc2, #6a11cb, #2575fc) 1; /* تدرج لوني للحدود */
border-radius: 32px; /* أكبر قليلاً من border-radius للـ card */
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask-composite: exclude; /* لدعم المتصفحات */
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none; /* مهم جداً: جعلها لا تستقبل أحداث النقر عندما تكون شفافة */
}
.card:hover::after {
opacity: 1; /* يظهر التوهج عند التحويم */
/* pointer-events: auto; هنا ليست ضرورية جداً لأنها حدود، لكن لا تضر */
}
/* Class added by JavaScript when card is in view */
.card.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.card img {
width: 100%;
height: 300px; /* ارتفاع أكبر للصور لجذب الانتباه */
object-fit: cover;
border-radius: 25px; /* حواف دائرية أكبر للصور */
margin-bottom: 30px;
box-shadow: 0 10px 25px rgba(0,0,0,0.45); /* ظل أقوى للصور */
cursor: pointer; /* تأكيد أن المؤشر يتغير عند الصورة */
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* حركة نطاطية عند التحويم */
}
.card img:hover {
transform: scale(1.1); /* تكبير أكبر عند التحويم */
box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}
.card h2 {
color: #e0f2f4; /* لون نص فاتح */
margin: 18px 0;
font-size: 2.3em; /* حجم خط أكبر */
text-shadow: 0 0 10px rgba(224, 242, 244, 0.4); /* توهج نص خفيف */
font-weight: 700;
}
.card h2:first-of-type {
font-family: 'Orbitron', sans-serif; /* خط مستقبلي لاسم المنتج */
color: #8affc2; /* لون نيون أخضر-أزرق لاسم المنتج */
font-size: 2.8em; /* اسم المنتج أكبر وأكثر بروزاً */
font-weight: bold;
text-shadow: 0 0 20px rgba(138, 255, 194, 0.8), 0 0 30px rgba(138, 255, 194, 0.6);
}
.card h2:last-of-type {
font-family: 'Share Tech Mono', monospace; /* خط تقني للسعر */
color: #b3cde0; /* أزرق فاتح للسعر */
font-size: 2.5em; /* حجم سعر أكبر */
font-weight: bold;
text-shadow: 0 0 15px rgba(179, 205, 224, 0.5);
}
.card p {
color: #b0c4d6; /* لون نص فاتح للوصف */
font-size: 1.2em; /* حجم خط الوصف أكبر قليلاً */
line-height: 1.8; /* تباعد أسطر أكبر */
margin-bottom: 35px; /* مسافة أكبر أسفل الوصف */
text-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.card a {
display: inline-block;
background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%); /* نفس تدرج الأزرار العلوية */
color: #e0f2f4;
text-decoration: none;
padding: 15px 35px; /* حجم بادينج أكبر */
border-radius: 30px;
font-size: 1.1em; /* حجم خط مناسب */
font-weight: bold;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 6px 15px rgba(0,0,0,0.4), 0 0 10px rgba(106, 17, 203, 0.6);
text-transform: uppercase;
letter-spacing: 1.2px;
position: relative;
overflow: hidden;
/* **** أهم التعديلات هنا لزر الحذف **** */
z-index: 10; /* تأكد أنه في المقدمة ضمن البطاقة */
pointer-events: auto; /* مهم جداً: التأكد أنه يستقبل أحداث المؤشر */
cursor: pointer; /* مهم جداً: التأكد من تغير شكل المؤشر ليد */
}
.card a::before { /* نفس تأثير الضوء للأزرار */
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transform: skewX(-20deg);
transition: all 0.7s ease-in-out;
}
.card a:hover::before {
left: 100%;
}
.card a:hover {
background: linear-gradient(45deg, #2575fc 0%, #6a11cb 100%); /* عكس التدرج */
transform: translateY(-5px) scale(1.1);
box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 25px rgba(106, 17, 203, 0.9);
}
/* --- Image Modal Styles - Interstellar Viewscreen --- */
.image-modal {
display: none; /* هذا السطر مهم جداً لجعله يختفي تماماً من تدفق الصفحة */
position: fixed;
z-index: 2000; /* تأكد أنه أعلى من كل شيء آخر عند الظهور */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.98);
justify-content: center;
align-items: center;
animation: fadeIn 0.6s ease-out;
}
/* كلاس لتفعيل عرض المودال فقط عند الحاجة */
.image-modal.active {
display: flex;
}
.modal-content {
margin: auto;
display: block;
max-width: 90vw;
max-height: 90vh;
border-radius: 25px; /* حواف دائرية أكبر */
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.9), 0 0 50px rgba(138, 255, 194, 0.7); /* ظل عميق مع توهج نيون */
transform: scale(0.7); /* أنيميشن تكبير من حجم أصغر */
animation: zoomIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
object-fit: contain;
border: 2px solid #8affc2; /* حدود نيون */
}
.close-modal {
position: absolute;
top: 35px; /* مسافة أكبر */
right: 50px; /* مسافة أكبر */
color: #fff;
font-size: 60px; /* حجم كبير جداً لزر الإغلاق */
font-weight: bold;
transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 35px rgba(255, 255, 255, 0.6); /* توهج ناعم */
}
.close-modal:hover,
.close-modal:focus {
color: #8affc2; /* يتوهج بلون النيون عند التحويم */
text-shadow: 0 0 25px rgba(138, 255, 194, 1), 0 0 45px rgba(138, 255, 194, 0.8);
transform: scale(1.1);
}
/* Animations for Modal */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes zoomIn {
from { transform: scale(0.5); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* Media Queries for responsiveness */
@media (max-width: 1200px) { /* شاشات أكبر من التابلت بقليل */
.sec1 h1 {
font-size: 3.8em;
letter-spacing: 4px;
}
.card-holder {
gap: 100px; /* تقليل المسافة قليلاً */
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
padding: 50px;
}
.card {
max-width: 400px;
}
}
@media (max-width: 992px) { /* شاشات التابلت الكبيرة */
header {
padding: 18px 30px;
}
header h1 {
font-size: 1.8em;
letter-spacing: 3px;
}
header button {
padding: 8px 20px;
font-size: 0.9em;
}
.sec1 {
padding: 100px 20px;
}
.sec1 h1 {
font-size: 3em;
margin-bottom: 70px;
letter-spacing: 3px;
}
.card-holder {
gap: 70px; /* مسافة متوسطة على التابلت */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding: 30px;
}
.card {
padding: 35px;
width: 85%; /* زيادة العرض على التابلت */
max-width: none; /* إزالة الحد الأقصى للعرض */
margin: 0 auto; /* للتوسيط */
}
.card img {
height: 250px;
}
.card h2 {
font-size: 2em;
}
.card h2:first-of-type {
font-size: 2.4em;
}
.card h2:last-of-type {
font-size: 2.2em;
}
.card p {
font-size: 1.1em;
}
.card a {
padding: 12px 30px;
font-size: 1em;
}
}
@media (max-width: 768px) { /* شاشات التابلت الصغيرة / الجوالات الكبيرة */
header {
flex-direction: column; /* الأزرار تحت العنوان */
gap: 10px;
padding: 15px 15px; /* تقليل البادينج الجانبي أكثر */
}
header h1 {
font-size: 1.6em;
text-align: center;
margin-bottom: 5px;
letter-spacing: 2px;
}
header ul {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
header button {
padding: 7px 18px;
font-size: 0.85em;
}
.sec1 {
padding: 80px 10px; /* تقليل البادينج الجانبي أكثر للقسم */
}
.sec1 h1 {
font-size: 2.5em;
margin-bottom: 60px;
letter-spacing: 2px;
}
.card-holder {
gap: 40px; /* مسافة مناسبة للجوالات */
grid-template-columns: 1fr; /* عمود واحد */
padding: 10px; /* تقليل البادينج الجانبي أكثر لحامل البطاقات */
}
.card {
padding: 30px;
width: 95%; /* أوسع بكثير */
max-width: none; /* إزالة الحد الأقصى للعرض للسماح بالتمدد */
margin: 0 auto; /* للتوسيط */
}
.card img {
height: 200px;
}
.card h2 {
font-size: 1.8em;
}
.card h2:first-of-type {
font-size: 2em;
}
.card h2:last-of-type {
font-size: 1.8em;
}
.card p {
font-size: 1em;
}
.card a {
padding: 10px 25px;
font-size: 1em;
}
.close-modal {
top: 20px;
right: 30px;
font-size: 45px;
}
}
@media (max-width: 480px) { /* الجوالات الصغيرة */
.sec1 h1 {
font-size: 2em;
margin-bottom: 40px;
}
.card-holder {
gap: 30px; /* مسافة أقل قليلاً للجوالات الصغيرة جداً */
padding: 5px; /* تقليل البادينج الجانبي جداً لحامل البطاقات */
}
.card {
padding: 25px;
width: 98%; /* أقرب للحافة */
max-width: none;
}
.card img {
height: 180px;
}
.card h2 {
font-size: 1.5em;
}
.card h2:first-of-type {
font-size: 1.7em;
}
.card h2:last-of-type {
font-size: 1.5em;
}
.card p {
font-size: 0.9em;
}
.card a {
padding: 8px 20px;
font-size: 0.9em;
}
.close-modal {
font-size: 35px;
}
}