/* ===== GAME TEMPLATE CSS — template-19 (معدات الألعاب الإلكترونية) ===== */
.game-hero { position: relative; min-height: 85vh; display: flex; align-items: center; background-size: cover; background-position: center; overflow: hidden; background-color: #0b0b1a; }
.game-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(11,11,26,0.96) 15%, rgba(11,11,26,0.55) 55%, rgba(139,92,246,0.15) 100%); }
.game-hero::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.015) 3px 4px); pointer-events: none; }
.game-hero-content { position: relative; z-index: 2; }
.game-kicker { display: inline-block; font-family: var(--heading-font, 'Cairo', sans-serif); color: #22d3ee; letter-spacing: 3px; font-weight: 800; text-transform: uppercase; margin-bottom: 12px; text-shadow: 0 0 18px rgba(34,211,238,0.7); }
.game-hero-title { font-family: var(--heading-font, 'Cairo', sans-serif); font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 1rem; text-shadow: 0 0 35px rgba(139,92,246,0.55); }
.game-hero-subtitle { font-family: var(--body-font, 'Tajawal', sans-serif); font-size: 1.15rem; color: rgba(255,255,255,0.8); margin-bottom: 2rem; max-width: 520px; }
.game-btn { font-family: var(--heading-font, 'Cairo', sans-serif); padding: 14px 42px; border-radius: 10px; font-weight: 800; transition: all 0.3s ease; border: none; letter-spacing: 0.5px; }
.game-btn-primary { background: linear-gradient(120deg, #8b5cf6 0%, #22d3ee 100%); color: #fff; box-shadow: 0 0 25px rgba(139,92,246,0.5); }
.game-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 0 40px rgba(34,211,238,0.6); color: #fff; }
.game-section { padding: 80px 0; }
.game-section-title { font-family: var(--heading-font, 'Cairo', sans-serif); font-size: 2.1rem; font-weight: 900; color: var(--primary-color, #0b0b1a); margin-bottom: 3rem; text-align: center; position: relative; }
.game-section-title::after { content: ''; display: block; width: 70px; height: 4px; background: linear-gradient(90deg, #8b5cf6, #22d3ee); margin: 15px auto 0; border-radius: 4px; box-shadow: 0 0 14px rgba(139,92,246,0.6); }
.game-category-card { display: block; position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1; text-decoration: none; transition: all 0.35s ease; border: 1px solid rgba(139,92,246,0.25); background: #0b0b1a; }
.game-category-card:hover { transform: translateY(-6px); border-color: #22d3ee; box-shadow: 0 0 30px rgba(34,211,238,0.35); }
.game-category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.game-category-card:hover img { transform: scale(1.1); }
.game-category-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,26,0.9) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 20px; }
.game-category-name { font-family: var(--heading-font, 'Cairo', sans-serif); color: #fff; font-size: 1.05rem; font-weight: 800; text-shadow: 0 0 14px rgba(34,211,238,0.8); }
.game-product-card { background: #12122b; border-radius: 16px; overflow: hidden; border: 1px solid rgba(139,92,246,0.22); transition: all 0.35s ease; height: 100%; }
.game-product-card:hover { transform: translateY(-8px); border-color: #22d3ee; box-shadow: 0 18px 40px rgba(11,11,26,0.5), 0 0 30px rgba(34,211,238,0.25); }
.game-product-image { position: relative; overflow: hidden; aspect-ratio: 1; background: #0b0b1a; }
.game-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.game-product-card:hover .game-product-image img { transform: scale(1.08); }
.game-product-badge { position: absolute; top: 12px; inset-inline-start: 12px; background: linear-gradient(120deg, #8b5cf6, #22d3ee); color: #fff; padding: 4px 14px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; box-shadow: 0 0 16px rgba(139,92,246,0.6); }
.game-product-body { padding: 20px; }
.game-product-title { font-family: var(--heading-font, 'Cairo', sans-serif); font-size: 0.98rem; font-weight: 700; color: #fff; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.game-product-price { font-family: var(--body-font, 'Tajawal', sans-serif); font-size: 1.25rem; font-weight: 800; color: #22d3ee; margin-bottom: 12px; text-shadow: 0 0 14px rgba(34,211,238,0.5); }
.game-product-btn { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid #8b5cf6; background: transparent; color: #c4b5fd; font-family: var(--heading-font, 'Cairo', sans-serif); font-weight: 800; font-size: 0.85rem; transition: all 0.3s ease; }
.game-product-btn:hover { background: linear-gradient(120deg, #8b5cf6, #22d3ee); border-color: transparent; color: #fff; box-shadow: 0 0 22px rgba(139,92,246,0.5); }
.game-banner { position: relative; border-radius: 18px; overflow: hidden; min-height: 320px; display: flex; align-items: center; background-size: cover; background-position: center; border: 1px solid rgba(139,92,246,0.3); }
.game-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,26,0.9) 0%, rgba(11,11,26,0.2) 100%); }
.game-banner-content { position: relative; z-index: 2; padding: 45px; }
.game-testimonial-card { background: #fff; border-radius: 16px; padding: 30px; border: 1px solid #eceafc; border-inline-start: 4px solid #8b5cf6; height: 100%; transition: all 0.3s ease; }
.game-testimonial-card:hover { box-shadow: 0 12px 35px rgba(139,92,246,0.18); }
.game-testimonial-text { font-family: var(--body-font, 'Tajawal', sans-serif); color: #555; margin-bottom: 20px; line-height: 1.8; }
.game-testimonial-author { font-family: var(--heading-font, 'Cairo', sans-serif); font-weight: 800; color: var(--primary-color, #0b0b1a); }
.game-feature-box { text-align: center; padding: 30px 20px; background: #fff; border-radius: 16px; border: 1px solid #eceafc; height: 100%; transition: all 0.3s ease; }
.game-feature-box:hover { border-color: #8b5cf6; box-shadow: 0 12px 30px rgba(139,92,246,0.15); transform: translateY(-4px); }
.game-feature-icon { width: 62px; height: 62px; background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(34,211,238,0.12)); border: 1px solid rgba(139,92,246,0.3); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 1.45rem; color: #8b5cf6; }
.game-feature-title { font-family: var(--heading-font, 'Cairo', sans-serif); font-size: 1.05rem; font-weight: 800; color: var(--primary-color, #0b0b1a); margin-bottom: 8px; }
.game-feature-desc { font-family: var(--body-font, 'Tajawal', sans-serif); color: #777; font-size: 0.9rem; }
@media (max-width: 768px) { .game-section { padding: 50px 0; } .game-hero { min-height: 55vh; } }