@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&family=Playfair+Display:wght@600&display=swap');  
  
/* ضبط عام لجميع العناصر لضمان حساب المقاسات بدقة */  
* {  
 box-sizing: border-box;  
}  
  
:root {  
 --primary: #111111; /* أسود / رمادي داكن جداً */  
 --secondary: #333333; /* رمادي داكن */  
 --accent: #888888; /* رمادي فضي (للتوافق مع الهوية الجديدة) */  
 --bg-body: #f5f5f5; /* خلفية فاتحة */  
 --text-main: #222222;  
 --text-light: #666666;  
 --white: #ffffff;  
 --shadow: 0 10px 30px -10px rgba(0,0,0,0.1);  
}  
  
body {  
 font-family: 'Tajawal', sans-serif;  
 background-color: var(--bg-body);  
 color: var(--text-main);  
 margin: 0;  
 direction: rtl;  
 line-height: 1.8;  
}  
  
/* --- الهيدر (Header) --- */  
header {  
 background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);  
 color: var(--white);  
 padding: 80px 20px;  
 text-align: center;  
 position: relative;  
 overflow: hidden;  
}  
  
header h1 {  
 font-size: 3rem;  
 margin: 0;  
 font-weight: 800;  
 letter-spacing: -1px;  
}  
  
header p {  
 color: #94a3b8;  
 font-size: 1.2rem;  
 max-width: 600px;  
 margin: 20px auto 0;  
}  
  
/* زر العودة */  
.back-btn {  
 position: absolute;  
 top: 30px;  
 right: 30px;  
 color: var(--white);  
 text-decoration: none;  
 background: rgba(255,255,255,0.1);  
 padding: 10px 20px;  
 border-radius: 30px;  
 backdrop-filter: blur(5px);  
 transition: all 0.3s ease;  
}  
.back-btn:hover { background: var(--accent); color: var(--primary); }  
  
.container {  
 max-width: 1200px;  
 margin: -50px auto 50px;  
 padding: 0 20px;  
 position: relative;  
 z-index: 10;  
}  
  
/* --- الشبكة (Grid) المعدلة --- */  
.grid {  
 display: flex;  
 flex-wrap: wrap;  
 justify-content: center;  
 gap: 20px;  
}  
  
/* --- البطاقات (Cards) --- */  
.card {  
 background: var(--white);  
 border-radius: 20px;  
 padding: 30px;  
 box-shadow: var(--shadow);  
 transition: transform 0.3s ease, box-shadow 0.3s ease;  
 border: 1px solid #e2e8f0;  
 display: flex;  
 flex-direction: column;  
 justify-content: space-between;  
 flex: 0 0 calc(33.333% - 20px);  
 min-width: 280px;   
}  
  
.card:hover {  
 transform: translateY(-10px);  
 box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);  
 border-color: var(--accent);  
}  
  
.card h3 {  
 color: var(--primary);  
 font-size: 1.5rem;  
 margin: 0 0 5px;  
}  
  
.en-title {  
 font-family: 'Playfair Display', serif;  
 color: var(--accent);  
 font-size: 1rem;  
 display: block;  
 margin-bottom: 20px;  
}  
  
.btn {  
 display: block;  
 text-align: center;  
 background: var(--primary);  
 color: var(--white);  
 padding: 15px;  
 border-radius: 12px;  
 text-decoration: none;  
 font-weight: bold;  
 margin-top: 20px;  
 transition: background 0.3s;  
}  
.btn:hover { background: var(--accent); color: var(--primary); }  
  
/* --- استجابة الشاشات --- */  
@media (max-width: 992px) {  
 .card {  
 flex: 0 0 calc(50% - 15px);  
 }  
}  
  
@media (max-width: 768px) {  
 .card {  
 flex: 0 0 100%;  
 }  
 header h1 { font-size: 2rem; }  
}  
  
/* --- صفحات التفاصيل --- */  
.book-detail {  
 background: var(--white);  
 border-radius: 20px;  
 padding: 50px;  
 box-shadow: var(--shadow);  
}  
  
.drive-btn {  
 display: flex;  
 align-items: center;  
 justify-content: center;  
 background: linear-gradient(45deg, var(--secondary), var(--accent));  
 color: var(--white);  
 padding: 20px;  
 border-radius: 15px;  
 text-decoration: none;  
 font-weight: 800;  
 font-size: 1.2rem;  
 margin-top: 30px;  
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);  
 transition: transform 0.2s;  
}  
.drive-btn:hover { transform: scale(1.02); }  
  
footer {  
 text-align: center;  
 padding: 40px;  
 color: var(--text-light);  
 font-size: 0.9rem;  
 border-top: 1px solid #e2e8f0;  
 background: var(--white);  
 margin-top: 50px;  
}