/* =========================================================
   Music FM — App Banner Final 2026
   באנר חי ב-HTML/CSS עם תמונות אייפון אמיתיות וכפתורי אפליקציות אמיתיים
========================================================= */

.mf-app-banner-final{
    position:relative;
    min-height:285px;
    display:grid;
    grid-template-columns:420px minmax(0,1fr) 135px;
    align-items:center;
    gap:34px;

    margin:32px 0 38px;
    padding:26px 34px;

    overflow:hidden;
    border-radius:4px;
    border:1px solid rgba(20,124,255,.22);

    background:
        radial-gradient(circle at 18% 10%,rgba(20,124,255,.22),transparent 34%),
        radial-gradient(circle at 78% 20%,rgba(89,199,255,.12),transparent 34%),
        linear-gradient(90deg,#020b18 0%,#031126 42%,#092a5c 100%);

    color:#fff;

    box-shadow:
        0 18px 48px rgba(15,35,70,.16),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.mf-app-banner-final::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 115px
        ),
        radial-gradient(circle at 58% 18%,rgba(20,124,255,.15),transparent 22%);
    opacity:.62;
}

.mf-app-banner-final::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:2px;
    background:linear-gradient(90deg,transparent,#147cff,#59c7ff,transparent);
    opacity:.80;
}

/* Phones */
.mf-app-phones-final{
    position:relative;
    z-index:2;
    height:250px;
}

.mf-app-phone-final{
    position:absolute;
    height:310px;
    width:auto;
    object-fit:contain;
    border-radius:0 !important;
    filter:
        drop-shadow(0 28px 48px rgba(0,0,0,.42))
        drop-shadow(0 0 18px rgba(20,124,255,.18));
    pointer-events:none;
    user-select:none;
}

.mf-app-phone-home{
    right:126px;
    top:-34px;
    transform:rotate(-7deg);
    z-index:3;
}

.mf-app-phone-songs{
    right:8px;
    top:-22px;
    transform:rotate(7deg);
    z-index:2;
}

/* Content */
.mf-app-content-final{
    position:relative;
    z-index:2;
    text-align:right;
}

.mf-app-content-final > span{
    display:inline-flex;
    color:#59c7ff;
    font-size:12px;
    line-height:1;
    font-weight:950;
    letter-spacing:.6px;
}

.mf-app-content-final h2{
    margin:12px 0 10px;
    color:#fff;
    font-size:42px;
    line-height:1.06;
    font-weight:950;
    letter-spacing:-1px;
    text-shadow:0 16px 34px rgba(0,0,0,.22);
}

.mf-app-content-final p{
    max-width:720px;
    margin:0 0 18px;
    color:rgba(255,255,255,.84);
    font-size:17px;
    line-height:1.65;
    font-weight:800;
}

/* Real buttons */
.mf-app-badges-final{
    display:grid;
    grid-template-columns:repeat(4,minmax(130px,1fr));
    gap:10px;
    max-width:820px;
}

.mf-app-badges-final a{
    display:block;
    min-width:0;
    transition:
        transform .18s ease,
        filter .18s ease;
}

.mf-app-badges-final a:hover{
    transform:translateY(-2px);
    filter:drop-shadow(0 0 14px rgba(20,124,255,.28));
}

.mf-app-badges-final img{
    display:block;
    width:100%;
    height:auto;
    border-radius:0 !important;
}

/* QR */
.mf-app-qr-final{
    position:relative;
    z-index:2;
    justify-self:end;
    text-align:center;
}

.mf-app-qr-final strong{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-size:15px;
    font-weight:950;
}

.mf-app-qr-box{
    width:104px;
    height:104px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:4px;
    padding:10px;
    border-radius:4px;
    background:#fff;
    box-shadow:0 14px 32px rgba(0,0,0,.28);
}

.mf-app-qr-box i{
    display:block;
    border-radius:2px;
    background:#031126;
}

.mf-app-qr-box i:nth-child(2),
.mf-app-qr-box i:nth-child(4),
.mf-app-qr-box i:nth-child(6),
.mf-app-qr-box i:nth-child(9),
.mf-app-qr-box i:nth-child(12),
.mf-app-qr-box i:nth-child(13),
.mf-app-qr-box i:nth-child(15),
.mf-app-qr-box i:nth-child(17),
.mf-app-qr-box i:nth-child(20),
.mf-app-qr-box i:nth-child(23){
    background:#147cff;
}

.mf-app-qr-final small{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,.72);
    font-size:12px;
    font-weight:850;
}

/* Responsive */
@media(max-width:1180px){
    .mf-app-banner-final{
        grid-template-columns:330px minmax(0,1fr);
    }

    .mf-app-qr-final{
        display:none;
    }

    .mf-app-phone-final{
        height:275px;
    }

    .mf-app-phone-home{
        right:102px;
        top:-22px;
    }

    .mf-app-phone-songs{
        right:0;
        top:-12px;
    }

    .mf-app-badges-final{
        grid-template-columns:repeat(2,minmax(150px,1fr));
        max-width:520px;
    }
}

@media(max-width:820px){
    .mf-app-banner-final{
        grid-template-columns:1fr;
        gap:22px;
        padding:26px 22px;
    }

    .mf-app-phones-final{
        order:2;
        width:330px;
        max-width:100%;
        height:270px;
        margin:0 auto;
    }

    .mf-app-content-final{
        order:1;
        text-align:center;
    }

    .mf-app-content-final h2{
        font-size:32px;
    }

    .mf-app-content-final p{
        font-size:15px;
    }

    .mf-app-badges-final{
        margin:0 auto;
    }

    .mf-app-phone-final{
        height:286px;
    }

    .mf-app-phone-home{
        right:158px;
        top:-18px;
    }

    .mf-app-phone-songs{
        right:48px;
        top:-8px;
    }
}

@media(max-width:520px){
    .mf-app-banner-final{
        margin:24px 0 30px;
        padding:24px 16px;
    }

    .mf-app-phones-final{
        height:220px;
        width:280px;
    }

    .mf-app-phone-final{
        height:238px;
    }

    .mf-app-phone-home{
        right:132px;
        top:-10px;
    }

    .mf-app-phone-songs{
        right:50px;
        top:-2px;
    }

    .mf-app-content-final h2{
        font-size:28px;
    }

    .mf-app-content-final p{
        font-size:14px;
        line-height:1.62;
    }

    .mf-app-badges-final{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }
}

@media(prefers-reduced-motion: reduce){
    .mf-app-banner-final *,
    .mf-app-banner-final *::before,
    .mf-app-banner-final *::after{
        animation:none !important;
        transition:none !important;
        transform:none !important;
    }
}