* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background:linear-gradient(135deg,#6a11cb,#2575fc); color:white; text-align:center; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:20px; }

.logo { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; animation:logoBounce 1s ease infinite alternate; }
@keyframes logoBounce { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }
.code-symbol { font-size:2.5rem; font-weight:bold; color:#ffd700; }
h1 { font-size:2rem; }
.tagline { margin-bottom:20px; font-size:1.2rem; }

.buttons { display:flex; gap:15px; margin-bottom:30px; }
.btn { text-decoration:none; background-color:rgba(255,255,255,0.2); color:white; padding:10px 20px; border-radius:8px; transition:all 0.3s ease; }
.btn:hover { background-color:#ffd700; color:#000; transform:scale(1.1); }

.about { max-width:600px; margin:0 auto 30px; background-color:rgba(0,0,0,0.2); padding:20px; border-radius:10px; }
.about h2 { margin-bottom:10px; }

.videos { max-width:900px; margin-bottom:30px; }
.videos h2 { margin-bottom:15px; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:15px; }
.video-card { background-color:rgba(255,255,255,0.15); padding:20px; border-radius:10px; transition: transform 0.3s ease, background-color 0.3s ease; cursor:pointer; }
.video-card:hover { background-color:#ffd700; color:#000; transform:scale(1.05); }

footer { margin-top:auto; font-size:0.9rem; opacity:0.8; }
/* خط عربي واضح + اتجاه النص */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;600;700&display=swap');

html[lang="ar"], body {
  direction: rtl;
  font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.8;
}

/* تنسيق جميل للكلمات التقنية */
.code {
  font-family: ui-monospace, "Courier New", monospace;
  font-weight: bold;
  white-space: nowrap;
}
.lang-switch {
  margin-top: 15px;
}

#lang-btn {
  background-color: rgba(255,255,255,0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

#lang-btn:hover {
  background-color: #ffd700;
  color: #000;
}