anlamadım. birleştirmek istediğin dizinin örneği ile birlikte yazarsan, daha iyi olur.

$arr = [
    0 => ["ad" => "ali", "soyad" => "k"],
    1 => ["ad" => "ceren", "soyad" => "b"],
    2 => ["ad" => "eren", "soyad" => "e"],
    3 => ["ad" => "erdem", "soyad" => "a"],
    4 => ["ad" => "burak", "soyad" => "s"],
    5 => ["ad" => "uğur", "soyad" => "u"],
];
$adSoyad = array();
foreach($arr as $key => $value){
    $adSoyad[] = $value["ad"]." ".$value["soyad"];
}
print_r($adSoyad);

css'i hiç sevmedim, javascript varken artık css de dinamikleştirmek adına arayüzde hiç style bile yazmıyorum. bu da pratik yapmadığım için bildiklerimi unutmama sebep oluyor. ancak sadece dikkatsizlik yaptığım için, mesaj kasmaya çalışan bir ergenmişim gibi tavır takınman hoş olmadı. css konularına bir daha bakmayacağım, senin sorduğun sorularada.

    a{
        align-self: flex-end;
        padding: 3px 8px;
        font-family: 'Mulish', sans-serif;
        font-size: 15px;
        box-shadow: $shadow-sm;
        transition: .5s all;
    }
    a i {
        transition: all .4s;
    }
    a:hover > i{
        display: inline-block;
        color: $white;
        transform: rotateX(180deg) rotateY(180deg);
    }

a {
	align-self: flex-end;
	padding: 3px 8px;
	font-family: 'Mulish', sans-serif;
	font-size: 15px;
	box-shadow: $shadow-sm;
	transition: .5s all;
	i {
		transition: all .4s;
	}
	&:hover {
		>i {
			display: inline-block;
			color: $white;
			transform: rotateX(180deg) rotateY(180deg);
		}
	}
}

@rotalie hover için animation kullanabilirsin, öyle bi yazdın ki kendimden şüphe ettim hover da animation kullanılmıyor mu diye. alternatif bir kullanım fikiri idi benimki, neyse dediğin gibi olsun;

    a{
        align-self: flex-end;
        padding: 3px 8px;
        font-family: 'Mulish', sans-serif;
        font-size: 15px;
        box-shadow: $shadow-sm;
        transition: .5s all;
    }
    a i {
        transition: all .4s;
    }
    a i:hover{
        display: inline-block;
        color: $white;
        transform: rotateX(180deg) rotateY(180deg);
    }

<a>Profili görüntüle <i>test</i></a>

sanırım scss hali de şöyle

a {
	align-self: flex-end;
	padding: 3px 8px;
	font-family: 'Mulish', sans-serif;
	font-size: 15px;
	box-shadow: $shadow-sm;
	transition: .5s all;
	i {
		transition: all .4s;
		&:hover {
			display: inline-block;
			color: $white;
			transform: rotateX(180deg) rotateY(180deg);
		}
	}
}

not: bence Y eksenini eksi yapmayı dene, daha güzel dönüyor.

normalde test edip yanıt veriyorum ama, css dalınca çıkamıyorum : ) animation kullansan olmuyor mu? bana başlangıç sürelerinin çakışması gibi bir problem yaşıyormuşsun gibi geldi. animation da ne zaman animasyonun başlayacağını seçebiliyorsun.

a için delay'ı 0 ayarlayıp duration'u 0.5
b için delay'ı 0.5 ayarlayıp duration'u 0.4 yapabilirsin.

böylece a tetiklendiğide hemen çalışır ve çalışma süresi sona erdiği anda b çalışır.

animaton'un parametrelerini karştırmadan yazmak için bu siteden https://webcode.tools/generators/css/keyframe-animation faydalanıyorum. lazım olursa buradan da faydalanmanı tavsiye ederim.

dostum ilk cevap doğru yanıttı, üstelik opsiyonel kullanıma uygun bir yanıt verdim. daha sonra rica ettin, istediğini yaptım. ne istediğini bilmeyecek kadar fikir sahibi değilsen, kırıcı olmak istemem ama suyunu çıkartma. şuan çalışan hali senin tanımını yaptığın hali. üstelik tüm methodları kısa da olsa tek tek izah ettim. durup üzerine düşünürsen, javascripti hiç bilmiyorsan bile istediğini yapabilirsin çünkü çok bir şey gerekmiyor ve gerekenleri gösterip nasıl çalıştıklarını yazdım. balığı, oltasıyla, iğnesiyle ve yemiyle verdim. kusra bakma uzattığım için, bu konuda biraz hassiyetim var. küçük kazançlı freelance işler yapardım, bu tavırlardan dolayı bıraktım. en son bir bot yazdım, ödemeyi 1 hafta geç yaptılar, teslim ettiğimde program versiyon yükseltmişti, sonra oturup bir daha yaptım yapmam gerekmiyordu ama. ertesi gün ekstra bir şey istediler kıramadım yaptım. sonraki gün yine yeni bir istek. kardeş dedim sen al paranı, kodlarda sende kalsın. senin yaptığın da aynısı yani şuan.

$('.konuDetay').click(function(){
    $('.konu').each(function(){
        $(this).find('.detayicerik').hide();
    });
    $(this).next('.detayicerik').show();
});

diğerinden farklı olarak burada bir elemente ait sınıfı döngüye aldık ve içerisinde detayicerik adındaki sınıfları bulup gizledik. daha sonra sadece tıklananı gösterdik.

$('.konuDetay').click(function(){
    $(this).next('.detayicerik').toggle();
})

jquery gerektirir. this tıklanan elemanı alıyor ve aynı derinlikte bulunan ilk detay icerik sınıfını next ile seçiyor toggle ise, display durumu true ise false, false ise true yapıp bir nevi açıyor ve kapıyor.

edit: açıp kapatmak değil, sadece göstermek istiyorsan toggle yerine show yaz.

basit ve kaliteli bir eklenti https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html bununla istediğini yapabilirsin. bilmiyorsan bile demoyu kopyalaman yeterli, örneğinin aynısının demosu mevcut.