/*
Theme Name: Onger Interactive Pro
Version: 6.0
*/
* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; background-color: #f4f7f6; font-family: 'Segoe UI', sans-serif; }

/* الهيدر التفاعلي */
#hero {
    position: relative; width: 100%; height: 60vh; min-height: 350px;
    background: #000; overflow: hidden; cursor: pointer;
}
#canvas-webgl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.hero-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 10; color: white; pointer-events: none; width: 100%;
}
.hero-overlay h1 { font-size: clamp(35px, 7vw, 70px); margin: 0; text-transform: uppercase; font-weight: 900; }

/* حاوية المقالات والشبكة */
.main-container { max-width: 1200px; margin: -60px auto 60px; padding: 0 20px; position: relative; z-index: 99; }
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; }

/* تصميم المربع الصغير المتناسق */
.post-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s;
    display: flex; flex-direction: column; height: 100%;
}
.post-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(249, 103, 251, 0.2); }

.post-thumb { width: 100%; height: 170px; overflow: hidden; background: #071232; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }

.post-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.post-body h2 { 
    font-size: 18px; margin: 0 0 10px; line-height: 1.4; 
    min-height: 50px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.post-body h2 a { text-decoration: none; color: #071232; }
.post-excerpt { font-size: 14px; color: #666; margin-bottom: 15px; flex-grow: 1; line-height: 1.5; }

.read-more { font-size: 12px; font-weight: 800; color: #f967fb; text-decoration: none; text-transform: uppercase; border-top: 1px solid #eee; padding-top: 10px; }

/* تصميم الزر العائم */
.floating-home {
    position: fixed; bottom: 30px; right: 30px;
    width: 60px; height: 60px; background: #071232;
    color: white; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
    text-decoration: none; z-index: 9999;
    box-shadow: 0 8px 20px rgba(249, 103, 251, 0.3);
    transition: all 0.3s ease; font-size: 24px;
}
.floating-home:hover { background: #f967fb; transform: scale(1.1) rotate(10deg); }

@media (max-width: 600px) { .posts-grid { grid-template-columns: 1fr; } .floating-home { width: 50px; height: 50px; bottom: 20px; right: 20px; } }