  :root { --primary:#2563eb; --dark:#1e293b; --light:#f8fafc; }
        * { margin:0; padding:0; box-sizing:border-box; }
        body { font-family:'Rubik',sans-serif; background:var(--light); color:#1f2937; line-height:1.8; direction:rtl; }

        /* HERO חדש – עם img אמיתי */
        .hero {
            position: relative;
            height: 70vh;
            min-height: 500px;
            overflow: hidden;
        }
        .hero img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;   /* ← זה מה ששולט איפה הפוקוס במובייל! */
            transition: transform 0.6s ease;
        }
        .hero:hover img { transform: scale(1.05); }

        /* שכבת הצללה + טקסט */
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7));
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .hero-content {
            max-width: 900px;
            padding: 2rem;
            text-shadow: 0 3px 15px rgba(0,0,0,0.8);
        }
        .hero h1 { font-size: 3.6rem; margin-bottom: 1rem; }
        .hero-meta { font-size: 1.2rem; opacity: 0.95; }
        .hero-meta span { margin-left: 1.5rem; }

        .container { max-width: 820px; margin: 0 auto; padding: 4rem 1rem; }
        .article-body { font-size: 1.2rem; opacity: 0; transform: translateY(30px); }
        .article-body h2 { 
            font-size: 2.3rem; margin: 3rem 0 1.2rem; color: var(--dark);
            border-bottom: 5px solid var(--primary); padding-bottom: 0.6rem; display: inline-block;
        }
        .article-body img { max-width: 100%; border-radius: 12px; margin: 2.5rem 0; box-shadow: 0 15px 40px rgba(0,0,0,0.15); }

       .share-buttons {
    margin: 4.5rem 0;
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 10px 10px;
    border-radius: 50%;
    background: #555;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.share-btn:hover { transform: translateY(-4px) scale(1.12); box-shadow: 0 10px 25px rgba(0,0,0,0.25); }

/* צבעים מדויקים של הרשתות */
#share-twitter   { background: #000000; }
#share-facebook  { background: #1877f2; }
#share-linkedin  { background: #0a66c2; }
#share-whatsapp  { background: #25d366; }
#share-telegram  { background: #229ed9; }
#share-email     { background: #ea4335; }
#copy-link       { background: #64748b; cursor: pointer; }

#copy-tooltip {
    opacity: 0;
    margin-right: 16px;
    font-weight: 700;
    color: #16a34a;
    transition: opacity 0.4s ease;
}
        footer { text-align:center; padding:5rem; background:var(--dark); color:white; }

        @media (max-width:768px) {
            .hero { height: 60vh; min-height: 420px; }
            .hero h1 { font-size: 2.7rem; }
            .hero img { object-position: center 20%; object-fit: fill;}  /* כאן אתה שולט בדיוק מה רואים במובייל */
        }
        p{margin-bottom:1.6rem;}
ul{padding-right:30px}