.cyber-container.homepage-grid {
    display: grid;
    /* טורים: טור שמאלי רחב (מינימום auto, מקסימום 850px), וטור ימני צר יותר (מינימום 280px, מקסימום 400px). */
    grid-template-columns: minmax(auto, 850px) minmax(280px, 400px); 
    /* שורות: גובה אוטומטי לכל בלוק תוכן. */
    grid-template-rows: auto; 
    /* מרווחים בין הבלוקים ברשת: 60px אנכי, 40px אופקי. */
    gap: 60px 40px; 
    /* יישור הפריטים לתחילת התא שלהם (למעלה). */
    align-items: start; 
    /* הסגנונות הבסיסיים של max-width, margin, padding ו-direction יורשים מ-.cyber-container ב-test.css */
}

/* * בלוק חדשות ראשי (Main News Block)
 * האלמנט הבולט ביותר בדף הבית. מעוצב עם צללים עמוקים, זוהר חזק ואנימציות מלוטשות.
 */
.main-news-block {
    /* מיקום ברשת: בטור הראשון (שמאלי) בשורה הראשונה. */
    grid-column: 1 / 2; 
    grid-row: 1 / 2;
    position: relative;
    overflow: hidden; /* מבטיח שכל התוכן נשאר בגבולות הבלוק עם פינות מעוגלות */
    border-radius: 16px; /* פינות מעוגלות יותר למראה יוקרתי */
    background-color: var(--panel-bg); /* רקע קל שייתן עומק */
    /* צל עמוק ורחב יותר + זוהר ניאון בולט. */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px var(--neon-pink-glow); 
    /* מעבר חלק ויוקרתי לטרנספורמציות וצל. */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color-subtle); /* גבול עדין */
}

.main-news-block:hover {
    transform: translateY(-12px) scale(1.01); /* ריחוף בולט עם הגדלה קלה */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px var(--neon-pink-glow); /* צל חזק ורחב יותר בהובר */
}

.main-news-link {
    display: block;
    text-decoration: none;
    color: inherit; /* יורש צבע טקסט מההורה */
    position: relative;
}

.main-news-image {
    width: 100%;
    height: 450px; /* גובה מוגדל לתמונה ראשית */
    object-fit: cover; /* חיתוך התמונה כדי שתמלא את השטח */
    display: block;
    opacity: 0.9; /* שקיפות קלה לתמונה כדי לתת עומק לאוברליי */
    transition: opacity 0.4s ease-in-out;
}

.main-news-block:hover .main-news-image {
    opacity: 1; /* תמונה חדה יותר בהובר */
}

.main-news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* גרדיאנט עמוק יותר ורחב יותר, שקוף מלמעלה ועמוק למטה. */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%);
    padding: 40px; /* פאדינג מוגדל */
    color: white; /* צבע טקסט לבן על האוברליי */
}

.main-news-title {
    font-size: 3.2rem; /* כותרת גדולה ומרשימה יותר */
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-pink);
    /* זוהר כפול עמוק וברור לכותרת. */
    text-shadow: 0 0 20px var(--neon-pink-glow), 0 0 5px rgba(255, 255, 255, 0.5); 
    margin-bottom: 15px;
    line-height: 1.1; /* קרוב יותר */
    letter-spacing: 1.5px; /* רווח אותיות עדין */
}

.main-news-subtitle {
    font-size: 1.2rem; /* תת-כותרת ברורה יותר */
    color: var(--text-color-primary);
    line-height: 1.6;
    opacity: 0.8;
}

/* * ווידג'ט סטטיסטיקה (Homepage Stats)
 * ממוקם בטור הצדדי של דף הבית, מציג נתונים מרכזיים.
 */
.stats-widget.homepage-stats {
    grid-column: 2 / 3; /* ממוקם בטור הימני (הצר יותר) */
    grid-row: 1 / 2;
    /* יורש את סגנונות הבסיס של stats-widget מ-test.css */
    display: flex; 
    flex-direction: column; /* מסדר את הפריטים אנכית */
    justify-content: space-around; /* פיזור שווה של הפריטים בתוך הווידג'ט */
    align-items: stretch; /* מתיחה לרוחב המיכל */
    min-height: 450px; /* גובה מינימלי כדי להתאים לבלוק החדשות הראשי ולמלא את השורה */
    padding: 25px;
    gap: 20px;
    /* יורש רקע, גבולות וצל מ-stats-widget הכללי */
}

/* * אזור עדכונים אחרונים (Latest Updates Section)
 * מציג בלוקים קטנים יותר של חדשות/עדכונים מהירים.
 */
.latest-updates-section {
    grid-column: 1 / 3; /* תופס את כל הרוחב מתחת לבלוקים הראשונים */
    grid-row: 2 / 3;
    /* יורש סגנונות מ-cyber-section */
    padding: 35px;
}

.update-grid {
    display: grid;
    /* מציג 4 עמודות במסכים רחבים, עם גמישות לרדת שורה במסכים קטנים. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 25px;
}

.update-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background-color: var(--darker-bg); /* רקע כהה יותר לכל עדכון (עמוק יותר מ-panel-bg) */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid var(--border-color-subtle);
}

.update-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px var(--neon-blue-glow);
}

.update-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.update-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--neon-blue);
    text-shadow: var(--text-glow);
    margin: 15px 15px 5px 15px;
    text-align: right;
    line-height: 1.3;
}

.update-meta {
    font-size: 0.85rem;
    color: var(--text-color-secondary);
    margin: 0 15px 15px 15px;
    text-align: right;
}

/* * אזור מאמרים נבחרים (מאמרי כרטיס) - Featured Articles Homepage
 * מציג כרטיסים של מאמרים/מדריכים, יורש סגנונות בסיסיים מ-cyber-card.
 */
.featured-articles-homepage {
    grid-column: 1 / 3; /* תופס את כל הרוחב */
    grid-row: 3 / 4;
    /* יורש סגנונות מ-cyber-section */
    padding: 35px; /* ודא שיש פאדינג נכון */
}

/* --- התאמות רספונסיביות ספציפיות לדף הבית (Homepage Responsive Adjustments) --- */
@media (max-width: 1024px) {
    /* הופך את הפריסה לטור יחיד במסכים בינוניים (טאבלטים). */
    .cyber-container.homepage-grid {
        grid-template-columns: 1fr; /* טור יחיד */
        gap: 30px;
        padding: 20px;
    }
    .main-news-block,
    .stats-widget.homepage-stats,
    .latest-updates-section,
    .featured-articles-homepage {
        grid-column: 1 / 2; /* כל הבלוקים תופסים טור יחיד */
    }
    .stats-widget.homepage-stats {
        min-height: auto; /* ביטול הגבלת גובה כדי שלא יהיה רווח ריק */
    }
}

@media (max-width: 768px) {
    .main-news-block {
        /* מתיחה לקצוות במסכים קטנים מאוד (אם הפאדינג של הקונטיינר הוא 20px). */
        /* זה יוצר אפקט "Full bleed" שנפוץ בפורטלים. */
        margin: 0 -20px; 
        border-radius: 0; /* הסרת פינות מעוגלות בקצוות המסך */
        box-shadow: none; /* ביטול צללים בקצוות */
        border: none; /* ביטול גבולות בקצוות */
    }
    .main-news-image {
        height: 250px; /* גובה קטן יותר לתמונה ראשית */
    }
    .main-news-overlay {
        padding: 20px;
    }
    .main-news-title {
        font-size: 1.8rem;
    }
    .main-news-subtitle {
        font-size: 0.9rem;
    }
    .update-grid {
        grid-template-columns: 1fr; /* טור יחיד לעדכונים */
    }
    .update-item {
        margin: 0 -15px; /* מתיחה לקצוות */
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    /* התאמות נוספות עבור cyber-section כדי למתוח לקצוות במסכים קטנים */
    .cyber-section {
        padding-left: 15px;
        padding-right: 15px;
        margin-left: -20px; /* קיזוז הפאדינג הכללי של cyber-container */
        margin-right: -20px;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    /* הסתרת הגבולות והצללים של cyber-section כשהוא נמתח */
    .cyber-section {
        box-shadow: none;
        border: none;
    }
}

/* --- סגנונות בלוק פרסומת (Ad Block Styles) --- */

.ad-block.homepage-ad {
    /* מיקום ברשת: בטור השני, בשורה הראשונה - כמו ווידג'ט הסטטיסטיקה */
    grid-column: 2 / 3;
    grid-row: 1 / 2;

    /* יורש גודל ותכונות בסיס מווידג'ט הסטטיסטיקה כדי לשמור על הפריסה */
    display: flex;
    flex-direction: column;
    justify-content: center; /* ממורכז אנכית */
    align-items: center; /* ממורכז אופקית */
    min-height: 450px; /* אותו גובה מינימלי כמו ווידג'ט הסטטיסטיקה */
    
    background-color: var(--dark-bg); /* רקע כהה לבלוק הפרסומת */
    border: 1px solid var(--neon-pink); /* גבול ורוד ניאון להבלטה */
    box-shadow: 0 0 15px rgba(255, 60, 70, 0.4); /* צל זוהר */
    border-radius: 12px;
    overflow: hidden; /* לוודא שתמונה לא חורגת */
    text-align: center;
    cursor: pointer; /* סימון שהבלוק לחיץ */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.ad-block.homepage-ad:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--neon-pink-glow); /* זוהר חזק יותר במעבר */
}

.ad-link {
    display: flex; /* כדי שהתמונה והטקסט יסתדרו בפנים */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
    position: relative;
}

.ad-image {
    width: 100%;
    height: 100%; /* התמונה תמלא את כל הבלוק */
    object-fit: cover; /* חיתוך התמונה */
    opacity: 0.7; /* שקיפות קלה לתמונה */
    transition: opacity 0.3s ease-in-out;
}

.ad-block.homepage-ad:hover .ad-image {
    opacity: 1; /* תמונה חדה יותר בהובר */
}

.ad-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5); /* שכבת צבע שקופה מעל התמונה */
    padding: 15px;
    box-sizing: border-box;
    transition: background-color 0.3s ease-in-out;
}

.ad-block.homepage-ad:hover .ad-overlay {
    background-color: rgba(0, 0, 0, 0.3); /* פחות כהה בהובר */
}

.ad-title {
    font-size: 1.8rem;
    font-family: 'Orbitron', sans-serif;
    color: var(--neon-blue); /* כותרת הפרסומת בצבע ניאון */
    text-shadow: 0 0 10px var(--neon-blue-glow);
    margin-bottom: 10px;
    line-height: 1.2;
}

.ad-text {
    font-size: 1rem;
    color: var(--text-color-primary);
    opacity: 0.9;
}

/* --- התאמות רספונסיביות לבלוק הפרסומת --- */
@media (max-width: 1024px) {
    .ad-block.homepage-ad {
        min-height: 300px; /* גובה מינימלי קטן יותר במסכים בינוניים */
        grid-column: 1 / 2; /* יעבור לטור יחיד כמו שאר הבלוקים */
        grid-row: auto;
    }
    .ad-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .ad-block.homepage-ad {
        margin: 0 -20px; /* מתיחה לקצוות במסכים קטנים מאוד */
        border-radius: 0;
        box-shadow: none;
        border: none;
    }
    .ad-title {
        font-size: 1.3rem;
    }
    .ad-text {
        font-size: 0.9rem;
    }
}