/* ============== MVV BLOKLARI ============== */

.mvv-container{
    max-width:90%;
    margin:115px auto 0;
}

.mvv-container .mvv-block{
    margin-bottom:50px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}

/* --- Görsel kutusu ------------------------------------------------------- */
.mvv-container .mvv-block .image{
    flex:0 0 auto;
    width:400px;
    overflow:hidden;
    line-height:0;
    animation:fadeInRight 2s ease;
}

/* ---- Görselin kendisi (ANİMASYON ekli) ---------------------------------- */
.mvv-container .mvv-block .image img{
    width:100%;
    transform:scale(1);
    transition:.3s;
    border-radius:5px;
    box-shadow:0 0 10px 5px rgba(0,0,0,.3);

    /* === Ken Burns efekti === */
    transform-origin:center;
    animation:kenburnsMvv 25s ease-in-out infinite;
}

/* Hover: klasik 1.05 yakınlaştır & animasyonu durdur ---------------------- */
.mvv-container .mvv-block .image:hover img{
    animation-play-state:paused;
    transform:scale(1.05);
}

/* ---- İçerik kutusu ------------------------------------------------------ */
.mvv-container .mvv-block .content{
    flex:0 0 auto;
    width:calc(100% - 400px);
    box-sizing:border-box;
    align-self:center;
    animation:fadeInUp 2s ease;
}

.mvv-container .mvv-block .content h5{
    font-weight:700;
    font-size:22px;
    color:#00bcd4;
    margin-bottom:10px;
}

/* ============== RESPONSIVE ============== */

@media screen and (min-width:1024px){
    .mvv-container .mvv-block:nth-child(odd) .image{order:1;}
    .mvv-container .mvv-block:nth-child(even) .image{order:2;}
    .mvv-container .mvv-block:nth-child(odd) .content{order:2;padding-left:30px;}
    .mvv-container .mvv-block:nth-child(even) .content{order:1;padding-right:30px;}
}

@media screen and (min-width:721px) and (max-width:1023px){
    .mvv-container .mvv-block{flex-direction:row;align-items:center;}

    .mvv-container .mvv-block .image,
    .mvv-container .mvv-block .content{width:calc(50% - 40px);}

    .mvv-container .mvv-block .image{margin-right:20px;order:1;}
    .mvv-container .mvv-block .content{margin-left:20px;padding:20px;text-align:left;}

    .mvv-container .mvv-block:nth-child(even) .image{order:2;margin:0 0 0 20px;}
    .mvv-container .mvv-block:nth-child(even) .content{margin:0 20px 0 0;}
}

@media screen and (max-width:720px){
    .mvv-container .mvv-block{flex-direction:column;align-items:center;}

    .mvv-container .mvv-block .image,
    .mvv-container .mvv-block .content{width:100%;}

    .mvv-container .mvv-block .content{padding:20px;text-align:left;}

    .mvv-container .mvv-block .image{order:1;}
    .mvv-container .mvv-block .content{order:2;}
}

/* ============== KEYFRAMES ============== */

@keyframes fadeInUp{
    0%  {opacity:0; transform:translateY(50px);}
    100%{opacity:1; transform:translateY(0);}
}
@keyframes fadeInRight{
    0%  {opacity:0; transform:translateY(-50px);}
    100%{opacity:1; transform:translateY(0);}
}
/* --- Ken Burns görüntü animasyonu --- */
@keyframes kenburnsMvv{
    0%   {transform:scale(1)    translate(0,0);}
    50%  {transform:scale(1.10) translate(-3%,-3%);}
    100% {transform:scale(1)    translate(0,0);}
}

/* ============== ERİŞİLEBİLİRLİK ============== */

/* Küçük ekran veya hareket tercihinde animasyon kapat */
@media (max-width:720px),
(prefers-reduced-motion:reduce){
    .mvv-container .mvv-block .image img{animation:none;}
}